CSS

7 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. Please visit these tricks and tips and share your thought with us. We always try to find some highly useful resources for our readers. Please visit this list.

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

2) 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.

<div class="equalHeight" style="border:1px solid">
My first line <br/>
My second Line <br/>
My third line<br/><br/>
</div>
<div class="equalHeight" style="border:1px solid">
Column Two <br/>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(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() > maxHeight) {
maxHeight = $(this).height();;
}
});

//Set the height
col.height(maxHeight);
}
</script>

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

4) Disable Right Clicking

$(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;
});
});

5) Set the Timer

Using this code set the Timer on the web pages.

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

6) Counting child elements

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

<div id="foo">
 <div id="bar"></div>
 <div id="baz">
 <div id="biz">
 </div>
 <span><span>
</span></span></div>
 
//jQuery code to count child elements
$("#foo > div").size()
</div>

7) Get the Element on Screen Centre

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();

Popular Posts

To Top