Top TEN Useful jQuery Code Snippets for Web Developers

Top TEN Useful jQuery Code Snippets for Web Developers

jqueryTop TEN Useful jQuery Code Snippets for Web Developers - Top TEN Useful jQuery Code Snippets for Web Developers

 

1. Scroll to Top link

This little piece of code is employed to navigate the user back to top of the page once they ar at all-time low of the page.

$(document).ready(function(){
$("a.scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});

 

You need to make a markup language link with category scrolltop . That’s it.

2. How to Prevent Users from Submitting the Form Twice

This below code can work excellent even on forms that have multiple submit buttons

$(document).ready(function(){
var $myForm = $("#formID");
$myForm.submit(function(){
$myForm.submit(function(){
return false;
});
});
});

3. Zebra Table style victimization jQuery

Zebra table is incredibly illustrious and it’s straightforward to differentiate alternate rows in an exceeding table. I hope this trick can improve the readability of the whole table. we’d like to jot down CSS code for sophistication .zebra for background color

$(document).ready(function(){
$("table tr:even").addClass('zebra');
});

4. How to Check If a Checkbox is Checked in jQuery?

By mistreatment jQuery’s is() perform, we will deliver the goods this practicality

$(document).ready(function () {
if($(element).is(':checked')) {
// checked
} else {
// unchecked
}
});

5. How to Open Links in New Tab / Window

The first link can open all the links in new tab wherever the other can open in new tab if it’s category external

$(document).ready(function(){
$( 'a[href^="http://"],a[href^="https://"]' ).attr( 'target','_blank' ); //open all links in new tab
$( 'a.external' ).attr( 'target','_blank' ); //links having external class only opens in new tab
});

6. How to Get the dimensions of the Window or the Document exploitation jQuery?

If you’re exploitation jQuery, you’ll be able to get the dimensions of the window or the document exploitation jQuery methods:

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

To get the screen size you have to use the screen object

screen.height;
screen.width;

8. How to Get consumer informatics address victimization jQuery

ipinfo.io is FREE for one thousand requests daily. we will simply get additional details regarding geolocation from this API

$(document).ready(function () {
$.getJSON("http://jsonip.com/?callback=?", function (data) {
console.log(data);
alert(data.ip);
});
});

9. How to Check If an Element exists in jQuery

$(document).ready(function () {
if ($(element).length > 0)
{
alert("exists");
} else {
alert("doesn't exist");
}
});

10. How to Count No of Rows in an exceedingly Table

Below code is employed to count the number of tr parts inside the table.

$(document).ready(function () {
var rowCount = $('#myTable tr').length;
});

Leave a Reply