jQuery Articles - Page 23 of 46

To adjust the height of iframe, use the jQuery height() method. You can try to run the following code to adjust height of iframe dynamically on button click:ExampleLive Demo                 $(document).ready(function(){         $("button").click(function(){           $("iframe").height(300);         });       });             Change Height

Here’s an example wherein the iframe size is larger than the page. We will scroll to the top of the page whenever the iframe loads using jQuery −ExampleLive Demo               $(document).ready(function(){       $("button").click(function(){         $('iframe').ready(function(){           $(window).scrollTop(0);         });       });    });           Loop through each image

To loop through all the iframes element of a page, use the jQuery each() method. You can try to run the following code to learn how to loop through all iframes. We have created three iframes below −ExampleLive Demo $(document).ready(function(){   $("button").click(function(){     $("iframe").each(function(){       alert($(this).text())       });   }); });   Qries Q/A   Tutorialspoint Free Learning   Send Files   Loop through iFrames

To insert a new row into table at a certain index, use the jQuery val() and insertBefore() method. You can try to run the following code to learn how to insert new row into table −ExampleLive Demo     jQuery Example       $(document).ready(function(){               $('#index').val($('#myTable tbody tr').length);     $('#btn1').click(function(){       var indx = $('#index').val()-1;       var newRow = $('New row is added at index '+$('#myTable tbody tr').length+'');       newRow.insertBefore($('#myTable tbody tr:nth('+indx+')'));    });   });                   This is row 1                   This is row 2                 Add

To set the content of an iframe without src, use the jQuery html() method. You can try to run the following code to learn how to set the content of an iframe without src attribute −ExampleLive Demo      jQuery Selector                  $(document).ready(function() {     var context = $('iframe')[0].contentWindow.document;     var $body = $('body', context);     $body.html('Hello World!');   });        

To get the children of the $(this) selector, use the jQuery find() method. You can try to run the following code to get the children of the $(this) selector −ExampleLive Demo   jQuery Example       $(document).ready(function(){     $('#mydiv').click(function(){       alert($(this).find('img:last-child').attr('src'));    });   });   #my_div {    width: 200px;    height: 200px;    background-color: red;   }    

To center a div on the screen, use the jQuery centering function jQuery.fn.center. You can try to run the following code to learn how to center a div on the screen:ExampleLive Demo               $(document).ready(function(){       jQuery.fn.center = function(parent) {         if (parent) {           parent = this.parent();         } else {           parent = window;         }       this.css({        "position": "absolute",        "top": ((($(parent).height() ... Read More

You can use .is(‘:visible’) selects all elements that are visible.Example divvisible               $(document).ready(function () {          $("button").click(function () {             var dim = $('#div1').is(":visible");             if (dim == false) {                $('#div1').css({ "display": "block", "color": "red" });             }          });       });     Div is visible    Click Here

To count number of columns in a table with jQuery, use the each() function with attr(). You can try to run the following code to learn how to count column in a table:EaxmpleLive Demo       jQuery Example             $(document).ready(function(){       var num = 0;       $('tr:nth-child(1) td').each(function () {         if ($(this).attr('colspan')) {           num += +$(this).attr('colspan');         } else {         num++;       }     });    alert("Total Columns= "+num); });         -1st column-     -2nd column-     -3rd column-    

Example Live Demo table        table,th,td {       border:2px solid black;       margin-left:400px;    }    h2 {       margin-left:400px;    }    button {       margin-left:400px;    }            $(document).ready(function () {       $("button").click(function () {          var rowcount = $('table tr').length;          alert("No. Of Rows ::" +rowcount);       });    }); HTML TABLE NAME AGE DD 35 SB 35 AD 5 AA 5 Click Here