Top 10 Useful jQuery Tips and Tricks for Developers

In this collection I have collected 10 highly useful jQuery tips and tricks for developers. jQuery is the set of simple and lightweight JavaScript library. jQuery is one of the most popular client side scripting of HTML. Its famous among web designers and developers nowadays, have lots of useful plugins and techniques that help to create web pages more creative and beautiful. Also have some highly useful tricks that help jQuery developers a lot. Today we are going to share some tips and tricks for jQuery users. These tricks will help you to make your web layout and applications more creative and functional.

Determine Browser

Suppose you were to determine the browser type of the browser currently in use. You can use the following piece of code to do this:

   $(document).ready(function() {
   // If the browser type if Mozilla Firefox
   if ($.browser.mozilla && $.browser.version >= "1.8" ){ 
   // some code
   }
   // If the browser type is Opera
   if( $.browser.opera)
   {
   // some code
   }
   // If the web browser type is Safari
   if( $.browser.safari )
   {
   // some code
   }
   // If the web browser type is Chrome
   if( $.browser.chrome)
   {
   // some code
   }
   // If the web browser type is Internet Explorer
   if ($.browser.msie && $.browser.version <= 6 )
   {
   // some code
   }
   //If the web browser type is Internet Explorer 6 and above
   if ($.browser.msie && $.browser.version > 6)
   {
   // some code
   }
   });

Open New Links in New Window

Using this code, you can make easy to open links in new windows just click on hyperlinks.

    $(document).ready(function() {

    //select all anchor tags that have http in the href

    //and apply the target=_blank

    $(“a[href^=’http’]”).attr(‘target’,‘_blank’);

    });

Preloading Images in jQuery

This tricks help to load images quick on web pages and make it very easy to save and view.

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr&lt;arguments.length; ctr++)
{
jQuery(“”).attr(“src”, arguments[ctr]);
}
}

To use the above method, you can use the following piece of code:
$.preloadImages(“image1.gif”, “image2.gif”, “image3.gif”);

To check whether an image has been loaded, you can use the following piece of code:
$(‘#imageObject’).attr(‘src’, ‘image1.gif’).load(function() {
alert(‘The image has been loaded…’);
});

Set Equal Hight to the Columns

With the help of this code, jquery developers can set equal hight of each columns of your web application.

    &lt;div class=”equalHeight” style=”border:1px solid”&gt;
My first line &lt;br/&gt;
My second Line &lt;br/&gt;
My third line&lt;br/&gt;&lt;br/&gt;
&lt;/div&gt;
&lt;div class=”equalHeight” style=”border:1px solid”&gt;
Column Two &lt;br/&gt;
&lt;/div&gt;

    &lt;script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
equalHeight(‘.equalHeight’);
});

//global variable, this will store the highest height value
var maxHeight = 0;

function equalHeight(col) {
//Get all the element with class = col
col = $(col);

//Loop all the col
col.each(function() {

//Store the highest value
if($(this).height() &gt; maxHeight) {
maxHeight = $(this).height();;
}
});

//Set the height
col.height(maxHeight);
}
&lt;/script&gt;

Disable Right Clicking

If you are to disable right click on your web browser, you can use the following piece of code:

$(document).ready(function() {
//catch the right-click context menu
$(document).bind(“contextmenu”,function(e) {
//warning prompt – optional
alert(“No right-clicking!”);

//delete the default context menu
return false;
});
});

Detect Current Mouse Coordinates

Now, suppose you need to detect the current mouse coordinates in the web browser in use. To do this, you can write the following piece of code:

   $(document).ready(function() {
   $().mousemove(function(e)
   {
   $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
   });
   <DIV id=MouseCoordinates></DIV>
   });

Set the Timer

The following piece of code can be used to set a timer using jQuery:

    $(document).ready(function()
{
window.setTimeout(function()
{
// some code
}, 500);
});

Lazy Loading

Lazy loading is a great feature in jQuery that ebales you to load only the content that is needed. To use this, you should incorporate the jquery.lazyload.js script file as shown below:

  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.dimensions.js" type="text/javascript"></script>
  <script src="jquery.lazyload.js" type="text/javascript"></script>
  Next, you can use the lazyload() method as shown below:
  $("imageObject").lazyload();

Counting child elements

This jQuery code find and count child element or DIVs in the code.

    &lt;div id=”foo”&gt;
&lt;div id=”bar”&gt;&lt;/div&gt;
&lt;div id=”baz”&gt;
&lt;div id=”biz”&gt;
&lt;/div&gt;
&lt;span&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
//jQuery code to count child elements
$(“#foo &gt; div”).size()
&lt;/div&gt;

Get the Element on Screen Center

Get the elements on the centre of your computer screen.

    jQuery.fn.center = function () {
this.css(“position”,”absolute”);
this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”);
this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”);
return this;
}

    //Use the above function as:
$(element).center();

 

Leave a Reply

Your email address will not be published. Required fields are marked *