Found 10483 Articles for Web Development

Why do we use JSON.stringify() method in jQuery?

Kristi Castro
Updated on 20-Jun-2020 07:32:07

551 Views

JSON or JavaScript Object Notation is a lightweight text-based open standard designed for human-readable data interchange. Use the JSON.stringify() method to convert a JavaScript object into a string.You can try to run the following code to learn how to work with JSON.stringify() method −ExampleLive Demo JSON string is created above   var v = { "name":"Amit", "Rank":1, "city":"India"};   var newJSON = JSON.stringify(v);   document.getElementById("test").innerHTML = newJSON;

How to increase the duration of jQuery effects?

Kristi Castro
Updated on 20-Jun-2020 07:31:03

322 Views

To increase the duration of jQuery effects, set the optional speed parameter. The values include, slow, fast, milliseconds, etc. The fast value is used to increase the duration.Let us see an example with fadeIn() jQuery method. The fadeIn( ) method fades in all matched elements by adjusting their opacity and firing an optional callback after completion. Here is the description of all the parameters used by this method −speed − A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).callback − This is optional parameter representing ... Read More

How do I use jQuery effects?

Arnab Chakraborty
Updated on 22-Jun-2020 08:19:58

216 Views

For hiding and showing the div, you can use hide and show method.For hiding$('#id1').hide();For showing$('#id1').show();Example showhide                 $(document).ready(function () {          $('#btn1').click(function () {             $('#id1').hide();          });          $('#btn2').click(function () {             $('#id1').show();          });       });        I Am A Simple Paragraph    Hide    Show MethodDescriptionanimate()Runs a custom animation on the selected elementsclearQueue()Removes all remaining queued functions ... Read More

How to adjust the height of iframe based on the loaded content using jQuery?

Kristi Castro
Updated on 20-Jun-2020 07:25:20

2K+ Views

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

How does $('iframe').ready() method work in jQuery?

Kristi Castro
Updated on 20-Jun-2020 07:24:24

3K+ Views

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

How to loop through all the iframes elements of a page using jQuery?

Kristi Castro
Updated on 20-Jun-2020 07:22:57

1K+ Views

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

How to insert new row into table at a certain index using jQuery?

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

2K+ Views

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

How do I center <div> tag using CSS?

Yaswanth Varma
Updated on 08-Jan-2024 16:16:50

392 Views

For web layout, it's essential to center a in CSS. The task of centering a div should be encountered by every developer at some point in their career, if not every day. Everybody has a handy approach, but it can occasionally be annoying for beginners. The visual appeal and usability of your web design are improved by these CSS approaches, which guarantee dynamic and smooth centering. Let’s look them one by one before that let’s have a quick view on the div tag. HTML div tag In an HTML, the tag is used as a division or section. ... Read More

How to center a div using CSS?

Bhanu Priya
Updated on 08-Aug-2024 17:14:41

13K+ Views

To center a div using CSS, is one of the most important aspects of front-end development which can be achieved using various CSS properties. In this article we have used 5 approaches to center a div using CSS. We are having parent div elements and some child p elements, our task is to center the div element using CSS. Approaches to Center a div Using CSS Here is a list of approaches to Center a div Using CSS which we will be discussing in this article with step-wise explaination and complete example codes. Center div ... Read More

How to horizontally center a

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

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

Advertisements