Found 8895 Articles for Front End Technology

How to horizontally center a

Arnab Chakraborty
Updated on 22-Dec-2021 06:36:55

216 Views

Here I have one html form and one css file(style.css).”o-div” is the outer div and “i-div“is the inner div class.Example           center a div                              I am OUTER DIV                       I am INNER DIV,             I am in Center                     OutputI am OUTER DIV I am INNER DIV, I am in CenterStyle.cssbody {    background-color:Gray;    padding:30px; } .o-div {    padding:50px;    background-color:Lime; } .i-div {    background-color:Fuchsia;    max-width:400px;    height:200px;    margin: 0 auto;    text-align:center; }

How can I set the content of an iframe without src using jQuery?

Kristi Castro
Updated on 20-Jun-2020 08:08:20

1K+ Views

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!');   });        

How to get the children of the $(this) selector in jQuery?

Kristi Castro
Updated on 20-Jun-2020 08:07:11

88 Views

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;   }    

How to center a div on the screen using jQuery?

Kristi Castro
Updated on 20-Jun-2020 08:05:51

570 Views

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

How to check if a div is visible using jQuery?

Arnab Chakraborty
Updated on 22-Jun-2020 07:58:38

11K+ Views

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

How to count number of columns in a table with jQuery

Kristi Castro
Updated on 20-Jun-2020 08:04:48

600 Views

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-    

How to count number of rows in a table with jQuery?

Arnab Chakraborty
Updated on 21-Jun-2020 17:04:04

1K+ Views

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

How can I tell if table row is in view using jQuery?

Kristi Castro
Updated on 20-Jun-2020 08:03:51

869 Views

To check if table row exists or not, use the is() method, with the :visible selector −if($(".row").is(":visible")) {   alert("Visible!"); }You can try to run the following code to learn how to chck if a row exists or not. It even notifies when a new row is created −ExampleLive Demo   jQuery - Add Table Rows     table{    width: 100%;    margin: 25px 0;    border-collapse: collapse;   }   table, th, td{    border: 1px solid #6C220B;   }   table th, table td{    padding: 8px;    text-align: left;   }   ... Read More

How to call a jQuery function after a certain delay?

Kristi Castro
Updated on 20-Jun-2020 08:02:01

5K+ Views

To call a jQuery function after a certain delay, use the siteTimeout() method. Here, jQuery fadeOut() function is called after some seconds.You can try to run the following code to learn how to work with setTimeout() method in jQuery to call a jQuery function after a delay −ExampleLive Demo         $(document).ready(function(){     $("#button1").bind("click",function() {       setTimeout(function() {         $('#list').fadeOut();}, 2000);     });   });                    Voice        Speak      Write         The above content will fade out after 2 seconds

How to make a jQuery function call after “X” seconds?

Kristi Castro
Updated on 20-Jun-2020 13:12:17

3K+ Views

To make a jQuery function call after “X” seconds, use the siteTimeout() method.On button click, set the following and fade out the element. Here, we have also set the milliseconds. This is the delay that would occur before fading an element:$("#button1").bind("click",function() {    setTimeout(function() {       $('#list').fadeOut();}, 4000); });You can try to run the following code to learn how to work with setTimeout() method in jQuery:Example Live Demo               $(document).ready(function(){          $("#button1").bind("click",function() {             setTimeout(function() {                $('#list').fadeOut();}, 4000);             });          });               India       US       UK     The above data will fade out after 4 seconds

Advertisements