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.
1 2 3 4 5 | $(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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
1 2 3 4 5 6 7 8 9 10 | $(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.
1 2 3 4 5 6 7 | $(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.
1 2 3 4 5 6 7 8 9 10 11 | <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.
1 2 3 4 5 6 7 8 9 | 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(); |
