The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.
jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? Well sometimes 1 or 2 lines of jQuery code can do the same thing(or even better), so why use a big script if you can do the same trick with a small piece of code.
As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2.
1. Disable right-click
Disable right-click contextual menu.
$(document).ready(function(){$(document).bind("contextmenu",function(e){return false;});});
2. Disappearing search field text
Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(document).ready(function() {$("input.text1").val("Enter your search text here");textFill($('input.text1'));});function textFill(input){ //input focus text functionvar originalvalue = input.val();input.focus( function(){if( $.trim(input.val()) == originalvalue ){ input.val(''); }});input.blur( function(){if( $.trim(input.val()) == '' ){ input.val(originalvalue); }});}
3. Opening links in a new window
XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {//Example 1: Every link will open in a new window$('a[href^="http://"]').attr("target", "_blank");//Example 2: Links with the rel="external" attribute will only open in a new window$('a[@rel$='external']').click(function(){this.target = "_blank";});});// how to use<A href="http
4. Detect browser
Change/add something for a certain browser.
Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support.
$(document).ready(function() {// Target Firefox 2 and aboveif ($.browser.mozilla && $.browser.version >= "1.8" ){// do something}// Target Safariif( $.browser.safari ){// do something}// Target Chromeif( $.browser.chrome){// do something}// Target Caminoif( $.browser.camino){// do something}// Target Operaif( $.browser.opera){// do something}// Target IE6 and belowif ($.browser.msie && $.browser.version <= 6 ){// do something}// Target anything above IE6if ($.browser.msie && $.browser.version > 6){// do something}});
5. Preloading images
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
$(document).ready(function() {jQuery.preloadImages = function(){for(var i = 0; i<arguments.length; i++)="" {="" jQuery("<img="">").attr("src", arguments[i]);}}// how to use$.preloadImages("image1.jpg");});
6. CSS Styleswitcher
Switch between different styles?
$(document).ready(function() {$("a.Styleswitcher").click(function() {//swicth the LINK REL attribute with the value in A REL attribute$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));});// how to use// place this in your header<LINK rel="stylesheet" href="default.css" type="text/css">// the links<A href="#" class="Styleswitcher" rel="default.css">Default Theme</A><A href="#" class="Styleswitcher" rel="red.css">Red Theme</A><A href="#" class="Styleswitcher" rel="blue.css">Blue Theme</A>});
7. Columns of equal height
If you are using two CSS columns, use this to make them exactly the same height.
$(document).ready(function() {function equalHeight(group) {tallest = 0;group.each(function() {thisHeight = $(this).height();if(thisHeight > tallest) {tallest = thisHeight;}});group.height(tallest);}// how to use$(document).ready(function() {equalHeight($(".left"));equalHeight($(".right"));});});
8. Font resizing
Want to let the users change there font size?
$(document).ready(function() {// Reset the font size(back to default)var originalFontSize = $('html').css('font-size');$(".resetFont").click(function(){$('html').css('font-size', originalFontSize);});// Increase the font size(bigger font0$(".increaseFont").click(function(){var currentFontSize = $('html').css('font-size');var currentFontSizeNum = parseFloat(currentFontSize, 10);var newFontSize = currentFontSizeNum*1.2;$('html').css('font-size', newFontSize);return false;});// Decrease the font size(smaller font)$(".decreaseFont").click(function(){var currentFontSize = $('html').css('font-size');var currentFontSizeNum = parseFloat(currentFontSize, 10);var newFontSize = currentFontSizeNum*0.8;$('html').css('font-size', newFontSize);return false;});});
9. Smooth(animated) page scroll
For a smooth(animated) ride back to the top(or any location).
$(document).ready(function() {$('a[href*=#]').click(function() {if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')&& location.hostname == this.hostname) {var $target = $(this.hash);$target = $target.length && $target|| $('[name=' + this.hash.slice(1) +']');if ($target.length) {var targetOffset = $target.offset().top;$('html,body').animate({scrollTop: targetOffset}, 900);return false;}}});// how to use// place this where you want to scroll to<A name="top"></A>// the link<A href="#top">go to top</A>});
11. Get the mouse cursor x and y axis
Want to know where your mouse cursor is?
$(document).ready(function() {$().mousemove(function(e){//display the x and y axis values inside the div with the id XY$('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);});// how to use<DIV id="XY"></DIV>});
12. Verify if an Element is empty
This will allow you to check if an element is empty.
$(document).ready(function() {if ($('#id').html()) {// do something}});
13. Replace a element
Want to replace a div, or something else?
$(document).ready(function() {$('#id').replaceWith('<DIV>I have been replaced</DIV>');});
14. jQuery timer callback functions
Want to delay something?
$(document).ready(function() {window.setTimeout(function() {// do something}, 1000);});
15. Remove a word
Want to remove a certain word(s)?
$(document).ready(function() {var el = $('#id');el.html(el.html().replace(/word/ig, ""));});
16. Verify that an element exists in jQuery
Simply test with the .length property if the element exists.
$(document).ready(function() {if ($('#id').length) {// do something}});
17. Make the entire DIV clickable
Want to make the complete div clickable?
$(document).ready(function() {$("div").click(function(){//get the url from href attribute and launch the urlwindow.location=$(this).find("a").attr("href"); return false;});// how to use<DIV><A href="index.html">home</A></DIV>});
18. Switch between classes or id’s when resizing the window.
Want to switch between a class or id, when resizing the window?
$(document).ready(function() {function checkWindowSize() {if ( $(window).width() > 1200 ) {$('body').addClass('large');}else {$('body').removeClass('large');}}$(window).resize(checkWindowSize);});
19. Clone a object
Clone a div or an other element.
$(document).ready(function() {var cloned = $('#id').clone();// how to use<DIV id="id"></DIV>});
20. Center an element on the screen
Center an element in the center of your screen.'
$(document).ready(function() {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;}$("#id").center();});
21. Write our own selector
Write your own selectors.
$(document).ready(function() {$.extend($.expr[':'], {moreThen1000px: function(a) {return $(a).width() > 1000;}});$('.box:moreThen1000px').click(function() {// creating a simple js alert boxalert('The element that you have clicked is over 1000 pixels wide');});});
22. Count a element
Count an element.
$(document).ready(function() {$("p").size();});
23. Use Your Own Bullets
Want to use your own bullets instead of using the standard or images bullets?
$(document).ready(function() {$("ul").addClass("Replaced");$("ul > li").prepend("‒ ");// how to useul.Replaced { list-style : none; }});
24. Let Google host jQuery for you
Let Google host the jQuery script for you. This can be done in 2 ways.
//Example 1<SCRIPT src="http://www.google.com/jsapi"></SCRIPT><SCRIPT type="text/javascript">google.load("jquery", "1.2.6");google.setOnLoadCallback(function() {// do something});</SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></SCRIPT>// Example 2:(the best and fastest way)<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
25. Disable jQuery animations
Disable all jQuery effects
$(document).ready(function() {jQuery.fx.off = true;});
26. No conflict-mode
To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.
$(document).ready(function() {var $jq = jQuery.noConflict();$jq('#id').show();});
If you liked my post then,
Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!
0 comments: on "26 cool and useful jQuery tips, tricks & solutions"
Post a Comment