30 Pro jQuery Tips, Tricks and Strategies
137Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional.
Getting Started
These tips and tricks all have one thing in common- they are all smashingly useful. With this stuff in your back pocket, you’ll be ready to go change the world, and even better, write jQuery like you know what you’re doing. It’s gonna be fun.
We’ll start with some basic tricks, and move to some more advanced stuff like actually extending jQuery’s methods and filters. Of course, you should be familiar with the basics of jQuery first. If you haven’t used jQuery before, I highly recommend browsing the documentation and watching jQuery for Absolute Beginners Video Series. Otherwise, you’re ready to dig in!
#1 – Delay with Animate()
This is a very quick, easy way to cause delayed actions in jQuery without using setTimeout. The way we make it work is to add an animate function into your chain and animate the element to 100% opacity (which it’s already at), so it looks like nothing is happening.
For instance, let’s say that you wanted to open a dialog and then fade it away after 5 seconds. Using animate, you can do it like this:
1 2 3 | $(function(){ $("body").append("<div class='dialog'></div>").<em>animate({ opacity : 1.0 }, 5000)</em>.fadeOut(); }); |
Don’t you just love jQuery chaining? You’re welcome to read more about this technique from Karl Swedberg.
UPDATE: jQuery 1.4 has eliminated the need for this hack with a method called delay(). It is just what is sounds like – a function specifically made to delay an animation effect. Way to go, jQuery!
#2 – Loop through Elements Backwards
One of my personal favorites is being able to loop backwards through a set of elements. We all know each() lets us easily loop through elements, but what if we need to go backwards? Here’s the trick:
1 2 3 4 5 6 7 8 | $(function(){ var reversedSet = $("li").get().reverse(); //Use get() to return an array of elements, and then reverse it $(reversedSet).each(function(){ //Now we can plug our reversed set right into the each function. Could it be easier? }); }); |
#3 – Is There Anything in the jQuery Object?
Another very elementary but regularly useful trick is checking if there are any elements in the jQuery object. For example, let’s say we need to find out if there are any elements with a class of ‘active’ in the DOM. You can do that with a quick check of the jQuery object’s length property like this:
1 2 3 4 5 | $(function(){ if( $(".active").length ){ //Now the code here will only be executed if there is at least one active element } }); |
This works because 0 evaluates false, so the expression only evaluates true if there is at least one element in the jQuery object. You can also use size() to do the same thing.
#4 – Access iFrame Elements
Iframes aren’t the best solution to most problems, but when you do need to use one it’s very handy to know how to access the elements inside it with Javascript. jQuery’s contents() method makes this a breeze, enabling us to load the iframe’s DOM in one line like this:
1 2 3 4 5 6 7 | $(function(){ var iFrameDOM = $("iframe#someID").contents(); //Now you can use <strong>find()</strong> to access any element in the iframe: iFrameDOM.find(".message").slideUp(); //Slides up all elements classed 'message' in the iframe }); |
#5 – Equal Height Columns
This was one of CSS Newbie’s most popular posts of 2009, and it is a good, solid trick to have in your toolbox. The function works by accepting a group of columns, measuring each one to see which is largest, and then resizing them all to match the biggest one. Here’s the code (slighly modified):
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ jQuery.fn.equalHeight = function () { var tallest = 0; this.each(function() { tallest = ($(this).height() > tallest)? $(this).height() : tallest; }); return this.height(tallest); } //Now you can call equalHeight $(".content-column").equalHeight(); }); |
An interesting and similar concept is the awesome jQuery masonry plugin, if you’re interested in checking it out.
#6 – Find a Selected Phrase and Manipulate It
Whether you’re looking to perform find and replace, highlight search terms, or something else, jQuery again makes it easy with html():
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ //First define your search string, replacement and context: var phrase = "your search string"; var replacement = "new string"; var context = $(body); // context.html( context.html().replace('/'+phrase+'/gi', replacement); ); }); |
#7 – Hack Your Titles to Prevent Widows
Nobody likes to see widows – but thankfully with some jQuery and a little help from we can stop that from happening:
1 2 3 4 5 6 7 8 | $(function(){ //Loop through each title $("h3").each(function(){ var content = $(this).text().split(" "); var widow = "&nbsp;"+content.pop(); $(this).html(content.join(" ")+widow); }); }); |
This technique was suggested in a comment by Bill Brown on Css-Tricks.
#8 – Add Pseudo-Selector Support in IE
Whether or not to support IE (especially 6) is a hotly debated issue, but if you are of the “let’s-make-the-best-of-this” camp, it’s nice to know that you can add pseudo-selector support with jQuery. And we aren’t just limited to :hover, although that’s the most common:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(function(){ <strong>//ADD HOVER SUPPORT:</strong> function hoverOn(){ var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name $(this).addClass(currentClass + '-hover'); } function hoverOff(){ var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name $(this).removeClass(currentClass + '-hover'); } $(".nav-item").hover(hoverOn,hoverOff); <strong>//ADD FIRST-CHILD SUPPORT:</strong> jQuery.fn.firstChild = function(){ return this.each(function(){ var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name $(this).children(":first").addClass(currentClass + '-first-child'); }); } $(".searchform").firstChild(); }); |
The great thing about setting it up that way firstChild(), hoverOn() and hoverOff() are very reusable. Now, in the CSS we can simply add the ‘nav-item-hover’ or ‘searchform-first-child’ classes as additional selectors:
1 2 3 4 5 6 7 8 | .nav-item:hover, <strong>.nav-item-hover</strong>{ background:#FFFFFF; border: solid 3px #888; } .searchform:first-child, <strong>.searchform-first-child</strong>{ background:#FFFFFF; border: solid 3px #888; } |
It’s not pretty, but it is valid and it works. I’ve got to say, though, that I sure am looking forward to the day we won’t have to bother with this stuff!
#9 – Manage Search Box Values
A popular effect is to fill a site’s search box with a value (like ‘search…’) and then use jQuery to clear the default value when the field receives focus, reverting if the field is empty when blurred. That is easily accomplished with a couple lines of jQuery:
1 2 3 4 5 6 7 8 9 | $(function(){ //set default value: $("#searchbox") .val('search?'); .focus(function(){this.val('')}) .blur(function(){ (this.val() === '')? this.val('search?') : null; }); }); |
#10 – Create a Disappearing ‘Back-to-Top’ Link
The disappearing back-to-top link was inspired by Brian Cray. All you have to do is add a back-to-top link at the bottom of your content like normal, and then jQuery performs the magic:
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 | $(function(){ /* set variables locally for increased performance */ var scroll_timer, displayed = false, $message = $('#message a'), $window = $(window), top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { // use a timer for performance if($window.scrollTop() <= top) // hide if at the top of the page { displayed = false; $message.fadeOut(500); } else if(displayed == false) // show if scrolling down { displayed = true; $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); } }, 100); }); }); |
Brian also added some nice-looking CSS, which you could add as a css file or define in an object literal and apply it using jQuery.css(). Feel free to go check out his in-depth explanation if you want to learn more.
#11 – Easily Respond to Event Data
One of my favorite things about jQuery is its convenient remapping of event data, virtually eliminating cross-browser inconsitencies and making events much easier to respond to. jQuery passes an event parameter into all bound/triggered functions, which is commonly called e:
1 2 3 4 5 6 7 8 9 10 11 12 | $(function() { //We can get X/Y coordinates on click events: $("a").click(function(<em>e</em>){ var clickX = e.pageX; var clickY = e.pageX; }); //Or detect which key was pressed: $("window").keypress(function(<em>e</em>){ var keyPressed = e.which; }); }); |
You can check out the jQuery docs on this one to see all the possibilites, or view this keycode reference if you’d like to look up a certain key’s character code.
#12 – Encode HTML Entities
The first place I saw this mentioned was over at Debuggable, and I have to say they really came up with something good here. The idea is to produce a jQuery result similar to PHP’s htmlentities(). Check this out:
1 2 3 4 5 6 7 8 9 | $(function(){ var text = $("#someElement").text(); var text2 = "Some <code> & such to encode"; //you can define a string or get the text of an element or field var html = $(text).html(); var html2 = $(text2).html(); //Done - html and html2 now hold the encoded values! }); |
#13 – Friendly Text Resizing
Originally mentioned at ShopDev, this is an excellent way to include some user-centricity in your code (allowing them to control the font-size):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function(){ // Reset Font Size var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase Font Size $(".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 Font Size $(".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; }); }); |
As I said, this is nice trick to know and adds some of that dynamic friendliness that people enjoy so much.
#14 – Open External Links in a New Window
This external links hack has been mentioned before at Cats Who Code, and although imperfect it’s a good way to open external links in new windows without causing validation errors in XHTML 1.0 Strict.
1 2 3 4 5 | $(function(){ $('a[rel$='external']').click(function(){ this.target = "_blank"; }); }); |
This works by grabbing all links with an external rel and adding a blank target. Same result, it’s just not hardcoded into the site.
#15 – Gracefully Degrading AJAX Navigation
AJAX navigation is great – but not for users and bots who can’t use it. The good news is, it’s possible to offer direct links to your content while still presenting AJAX functionality (to users who have that capability) by catching links before they go anywhere, returning false on them and loading the AJAX content instead. It could look like this:
1 2 3 4 5 6 | $(function(){ $("a").bind("click",function(){ //Put your AJAX request code here return false; }); }); |
Of course, this is very basic, but it’s an essential facet to any AJAX navigation. You can also check out SpeckyBoy’s post on Easy-to-Use Free Ajax Navigation Solutions.
#16 – Create an Array of GET variables
Although this is not specifically a jQuery trick, it’s useful enough to be included here. Using GET variables in Javascript code doesn’t happen everyday, but when it does you’ll want to know a quick and efficient way to read them. All we have to do is get document.location.search and do some parsing on it:
1 2 3 4 5 6 7 8 9 10 | var searchArray = document.location.search.substring(1).split("&"); //Take off the '?' and split into separate queries //Now we'll loop through searchArray and create an associative array (object literal) called GET var GET = []; for (searchTerm in searchArray){ searchTerm.split("="); //Divide the searchTerm into property and value GET[searchTerm[0]] = searchTerm[1]; //Add property and value to the GET array } |
#17 – Partial Page Refresh Using load()
This excellent technique found at the Mediasoft Blog is way cool and very handy for creating a regularly updating dashboard/widget/etc. It works by using jQuery.load() to perform a AJAX request:
1 2 3 4 5 | $(document).ready(function() { setInterval(function() { $("#content").load(location.href+" #content>*",""); }, 5000); }); |
Voila! It works – no iframes, meta refreshes or other such nonsense.
#18 – Skin with jQuery UI
If you’re going to write any jQuery plugins (I hope you have already!), you should know that a great way to add flexibility and elegance is to incorporate jQueryUI theming classes into any widgets/visible elements your plugin produces. The great thing about doing this is that it cuts or eliminates the css you have to provide with the plugin, and it adds a lot of customizability, too (which is one of the key factors in a successful plugin).
And the actual implementation is as simple as learning how the classes work and attaching them to plugin elements. I can see this would be especially great with plugins like form beautifiers and photo sliders, making it easy to keep a consistent look throughout a website or app. You can check out the Theming Reference here.
#19 – Include Other Scripts
Stylesheet switchers are nothing new, but adding other scripts with jQuery is something that is often overlooked. The advantage is twofold:
- It makes it easy to have lazy script loading.
- It also allows us to add scripts at runtime, which could be useful in a whole host of situations.
It’s as easy as using append() to add a new script to the head of the document:
1 2 3 4 5 6 7 8 | $(function(){ $("head").append("<script type='text/javascript' src='somescript.js'></script>"); //Or, loading only when the slow stuff is ready: $("img,form").load(function(){ $("head").append("<script type='text/javascript' src='somescript.js'></script>"); }); }); |
#20 – Use Body Classes for Easy Styling
Do you want to save on code and keep your styling in the css file where it should be? Body classes (another great ideas suggested by Karl Swedberg) allow you to do that. In short, you can use jQuery to add a ‘JS’ class to the body element, which will enable you to set styles in your css that will only be applied if Javascript is enabled. For example:
1 2 3 | $(document).ready(function() { $("body").addClass("JS"); }); |
For Javascript users the body now has a JS class, so in our CSS we can add styles like this:
ul.navigation{ display:block; } .JS ul.navigation{ display:none; }
This gives us a great way to change styles based on whether or not Javascript is supported/enabled, and we can still keep the styling in the CSS file. Another interesting related use of this technique is to add browser classes to the body, enabling easy browser-specific styling. You can read more about that here.
#21 – Optimize Your Performance
Experienced coders don’t make clients wait – they write code that runs fast! There are several ways you can make your code run faster like:
- Reference id’s rather than classes (id selection is native and therefore quicker)
- Use for instead of each()
- Limit DOM manipulation by adding elements in one big chunk rather than one at a time
- Take advantage of event delegation
- Link to Google’s jQuery copy rather than hosting your own – it’s faster and always up to date
Basically, it all boils down to not making jQuery do any more work than it has to (and using native abilites whenever possible). Giulio Bai wrote an excellent post on jQuery perfomance, if you’d like to dig in deeper.
#22 – Adapt Your Scripts to Work Cross-Browser – The Right Way
Thankfully, jQuery’s cross-browser compatibility really cuts down the need for browser hacks. Sometimes, though, it is good to be able to get information about the client, and we can do that cleanly and unobtrusively with jQuery.support:
1 2 3 4 5 | //Does this client follow the W3C box model? var boxModel = $.support.boxModel; //Does this client support 'opacity'? var opacity = $.support.opacity; |
It’s definitely better practice to use feature-detection rather than browser sniffing, and this is a very efficient way to do it. Read more about jQuery.support’s properties here.
#23 – Configure jQuery to be Compatible with Other Libraries
We all find ourselves in situations where multiple libraries are needed, and because jQuery isn’t the only library that uses the $ alias, compatiblity issues sometimes pop up. Thankfully, this is easy to fix using jQuery’s noConflict(). You can even define a custom alias to replace the $:
1 2 3 4 | var $j = jQuery.noConflict(); //Now you can use '$j' just like '$' $j("div").hide(); |
An alternate technique is to wrap jQuery calls in an anonymous function and pass jQuery in as a parameter. Then you can use whatever alias you want, including the ‘$’. This is especially useful for plugin authoring:
1 2 3 4 5 | (function($){ $(document).ready(function(){ //You can use normal jQuery syntax here }); })(jQuery); |
#24 – Efficiently Store Element-Specific Information with data()
data() is probably one of the lesser used jQuery methods, although it certainly shouldn’t be. It allows us to attach/retrieve as much data as we want to DOM elements without misusing attributes, and is especially useful for more complex scripts. For example, Stefan Petre’s Colorpicker plugin uses data a lot because it’s tracking lots of fields and colors, converting rgb to hex, etc. Here’s are some examples of how data() works:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function() { //Set status to 'unsaved' $("button:first").data("status", "unsaved"); //Retrieve status var buttonStatus = $("button:first").data("status"); //Change status, this time defining an object literal $("button:first").data("status", {saved : true, index : 1}); //Retrieve status of index property var buttonStatusIndex = $("button:first").data("status").index; //Remove status data $("button:first").removeData("status"); }); |
I’m sure you can imagine the huge extent of possibilities this presents. Again, it’s worth reading the documentation if you haven’t used data() before.
#25 – Extend/Modify Existing jQuery Functions
Nobody says you can’t use the existing jQuery platform as a springboard for new ideas – and many have done just that using extend(), another wonderful jQuery method. The popular Easing plugin, for example, adds some animation variety by extending the easing object, an already existing object that is passed to animate() and others:
1 2 3 4 5 6 7 8 9 10 11 12 13 | jQuery.extend({ easing: { easein: function(x, t, b, c, d) { return c*(t/=d)*t + b; // in }, easeinout: function(x, t, b, c, d) { if (t < d/2) return 2*c*t*t/(d*d) + b; var ts = t - d/2; return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b; }, easeout: function(x, t, b, c, d) { return -c*t*t/(d*d) + 2*c*t/d + b; }... |
By extending and improving jQuery’s default functionality, you can open up a whole new world of cool possibilities.
#26 – Reverse Engineer before() and after()
I always appreciated how jQuery provided append()/prepend() and appendTo()/prependTo(), enabling us to easily perform an append in either direction. I’ve wished, though, that a similar ability was provided with before() and after(). To change that, we can easily add two functions called putBefore() and putAfter() that will fulfill that purpose. Here’s how:
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ jQuery.fn.putBefore = function(dest){ return this.each(function(){ $(dest).before($(this)); }); } jQuery.fn.putAfter = function(dest){ return this.each(function(){ $(dest).after($(this)); }); } }); |
#27 – Add an isChildOf() Test
I’m sure we all have found ourselves in this situation – needing to know if an element is a descendant of another element. The good news is, with one line of code we can extend jQuery to allow this:
1 2 3 4 5 6 7 8 | $(function(){ jQuery.fn.isChildOf = function(b){return (this.parents(b).length > 0);}; //Now we can evaluate like this: if ( $("li").isChildOf("ul") ){ //Obviously, the li is a child of the ul so this code is executed } }); |
Thanks to Dan Switzer II for this contribution!
#28 – Add Custom Selectors
This is another one that has been talked about a lot in the development community, so you may have this already figured out. If not, get ready because this will open some whole new windows for jQuery efficiency. The short story is, jQuery allows us to extend its expression object, which means we can add whatever custom selectors we want. For example, say we wanted to add a selector version of the isChildOf() method we wrote earlier:
1 2 3 4 5 6 7 8 9 10 | $(function(){ jQuery.extend(jQuery.expr[':'], { 'child-of' : function(a,b,c) { return (jQuery(a).parents(c[3]).length > 0); } }); //'child-of' is now a valid selector: $("li:child-of(ul.test)").css("background","#000"); }); |
Debuggable has a great post on this one as well, if you’d like to read more about how the parameters work, etc.
#29 – Smooth Scrolling Without Plugin
Karl Swedberg posted this one a while back on the Learning jQuery site, and it is definitely worth a look. Of course, there are a couple of plugins to accomplish this (and they have more features), but I think the real value in this is the excercise of doing it yourself. Plus, look at how tiny it is:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(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) { $target.ScrollTo(400); return false; } }; }); }); |
#30 – Add Tabs without a Plugin
jQuery tabs are often covered but also often used, and like the scrolling trick above it’s important to know how to do these without a plugin. The first thing to do is write our markup, which should be perfectly presentable in the absence of Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="widget"> <h3>Popular</h3> <ul> <li>Item #1</li> <li>Item #2</li> <li>Item #3</li> </ul> </div> <div class="widget"> <h3>Recent</h3> <ul> <li>Item #1</li> <li>Item #2</li> <li>Item #3</li> </ul> </div> |
With a bit of styling, this would look just fine, so we know our jQuery is going to degrade gracefully. Now we can write the code:
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function() { $("div.widget").hide().filter(":first").before("<ul class='tabs'></ul><div class='tab-content'></div>").add("div.widget").each(function(){ $(this).find("ul").appendTo(".tab-content"); $("ul.tabs").append("<li>" +$(this).find(":header:first").text()+ "</li>"); }); $("ul.tabs li").click(function(){ $(this).addClass("active"); $(".tab-content ul").slideUp().eq($("ul.tabs li").index(this)).slideDown(); }); $("ul.tabs li:first").click(); }); |
Of course, that’s just one way to do it. If you’d like to see some other approaches, see Extra Tuts’ jQuery Tabs Tutorials collection.
Wrapping Up
Thanks for reading, I hope you’ve enjoyed it! In case you’re all fired up on jQuery now, here are some links to more great tips n’ tricks collections:
- 20 Best jQuery Tips and Tricks Collection (a master roundup)
- Improve Your jQuery – 25 Excellent Tips
- 12 Tips to Improve Your jQuery Code
- 8 Awesome jQuery Tips & Tricks
As you can see, there are infinite opportunities for amazing innovation with jQuery. So keep experimenting, keep trying things, keep thinking, “What if?” You could be the next jQuery supergeek!
Enjoy this post? You should follow me on Twitter!
I learned a lot by this post, thank you for publishing this!
I’ve learnt a lot too and have a jQuery tweak to do tomorrow but now it’s only goin to take me 5 minutes :D Thanks for sharing!
Thanks for the links to http://www.geekology.co.za!
I picked up a few new tricks from this post too. :)
Excellent post!! kuddos.
thank you for this… now I know few more tricks and techniques to play with jQuery….
Regards
As a new designer, your website is a good classroom for me .
Though I am not clear about all you said, but I believe after read more article here, all thing is clear soon. Thanks for your efforts .
Hi,
lets just quote the above comment and add a mega thanks from me too at the end.
:)
Thumbs up !!
awesome…
thanks for the tips and trick
Hi,
As usual, brilliant work mate, keep it up. The first of them lot is what turns me on. I like delayed animation effects. Point #15 is truly remarkable according to SEO perspectives.
Great stuff and thx for sharing your jQuery-knowledge to all the readers. I really like #26 & #27.
Awesome. Thanks Nick.
4455
Just brilliant, as usual. Almost every time I visit you I learn new tricks. :)
Cheers!
As web developer can say that not of this tricks I knew. Thanks a lot to you!
really cool tips on jquery thanks for compiling them at one place
I’ve create a lot WP themes and plugins using jQuery
never knew these tips…lol
Surely, this will improve my skill
Mega thanks for sharing ;)
thanks for the tips!
Nice tips buddy, I need learn more about jQuery and this post will help me.
Hi Nick
Can’t say that I will ever understand jQuery but I do appreciate some of the great effects it produces.
I’ve produced a few sites with fade in effects for banner graphics as an alternative to flash and have been very pleased with the results.
Thanks for the reminder of the power of jQuery.
Hi
I liked the delaying animation part very much. You have packed the article with superb stuff. Keep up the good work.
Hi
I liked the delaying animation part very much. You have packed the article with superb stuff. Keep up the good work. I think I am posting the same comment. I got an error message thats why.
Really good post and lots of useful tips that I’m sure I will be able to use. I will definitely bookmark this post for future reference. Thanks for sharing these with us.
hi…. where i should paste these codes??? and what is jQuerry? :|
I have been reading your articles all morning. I have to tell you that I am really enjoying them! Their is a wealth of good information here.
Thanks, everyone – glad to hear you enjoyed the post!
@namila I’m surprised you haven’t heard of jQuery yet, it’s quite the trend these days :) SixRevisions has a great article called Getting Started with jQuery that covers exactly what you asked about. I’d encourage you to check out that article and then give jQuery a try – it really is a lot of fun!
thanks for all the tricks.
Namilia if you don’t know JQuery, (JQuery Novice to Ninja) this book It’s excelent to start.
Wow very nice article, as usual, the same concrete things and very helpful, thanks for sharing this useful article Nick.
hey nick and spedevig .Thank you ;)
Thanks for these helpful tips :)
Thank you man.. Very nice post,, Greatttt.
Hi,
how i wish i found this blog earlier, amazing.
I like the delay animation effects. Effort appreciated, Keep it up Micheal.
:)
Thankyou for these nice jquiery tips. The cross browser code is very useful as encountering errors here can be very time consuming.
Also the delayed animation code proves very useful for slow loading browsers having the animation delayed would be rather helpful here.
Good points….some I didn’t think of
I’m so happy I stumble upon this blog! A lot of helpful info I really needed to know these stuff.
Thank you so much!
You have mentioned some great JQuery tips, will be pretty useful in my upcoming projects. Thanks bro
I love finding these lists of cool jQuery tips/tutorials. There is nothing more fun then adding some bling to your site. Thanks for the tips/tricks…will bookmark!
I am always engaged to search tips and help for my j-query site. your article really help me in this matter. keep it up i will see you soon.
very nice one about photos
Thank you for the tips, I am trying to learn jQuery right now, this will surely help
Thanks for these helpful tips
I love Jquery, thanks for the tips
Very nice tricks. If you put demo for the tricks, it will be more beautiful.
Thanks,brilliant jquery tricks for newby like me.
These facts are amazing .
I was searching before last 5 weaks and ia din’t get the perfect answer.
But after all i found from your site.
thanks for posting such a interesting topic.
This is being super nit-picky, but the implementation for #27 could be much faster. See jQuery contains: http://api.jquery.com/jQuery.contains/
$(function(){
jQuery.fn.isChildOf = function(b){return $.contains(b[0],this[0]);};
});
$.contains basically maps right to sizzle to make the check, which is much faster than using jQuery’s traversal methods and then checking the length.
Other than that, this is a great list!
Uhhh…regarding #26…jQuery has insertBefore and insertAfter methods.
I was going to say the same as AJ. Regarding #26, insertBefore and insertAfter have been in jQuery since 1.0.
This is worth printing off and adding to my jQuery folder, thanks!
So much to read through and use, hopefully wont take me too long to learn it all of the top of my head.. or maybe it will, but at least I’ll have great reference points such as this to keep me going.
The text resizing seems to work really well actually, might be a useful thing to implement into my designs from now on, nothing better than a 100% user friendly website.
Awesome list! I especially like trick #10. That’s a very elegant solutions!
Here’s a one liner equalHeight function for #5.
$.fn.equalHeight=function(){return this.height(Math.max.apply(Math,$(this).map(function(){return $(this).height()}).get()))};
//Uncompressed.
jQuery.fn.equalHeight = function () {
return this.height(
(
Math.max.apply(
Math,
$(this).map(function(){ return $(this).height(); }).get()
)
)
);
};
Here’s a demo.
Here’s another one liner for #2
Demo
Here’s “almost” a one liner for #13, the friendly font resizing.
Demo
Thanks for sharing this. Haven’t tried it out yet, but looks promising!
Cool, this comes in handy for me.
thanks for this nice trick :)
any ideas for jquery slideshow ?
thanks
Here’s trick about fancy fonts. A lot of people want a fancy font, but always comes the trouble if the user has it or can see it. Have no fear, Google is here to help:
http://code.google.com/webfonts
Example:
This is implemented in the head section:
and this in the css:
h1 { font-family: 'Lobster', arial, serif; }
Now you can finally have catchy fonts seen from everyone.
cool, i bookmark this page ready.
good job! we are fans of innovation.
Thanks a lot Nick.
The first of them lot is what turns me on. I like delayed animation effect
Great Lists! Thank you :)
I usually do go through the spam filter, so even the simple fact you have a Gravatar
Number #18 will be really handy moving forward.
based on the photoshop default picker. But you can use it to create color palettes and save them for future use. Also, you can download the palettes that you create as
Wow great post! Something I can move forward with. Love jQuery :-)
Thanks for the post, we use jQuery alot these days while developing a website and its always great to learn a new trick or 2 that can help in the development of a website. Its worth checking out jQuery Tools and UI, they have some nice pre-built solutions for jQuery.
I think the LavaLamp should be included in this post as well. Lava Lamp is a Jquery trick for pros.
Thanks for sharing.
i love jquary, thank you for sharing
thank you for publishing this
Very Nice! THX from Sarajevo!
thanks …it ‘s so cool
Bookmarked and ready for my next jQuery session. Great tips
Special thanks to author. Already bookmarked.
I’m not a big fan of JQuery but I have to admit this post is very useful. Thanks Nick!
Good tips all around, #29 – Smooth Scrolling Without Plugin doesn’t work in Opera correctly or on mobile devices. It’s better through my experiences to use the localScroll plug-in.
in #1 example you have unnecessary em tags
in #8 example in CSS you have unnecessary strong
in #9 example in line 4 you have unnecessary semicolon
in #11 example you have unnecessary em tags lines 3,9
Really interesting script here, thank you ! Jquery is so present on all web site today, and all tips are welcome ;)
Good tips all around, #29 – Smooth Scrolling Without Plugin doesn’t work in Opera correctly or on mobile devices. It’s better through my experiences to use the localScroll plug-in.
Cazare Bucuresti
Thanks for trick for this really powerful javascript library.
I use in all my website, so can be useful for me and my customer ;)
This is one of the best tutorial I have seen on JQuery…it lists down the important points in a concise and clear manner.
Good tips all around, #29 – Smooth Scrolling Without Plugin doesn’t work in Opera correctly or on mobile devices. It’s better through my experiences to use the localScroll plug-in.
Thank you very much. Now I know which framework to study. Your examples have helped me a lot in reaching a decision.
Really great post, It was very useful and informative to myself. I am not big on JQuery but since it is so present on all web site today, and all tips are welcome.
Great tips, I like it.
These are very helpful. It is always good to refresh some of these tools.
nice work here .. very nice codes
Some days ago I was thinking about to learn JQuery but not taken start till. By reading this post, I have finalized my decision.Thanks for writer.
Jquery or Prototype? I have dabbled in Jquery before but not sure which is better to learn long term. Anyone else have any insights into which framework will last?
Jquery or Prototype? I have dabbled in Jquery more than Prototype but not sure which is better to learn long term. Anyone else have any insights into which framework will last?
I think the standard blue text color with or without an underline is the best.
Wow thoroughly enjoyed reading all those 30 tricks I particlularly liked the 6th trick “Find a Selected Phrase and Manipulate It”. It was of great use to me. Superb collection.
thank you … and now I know few more tricks and techniques to play with jQuery….
Jquery or Prototype? I have dabbled in Jquery before but not sure which is better to learn long term. Anyone else have any insights into which framework will last?
Great collection of quick and simple tips! Bookmarked.
These tips are over my understandings. I should probably hire a programmer engineer.
nice plugin of jquery, to good design
I was searching before.brilliant jquery tricks.I am trying to use these tricks right now
thanks for all the tips on jquery and making one list !
Hey I am so happy I found your web site, I really found you by mistake, while I was browsing on Aol for something else, Anyways I am here now and would just like to say many thanks for a fantastic post and a all round interesting blog
I have saved it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the great work.
These are very helpful. It is always good to refresh some of these tools. Thanks
good tips..
I don’t understand about ,JQuery but thanks.Your site has many usefull info.I love to read arround here.Bookmarked
Thx for the great info. And the question, is page refresh using jquery increase the bounce rate???
What a great article… i like it.. really.. thanks
Your site has many usefully information.I love to read your content.
Awsome article and straight to the point. I am not sure if this is actually the best place to ask but do you folks have any ideea where to get some professional writers? Thanks
Really interesting script here, thank you ! Jquery is so present on all web site today, and all tips are welcome ;)
These are very helpful. It is always good to refresh some of these tools. Thanks a lot
jquery, json is very nice and powerfull for php
Well … needed a script like this… will test it soon! Thank you Nick!
Well anycase… can’t open JQuery Video series… someone can?
thanks 4 this page, maybe next time i need it.
All this are wonderful tricks… though i;ve implemented most, i;ll still get my feet wet with the new ones i’ve seen.
Tanks so much, it´s very interesting!
Thx for the great info. And the question, is page refresh using jquery increase the bounce rate???
Some awesome tips here! Using the ‘friendly text resizing’ on my site, thanks for posting it
nice thanks!
Thanks great article!
thanks for the tips here. its a grear learning curve for me.
You will find surely lots of information like this to take into account. That is a great point to mention. We provide ideas above since general inspiration however obviously you can find inquiries such as the 1 an individual mention exactly where the most crucial thing are going to be working in honest great faith. My partner and i add?capital t know in the event that finest practices have got emerged close to such things as which, yet Read that your work will be obviously identified as a reasonable online game.
Hey There. Today using live messenger. This is a perfectly created article. I’ll be sure to save it as well as go back to read more of the beneficial details. Just post. I will definitely return
Its not an addons or Plugins, it is just a tutorial from which you can block ads on any sites.
I am stunned at the products I overlooked prior to I read this submit.
very nice post and really useful info
thanks
very great post! thank’s
wonderful post! amazing! your post is great!
I did not know that I can access elements in iframe. Is this supported in all browsers?
#9 is an HTML5 feature called ‘placeholder’. Most browsers (FF3.7+, Chrome/Safari 4.0+) supports it natively. Unsurprisingly, IE doesn’t.
Heya! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no back up. Do you have any solutions to prevent hackers?
thank you for your great article and blog it makes my day http://tinyurl.com/7g396u5
very nice desigh make a jquery….
I was here for smooth scrolling and i got more than what i was actually looking for. well done!
Fantastic article with some really fantastic methods for optimizing your JQuery code. I especially like the Equal Height Columns example you have provide.
Yeah Nick, you have shared nice tips for jQuery. By using jQuery, you can create a good web design and also you can give the strong validations by using the jQuery in various forms of the website.
Yes, great article. I also found quite a few hacks going on in a few resent months and security is at most crucial.
bit over my head but shows me to be a good SEO you need to learn this stuff thanks