Improve your jQuery - 25 excellent tips

1. Load the framework from Google Code





Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it'll load very quickly from Google's CDN and most importantly it'll already be cached if the user has visited a site which delivers it from Google Code.



This makes a lot of sense. How many sites out there are serving up identical copies of jQuery that aren't getting cached? It's easy to do too...



view plaincopy to clipboardprint?











Or, you can just include a direct reference like this...



view plaincopy to clipboardprint?









Full instructions here





2. Use a cheat sheet





Not just a jQuery tip, there are some great cheat sheets out there for most languages. It's handy having every function on a printable A4 sheet for reference and luckily these guys have produced a couple of nice ones..



http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

http://colorcharge.com/jquery/





3. Combine all your scripts and minify them





OK, a general JavaScript tip here. But any big project that uses lots of jQuery probably uses lots of plugins (this site uses easing, localScroll, lightbox and preload) so it's usually applicable.



Browsers can't load scripts concurrently (well, most can't, yet), which means that if you've got several scripts downloading one at a time then you're really slowing down the loading of your page. So, assuming the scrips are being loaded on every page then you should consider combining them into one long script before deploying.



Some of the plugins will already be minified, but you should consider packing your scripts and any that aren't already. It only takes a few seconds. I'm personally a fan of Packer by Dean Edwards





4. Use Firebug's excellent console logging facilities





If you haven't already installed Firebug then you really should. Aside from many other useful features such as allowing you to inspect http traffic and find problems with your CSS it has excellent logging commands that allow you to easily debug your scripts.



Here's a full explanation of all of it's features



My favourite features are "console.info", which you can use to just dump messages and variables to the screen without having to use alert boxes and "console.time" which allows you to easily set up a timer to wrap a bunch of code and see how long it takes. They're all really easy to use too...



view plaincopy to clipboardprint?



console.time('create list');



for (i = 0; i < 1000; i++) { var myList = $('.myList'); myList.append('This is list item ' + i); } console.timeEnd('create list'); In this instance I've deliberately written some very inefficient code! In the next few tips I'll show you how we can use the timer to show some improvements which can be made. 5. Keep selection operations to a minimum by caching jQuery selectors are awesome. They make selecting any element on the page incredibly simple, but internally they have to do a fair amount of work and if you go mad with them you might find things starting to get pretty slow. If you're selecting the same element time and time again (in a loop for example) then you can just select it once and keep it in memory while you manipulate it to your heart's content. Take the following example where we add items to an unordered list using a loop. view plaincopy to clipboardprint? for (i = 0; i < 1000; i++) { var myList = $('.myList'); myList.append('This is list item ' + i); } That takes 1066 milliseconds on my PC in Firefox 3 (imagine how long it would IE6!), which is pretty slow in JavaScript terms. Now take a look at the following code where we use the selector just once. view plaincopy to clipboardprint? var myList = $('.myList'); for (i = 0; i < 1000; i++) { myList.append('This is list item ' + i); } That only takes 224 milliseconds, more than 4x faster, just by moving one line of code. 6. Keep DOM manipulation to a minimum We can make the code from the previous tip even faster by cutting down on the number of times we insert into the DOM. DOM insertion operations like .append() .prepend() .after() and .wrap() are relatively costly and performing lots of them can really slow things down. All we need to do is use string concatenation to build the list and then use a single function to add them to your unordered list like .html() is much quicker. Take the following example... view plaincopy to clipboardprint? var myList = $('#myList'); for (i=0; i<1000; i++){ myList.append('This is list item ' + i); } On my PC that takes 216 milliseconds , just over a 1/5th of a second, but if we build the list items as a string first and use the HTML method to do the insert, like this.... view plaincopy to clipboardprint? var myList = $('.myList'); var myListItems = ''; for (i = 0; i < 1000; i++) { myListItems += '

This is list item ' + i + '

';

}



myList.html(myListItems);





That takes 185 milliseconds, not much quicker but that's another 31 milliseconds off the time.







7. Wrap everything in a single element when doing any kind of DOM insertion





OK, don't ask me why this one works (I'm sure a more experienced coder will explain).



In our last example we inserted 1000 list items into an unordered list using the .html() method. If we had have wrapped them in the UL tag before doing the insert and inserted the completed UL into another tag (a DIV) then we're effectively only inserting 1 tag, not 1000, which seems to be much quicker. Like this...



view plaincopy to clipboardprint?



var myList = $('.myList');

var myListItems = '

';



for (i = 0; i < 1000; i++) { myListItems += '
• This is list item ' + i + '
';

}



myListItems += '

';

myList.html(myListItems);





The time is now only 19 milliseconds, a massive improvement, 50x faster than our first example.







8. Use IDs instead of classes wherever possible





jQuery makes selecting DOM elements using classes as easy as selecting elements by ID used to be, so it's tempting to use classes much more liberally than before. It's still much better to select by ID though because jQuery uses the browser's native method (getElementByID) to do this and doesn't have to do any of it's own DOM traversal, which is much faster. How much faster? Let's find out.



I'll use the previous example and adapt it so each LI we create has a unique class added to it. Then I'll loop through and select each one once.



view plaincopy to clipboardprint?



// Create our list

var myList = $('.myList');

var myListItems = '

';



for (i = 0; i < 1000; i++) { myListItems += '
• This is a list item
';

}



myListItems += '

';

myList.html(myListItems);



// Select each item once

for (i = 0; i < 1000; i++) { var selectedItem = $('.listItem' + i); } Just as I thought my browser had hung, it finished, in 5066 milliseconds (over 5 seconds). So i modified the code to give each item an ID instead of a class and then selected them using the ID. view plaincopy to clipboardprint? // Create our list var myList = $('.myList'); var myListItems = '

';



for (i = 0; i < 1000; i++) { myListItems += '
• This is a list item
';

}



myListItems += '

';

myList.html(myListItems);



// Select each item once

for (i = 0; i < 1000; i++) { var selectedItem = $('#listItem' + i); } This time it only took 61 milliseconds. Nearly 100x faster. 9. Give your selectors a context By default, when you use a selector such as $('.myDiv') the whole of the DOM will be traversed, which depending on the page could be expensive. The jQuery function takes a second parameter when performing a selection. jQuery( expression, context ) By providing a context to the selector, you give it an element to start searching within so that it doesn't have to traverse the whole of the DOM. To demonstrate this, let's take the first block of code from the tip above. It creates an unordered list with 1000 items, each with an individual class. It then loops through and selects each item once. You'll remember that when selecting by class it took just over 5 seconds to select all 1000 of them using this selector. view plaincopy to clipboardprint? var selectedItem = $('#listItem' + i); I then added a context so that it was only running the selector inside the unordered list, like this... view plaincopy to clipboardprint? var selectedItem = $('#listItem' + i, $('.myList')); It still took 3818 milliseconds because it's still horribly inefficient, but that's more than a 25% speed increase by making a small modification to a selector. 10. Use chaining properly One of the coolest things about jQuery is it's ability to chain method calls together. So, for example, if you want to switch the class on an element. view plaincopy to clipboardprint? $('myDiv').removeClass('off').addClass('on'); If you're anything like me then you probably learned that in your first 5 minutes of reading about jQuery but it goes further than that. Firstly, it still works across line breaks (because jQuery = JavaScript), which means you can write neat code like this... view plaincopy to clipboardprint? $('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('This cell is now red');





Making a habit of using chaining automatically helps you to cut down on your selector use too.



But it goes further than that. Let's say that you want to perform several functions on an element but one of the first functions changes the element in some way, like this...



view plaincopy to clipboardprint?



$('#myTable').find('.firstColumn').css('background','red');





We've selected a table, drilled down to find cells with a class of "firstColumn" and coloured them in red.



Let's say we now want to colour all the cells with a class of "lastColumn" blue. Because we've used the find() funciton we've filtered out all the cells that don't have a class of "firstColumn" so we need to use the selector again to get the table element and we can't continue chaining, right? Luckily jQuery has an end() function which actually reverts back to the previous unaltered selection so you can carry on chaining, like this...



view plaincopy to clipboardprint?



$('#myTable')

.find('.firstColumn')

.css('background','red')

.end()

.find('.lastColumn')

.css('background','blue');





It's also easier than you might think to write your own jQuery function which can chain. All you have to do is write a function which modifies an element and returns it.



view plaincopy to clipboardprint?



$.fn.makeRed = function() {

return $(this).css('background', 'red');

}



$('#myTable').find('.firstColumn').makeRed().append('hello');





How easy was that?







11. Learn to use animate properly





When I first started using jQuery I loved the fact that it was easy to use the pre-defined animations like slideDown() and fadeIn() to get some really cool effects incredibly easy. It's easy to take things further though because jQuery's animate() method is very easy to use and very powerful. In fact, is you look at the jQuery source code you'll see that internally those methods are just shortcuts which use the animate() function.



view plaincopy to clipboardprint?



slideDown: function(speed,callback){

return this.animate({height: "show"}, speed, callback);

},



fadeIn: function(speed, callback){

return this.animate({opacity: "show"}, speed, callback);

}





The animate() method simply takes any CSS style and smoothly transitions it from one value to another. So, you can change the width, height, opacity, background-color, top, left, margin, color, font-size, anything you want.



This is how easy it is to animate all your menu items grow to 100 pixels high when you roll over them.



view plaincopy to clipboardprint?



$('#myList li').mouseover(function() {

$(this).animate({"height": 100}, "slow");

});





Unlike other jQuery functions, animations are automatically queued, so if you want to run a second animation once the first is finished then just call the animate method twice, no callback necessary.



view plaincopy to clipboardprint?



$('#myBox').mouseover(function() {

$(this).animate({ "width": 200 }, "slow");

$(this).animate({"height": 200}, "slow");

});





If you want the animations to happen concurrently then just put both styles in the params object of a single call, like this...



view plaincopy to clipboardprint?



$('#myBox').mouseover(function() {

$(this).animate({ "width": 200, "height": 200 }, "slow");

});





You can animate any property that's numeric. You can also download plugins to help you animate properties that aren't, like colors and background colors





12. Learn about event delegation





jQuery makes it easier than ever to attach events to elements in the DOM unobtrusively, which is great, but adding too many events is inefficient. Event delegation allows you to add less events to achieve the same result in many situations. The best way to illustrate this is with an example...



view plaincopy to clipboardprint?



$('#myTable TD').click(function(){

$(this).css('background', 'red');

});





A simple function which turns cells in a table red when you click on them. Let's say that you've got a grid with 10 columns and 50 rows though, that's 500 events bound. Wouldn't it be neater if we could just attach a single event to the table and when the table is clicked have the event handler work out which cell was clicked before turning it red?



Well that's exactly what event delegation is and it's easy to implement...



view plaincopy to clipboardprint?



$('#myTable').click(function(e) {

var clicked = $(e.target);

clicked.css('background', 'red');

});





'e' contains information about the event, including the target element that actually received the click. All we have to do is inspect it to see which cell was actually clicked. Much neater.



Event delegation has another benefit. Normally, When you bind a handler to a collection of elements it gets attached to those elements and those elements only. If you add new elements to the DOM which would have been matched by the selector then they don't have the event handler bound to them (are you following me?) then nothing will happen.



When using event delegation you can add as many matching elements to the DOM as you like after the event is bound and they work too.







13. Use classes to store state





This is the most basic way of storing information about a block of html. jQuery is great at manipulating elements based upon their classes, so if you need to store information about the state of an element then why not add an extra class to store it?



Here's an example. We want to create an expanding menu. When you click the button we want the panel to slideDown() if it's currently closed, or slideUp() if it's currently open. We'll start with the HTML



view plaincopy to clipboardprint?

click me

• Menu item 1



• Menu item 2



• Menu item 3

Very simple! We've just added an extra class to the wrapper div which serves no other purpose other than to tell us the state of the item. So all we need is a click event handler which performs slideUp() or slideDown() on the corresponding panel when the button is clicked.



view plaincopy to clipboardprint?



$('.button').click(function() {



var menuItem = $(this).parent();

var panel = menuItem.find('.panel');



if (menuItem.hasClass("expanded")) {

menuItem.removeClass('expanded').addClass('collapsed');

panel.slideUp();

}

else if (menuItem.hasClass("collapsed")) {

menuItem.removeClass('collapsed').addClass('expanded');

panel.slideDown();

}

});





That's a very simple example, but you can add extra classes for storing all sorts of information about an element or HTML fragment.



However, in all but simple cases it's probably better to use the next tip.







14. Even better, use jQuery's internal data() method to store state





It's not very well documented for some reason but jQuery has an internal data() method which can be used to store information in key/value pairs against any DOM element. Storing a piece of data is as simple as this...



view plaincopy to clipboardprint?



$('#myDiv').data('currentState', 'off');





We can amend the example from the previous tip. We'll use the same HTML (with the "expanded" class removed) and use the data() function instead.



view plaincopy to clipboardprint?



$('.button').click(function() {



var menuItem = $(this).parent();

var panel = menuItem.find('.panel');



if (menuItem.data('collapsed')) {

menuItem.data('collapsed', false);

panel.slideDown();

}

else {

menuItem.data('collapsed', true);

panel.slideUp();

}

});





I'm sure you'll agree this is much neater. For more information about data() and removeData(), see this page...



jQuery internals





15. Write your own selectors





jQuery has loads of built-in selectors for selecting elements by ID, class, tag, attribute and many more. But what do you do when you need to select elements based upon something else and jQuery doesn't have a selector?



Well, one answer would be to add classes to the elements from the start and use those to select them, but it turns out that it's not hard to extend jQuery to add new selectors.



The best way to demonstrate is with an example.



view plaincopy to clipboardprint?



$.extend($.expr[':'], {

over100pixels: function(a) {

return $(a).height() > 100;

}

});



$('.box:over100pixels').click(function() {

alert('The element you clicked is over 100 pixels high');

});





The first block of code creates a custom selector which finds any element that is more than 100 pixels tall. The second block just uses it to add a click handler to all those elements.



I won't go into any more detail here but you can imagine how powerful this is and if you search google for "custom jquery selector" you'll find loads of great examples.







16. Streamline your HTML and modify it once the page has loaded





The title might not make a lot of sense but this tip can potentially neaten up your code, reduce the weight and download time of your page and help your SEO. Take the following HTML for example...



view plaincopy to clipboardprint?

This is field number 1

This is an error message

This is field number 2

This is an error message

That's an example of how a form might be marked up, modified slightly for illustrative purposes. I'm sure you'll agree it's pretty ugly and if you had a long form you'd end up with a fairly long ugly page. It's be nicer if you could just put this in your HTML.



view plaincopy to clipboardprint?

This is field 1

This is field 2

This is field 3

This is field 4

This is field 5

All you have to do is a bit of jQuery manipulation to add all the ugly HTML back in. Like this...



view plaincopy to clipboardprint?



$(document).ready(function() {

$('.field').before('

');

$('.field').after('

This is an error message

');

});





It's not always advisable to do this, you'll get a bit of a flash as the page loads, but in certain situations where you've got a lot of repeated HTML it can really reduce your page weight and the SEO benefits of reducing all your repeated extraneous markup should be obvious.







17. Lazy load content for speed and SEO benefits





Another way to speed up your page loads and neaten up the HTML that search spiders see is to lazy load whole chunks of it using an AJAX request after the rest of the page has loaded. The user can get browsing right away and spiders only see the content you want them to index.



We've used this technique on our own site. Those purple buttons at the top of the page drop down 3 forms, directions and a google map, which was doubling the size of our pages. So, we just put all that HTML in a static page and use the load() function to load it in once the DOM was ready. Like this...



view plaincopy to clipboardprint?



$('#forms').load('content/headerForms.html', function() {

// Code here runs once the content has loaded

// Put all your event handlers etc. here.

});





I wouldn't use this everywhere. You have to consider the trade offs here. You're making extra requests to the server and portions of your page might not be available to the user right away, but used correctly it can be a great optimization technique.







18. Use jQuery's utility functions





jQuery isn't just about flash effects. The creator has exposed some really useful methods which fill a few gaps in JavaScript's repertoire.



http://docs.jquery.com/Utilities



In particular, browser support for certain common array functions is patchy (IE7 doesn't even have an indexOf() method!). Jquery has methods for iterating, filtering, cloning, merging and removing duplicates from Arrays.



Other common functions that are difficult in Javascript include getting the selected item in a drop down list. In plain old JavaScript you'd have to get the element using getElementByID, get the child elements as an array and iterate through them checking whether each one was selected or not. jQuery makes it easy...view plaincopy to clipboardprint? $('#selectList').val(); It's worth spending some time looking through the jQuery documentation on the main site and having a nose around some of the lesser known functions.19. Use noconflict to rename the jquery object when using other frameworksMost javascript frameworks make use of the $ symbol as a shorthand and this can cause clashes when trying to use more than one framework on the same page. Luckily there's a simple solution. The .noconflict() function gives control of the $ back and allows you to set your own variable name, like this...view plaincopy to clipboardprint? var $j = jQuery.noConflict(); $j('#myDiv').hide(); 20. How to tell when images have loadedThis is another one of those problems that doesn't seem to be as well documented as it should be (not when I went looking anyway) and it's a fairly common requirement when building photo galleries, carousels etc, but it's fairly easy.All you have to do is use the .load() method on an IMG element and put a callback function in it. The following example changes the "src" attribute of an image tag to load a new image and attaches a simple load function.view plaincopy to clipboardprint? $('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); }); You should find that the alert is called as soon as the image is loaded.21. Always use the latest versionjQuery is constantly improving and John Resig, it's creator, always seems to be in search of ways to improve performance.jQuery is currently on version 1.2.6 but John has already revealed that he's working on a new selector engine called Sizzle, which may apparently improve selector speeds in Firefox by up to 4x. So, it pays to keep up to date.22. How to check if an element existsYou don't need to check if an element exists on the page before you manipulate it because jQuery will will simply do nothing if you try to select something and it isn't in the DOM. But when you do need to check if anything has been selected, or how many items have been selected you can use the length property.view plaincopy to clipboardprint? if ($('#myDiv).length) { // your code } Simple, but not obvious.23. Add a JS class to your HTML attributeI learned this tip from Karl Swedberg whose excellent books I used to learn jQuery.He recently left a comment on one of my previous articles about this technique and the basics are as follows...Firstly, as soon as jQuery has loaded you use it to add a "JS" class to your HTML tag.view plaincopy to clipboardprint? $('HTML').addClass('JS'); Because that only happens when javascript is enabled you can use it to add CSS styles which only work if the user has JavaScript switched on, like this...view plaincopy to clipboardprint? .JS #myDiv{display:none;} So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content as it's not hidden. I'll be using this one a lot in the future.To read his full article click here.24. Return 'false' to prevent default behaviourThis should be an obvious one but maybe not. if you have a habit of doing this...view plaincopy to clipboardprint? Click me! ... and then attaching an event handler like this...view plaincopy to clipboardprint? $('popup').click(function(){ // Launch popup code }); ... it'll probably work fine until you use it on a long page, at which point you'll notice that the # is causing it to jump to the top of the page when your click event is triggered.All you have to do to prevent this default behaviour, or indeed any default behaviour on any event handler is to add "return false;" to your handler, like this...view plaincopy to clipboardprint? $('popup').click(function(){ // Launch popup code return false; }); 25. Shorthand for the ready eventA small tip this one but you can save a few characters by using shorthand for the $(document).ready function.Instead of this...view plaincopy to clipboardprint? $(document).ready(function (){ // your code }); You can do this...view plaincopy to clipboardprint? $(function (){ // your code });

Improve your jQuery - 25 excellent tips

1. Load the framework from Google Code


Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it'll load very quickly from Google's CDN and most importantly it'll already be cached if the user has visited a site which delivers it from Google Code.

This makes a lot of sense. How many sites out there are serving up identical copies of jQuery that aren't getting cached? It's easy to do too...

view plaincopy to clipboardprint?





Or, you can just include a direct reference like this...

view plaincopy to clipboardprint?




Full instructions here


2. Use a cheat sheet


Not just a jQuery tip, there are some great cheat sheets out there for most languages. It's handy having every function on a printable A4 sheet for reference and luckily these guys have produced a couple of nice ones..

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/


3. Combine all your scripts and minify them


OK, a general JavaScript tip here. But any big project that uses lots of jQuery probably uses lots of plugins (this site uses easing, localScroll, lightbox and preload) so it's usually applicable.

Browsers can't load scripts concurrently (well, most can't, yet), which means that if you've got several scripts downloading one at a time then you're really slowing down the loading of your page. So, assuming the scrips are being loaded on every page then you should consider combining them into one long script before deploying.

Some of the plugins will already be minified, but you should consider packing your scripts and any that aren't already. It only takes a few seconds. I'm personally a fan of Packer by Dean Edwards


4. Use Firebug's excellent console logging facilities


If you haven't already installed Firebug then you really should. Aside from many other useful features such as allowing you to inspect http traffic and find problems with your CSS it has excellent logging commands that allow you to easily debug your scripts.

Here's a full explanation of all of it's features

My favourite features are "console.info", which you can use to just dump messages and variables to the screen without having to use alert boxes and "console.time" which allows you to easily set up a timer to wrap a bunch of code and see how long it takes. They're all really easy to use too...

view plaincopy to clipboardprint?

console.time('create list');

for (i = 0; i < 1000; i++) { var myList = $('.myList'); myList.append('This is list item ' + i); } console.timeEnd('create list'); In this instance I've deliberately written some very inefficient code! In the next few tips I'll show you how we can use the timer to show some improvements which can be made. 5. Keep selection operations to a minimum by caching jQuery selectors are awesome. They make selecting any element on the page incredibly simple, but internally they have to do a fair amount of work and if you go mad with them you might find things starting to get pretty slow. If you're selecting the same element time and time again (in a loop for example) then you can just select it once and keep it in memory while you manipulate it to your heart's content. Take the following example where we add items to an unordered list using a loop. view plaincopy to clipboardprint? for (i = 0; i < 1000; i++) { var myList = $('.myList'); myList.append('This is list item ' + i); } That takes 1066 milliseconds on my PC in Firefox 3 (imagine how long it would IE6!), which is pretty slow in JavaScript terms. Now take a look at the following code where we use the selector just once. view plaincopy to clipboardprint? var myList = $('.myList'); for (i = 0; i < 1000; i++) { myList.append('This is list item ' + i); } That only takes 224 milliseconds, more than 4x faster, just by moving one line of code. 6. Keep DOM manipulation to a minimum We can make the code from the previous tip even faster by cutting down on the number of times we insert into the DOM. DOM insertion operations like .append() .prepend() .after() and .wrap() are relatively costly and performing lots of them can really slow things down. All we need to do is use string concatenation to build the list and then use a single function to add them to your unordered list like .html() is much quicker. Take the following example... view plaincopy to clipboardprint? var myList = $('#myList'); for (i=0; i<1000; i++){ myList.append('This is list item ' + i); } On my PC that takes 216 milliseconds , just over a 1/5th of a second, but if we build the list items as a string first and use the HTML method to do the insert, like this.... view plaincopy to clipboardprint? var myList = $('.myList'); var myListItems = ''; for (i = 0; i < 1000; i++) { myListItems += '

This is list item ' + i + '

';
}

myList.html(myListItems);


That takes 185 milliseconds, not much quicker but that's another 31 milliseconds off the time.



7. Wrap everything in a single element when doing any kind of DOM insertion


OK, don't ask me why this one works (I'm sure a more experienced coder will explain).

In our last example we inserted 1000 list items into an unordered list using the .html() method. If we had have wrapped them in the UL tag before doing the insert and inserted the completed UL into another tag (a DIV) then we're effectively only inserting 1 tag, not 1000, which seems to be much quicker. Like this...

view plaincopy to clipboardprint?

var myList = $('.myList');
var myListItems = '

'; for (i = 0; i < 1000; i++) { myListItems += '
• This is list item ' + i + '
'; } myListItems += '

';
myList.html(myListItems);


The time is now only 19 milliseconds, a massive improvement, 50x faster than our first example.



8. Use IDs instead of classes wherever possible


jQuery makes selecting DOM elements using classes as easy as selecting elements by ID used to be, so it's tempting to use classes much more liberally than before. It's still much better to select by ID though because jQuery uses the browser's native method (getElementByID) to do this and doesn't have to do any of it's own DOM traversal, which is much faster. How much faster? Let's find out.

I'll use the previous example and adapt it so each LI we create has a unique class added to it. Then I'll loop through and select each one once.

view plaincopy to clipboardprint?

// Create our list
var myList = $('.myList');
var myListItems = '

'; for (i = 0; i < 1000; i++) { myListItems += '
• This is a list item
'; } myListItems += '

';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) { var selectedItem = $('.listItem' + i); } Just as I thought my browser had hung, it finished, in 5066 milliseconds (over 5 seconds). So i modified the code to give each item an ID instead of a class and then selected them using the ID. view plaincopy to clipboardprint? // Create our list var myList = $('.myList'); var myListItems = '

';

for (i = 0; i < 1000; i++) { myListItems += '
• This is a list item
';
}

myListItems += '

';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) { var selectedItem = $('#listItem' + i); } This time it only took 61 milliseconds. Nearly 100x faster. 9. Give your selectors a context By default, when you use a selector such as $('.myDiv') the whole of the DOM will be traversed, which depending on the page could be expensive. The jQuery function takes a second parameter when performing a selection. jQuery( expression, context ) By providing a context to the selector, you give it an element to start searching within so that it doesn't have to traverse the whole of the DOM. To demonstrate this, let's take the first block of code from the tip above. It creates an unordered list with 1000 items, each with an individual class. It then loops through and selects each item once. You'll remember that when selecting by class it took just over 5 seconds to select all 1000 of them using this selector. view plaincopy to clipboardprint? var selectedItem = $('#listItem' + i); I then added a context so that it was only running the selector inside the unordered list, like this... view plaincopy to clipboardprint? var selectedItem = $('#listItem' + i, $('.myList')); It still took 3818 milliseconds because it's still horribly inefficient, but that's more than a 25% speed increase by making a small modification to a selector. 10. Use chaining properly One of the coolest things about jQuery is it's ability to chain method calls together. So, for example, if you want to switch the class on an element. view plaincopy to clipboardprint? $('myDiv').removeClass('off').addClass('on'); If you're anything like me then you probably learned that in your first 5 minutes of reading about jQuery but it goes further than that. Firstly, it still works across line breaks (because jQuery = JavaScript), which means you can write neat code like this... view plaincopy to clipboardprint? $('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('This cell is now red');


Making a habit of using chaining automatically helps you to cut down on your selector use too.

But it goes further than that. Let's say that you want to perform several functions on an element but one of the first functions changes the element in some way, like this...

view plaincopy to clipboardprint?

$('#myTable').find('.firstColumn').css('background','red');


We've selected a table, drilled down to find cells with a class of "firstColumn" and coloured them in red.

Let's say we now want to colour all the cells with a class of "lastColumn" blue. Because we've used the find() funciton we've filtered out all the cells that don't have a class of "firstColumn" so we need to use the selector again to get the table element and we can't continue chaining, right? Luckily jQuery has an end() function which actually reverts back to the previous unaltered selection so you can carry on chaining, like this...

view plaincopy to clipboardprint?

$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');


It's also easier than you might think to write your own jQuery function which can chain. All you have to do is write a function which modifies an element and returns it.

view plaincopy to clipboardprint?

$.fn.makeRed = function() {
return $(this).css('background', 'red');
}

$('#myTable').find('.firstColumn').makeRed().append('hello');


How easy was that?



11. Learn to use animate properly


When I first started using jQuery I loved the fact that it was easy to use the pre-defined animations like slideDown() and fadeIn() to get some really cool effects incredibly easy. It's easy to take things further though because jQuery's animate() method is very easy to use and very powerful. In fact, is you look at the jQuery source code you'll see that internally those methods are just shortcuts which use the animate() function.

view plaincopy to clipboardprint?

slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},

fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}


The animate() method simply takes any CSS style and smoothly transitions it from one value to another. So, you can change the width, height, opacity, background-color, top, left, margin, color, font-size, anything you want.

This is how easy it is to animate all your menu items grow to 100 pixels high when you roll over them.

view plaincopy to clipboardprint?

$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});


Unlike other jQuery functions, animations are automatically queued, so if you want to run a second animation once the first is finished then just call the animate method twice, no callback necessary.

view plaincopy to clipboardprint?

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});


If you want the animations to happen concurrently then just put both styles in the params object of a single call, like this...

view plaincopy to clipboardprint?

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});


You can animate any property that's numeric. You can also download plugins to help you animate properties that aren't, like colors and background colors


12. Learn about event delegation


jQuery makes it easier than ever to attach events to elements in the DOM unobtrusively, which is great, but adding too many events is inefficient. Event delegation allows you to add less events to achieve the same result in many situations. The best way to illustrate this is with an example...

view plaincopy to clipboardprint?

$('#myTable TD').click(function(){
$(this).css('background', 'red');
});


A simple function which turns cells in a table red when you click on them. Let's say that you've got a grid with 10 columns and 50 rows though, that's 500 events bound. Wouldn't it be neater if we could just attach a single event to the table and when the table is clicked have the event handler work out which cell was clicked before turning it red?

Well that's exactly what event delegation is and it's easy to implement...

view plaincopy to clipboardprint?

$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});


'e' contains information about the event, including the target element that actually received the click. All we have to do is inspect it to see which cell was actually clicked. Much neater.

Event delegation has another benefit. Normally, When you bind a handler to a collection of elements it gets attached to those elements and those elements only. If you add new elements to the DOM which would have been matched by the selector then they don't have the event handler bound to them (are you following me?) then nothing will happen.

When using event delegation you can add as many matching elements to the DOM as you like after the event is bound and they work too.



13. Use classes to store state


This is the most basic way of storing information about a block of html. jQuery is great at manipulating elements based upon their classes, so if you need to store information about the state of an element then why not add an extra class to store it?

Here's an example. We want to create an expanding menu. When you click the button we want the panel to slideDown() if it's currently closed, or slideUp() if it's currently open. We'll start with the HTML

view plaincopy to clipboardprint?

click me

• Menu item 1
• Menu item 2
• Menu item 3

Very simple! We've just added an extra class to the wrapper div which serves no other purpose other than to tell us the state of the item. So all we need is a click event handler which performs slideUp() or slideDown() on the corresponding panel when the button is clicked.

view plaincopy to clipboardprint?

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});


That's a very simple example, but you can add extra classes for storing all sorts of information about an element or HTML fragment.

However, in all but simple cases it's probably better to use the next tip.



14. Even better, use jQuery's internal data() method to store state


It's not very well documented for some reason but jQuery has an internal data() method which can be used to store information in key/value pairs against any DOM element. Storing a piece of data is as simple as this...

view plaincopy to clipboardprint?

$('#myDiv').data('currentState', 'off');


We can amend the example from the previous tip. We'll use the same HTML (with the "expanded" class removed) and use the data() function instead.

view plaincopy to clipboardprint?

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});


I'm sure you'll agree this is much neater. For more information about data() and removeData(), see this page...

jQuery internals


15. Write your own selectors


jQuery has loads of built-in selectors for selecting elements by ID, class, tag, attribute and many more. But what do you do when you need to select elements based upon something else and jQuery doesn't have a selector?

Well, one answer would be to add classes to the elements from the start and use those to select them, but it turns out that it's not hard to extend jQuery to add new selectors.

The best way to demonstrate is with an example.

view plaincopy to clipboardprint?

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});


The first block of code creates a custom selector which finds any element that is more than 100 pixels tall. The second block just uses it to add a click handler to all those elements.

I won't go into any more detail here but you can imagine how powerful this is and if you search google for "custom jquery selector" you'll find loads of great examples.



16. Streamline your HTML and modify it once the page has loaded


The title might not make a lot of sense but this tip can potentially neaten up your code, reduce the weight and download time of your page and help your SEO. Take the following HTML for example...

view plaincopy to clipboardprint?

This is field number 1

This is an error message

This is field number 2

This is an error message

That's an example of how a form might be marked up, modified slightly for illustrative purposes. I'm sure you'll agree it's pretty ugly and if you had a long form you'd end up with a fairly long ugly page. It's be nicer if you could just put this in your HTML.

view plaincopy to clipboardprint?

This is field 1

This is field 2

This is field 3

This is field 4

This is field 5

All you have to do is a bit of jQuery manipulation to add all the ugly HTML back in. Like this...

view plaincopy to clipboardprint?

$(document).ready(function() {
$('.field').before('

');
$('.field').after('

This is an error message

');
});


It's not always advisable to do this, you'll get a bit of a flash as the page loads, but in certain situations where you've got a lot of repeated HTML it can really reduce your page weight and the SEO benefits of reducing all your repeated extraneous markup should be obvious.



17. Lazy load content for speed and SEO benefits


Another way to speed up your page loads and neaten up the HTML that search spiders see is to lazy load whole chunks of it using an AJAX request after the rest of the page has loaded. The user can get browsing right away and spiders only see the content you want them to index.

We've used this technique on our own site. Those purple buttons at the top of the page drop down 3 forms, directions and a google map, which was doubling the size of our pages. So, we just put all that HTML in a static page and use the load() function to load it in once the DOM was ready. Like this...

view plaincopy to clipboardprint?

$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});


I wouldn't use this everywhere. You have to consider the trade offs here. You're making extra requests to the server and portions of your page might not be available to the user right away, but used correctly it can be a great optimization technique.



18. Use jQuery's utility functions


jQuery isn't just about flash effects. The creator has exposed some really useful methods which fill a few gaps in JavaScript's repertoire.

http://docs.jquery.com/Utilities

In particular, browser support for certain common array functions is patchy (IE7 doesn't even have an indexOf() method!). Jquery has methods for iterating, filtering, cloning, merging and removing duplicates from Arrays.

Other common functions that are difficult in Javascript include getting the selected item in a drop down list. In plain old JavaScript you'd have to get the element using getElementByID, get the child elements as an array and iterate through them checking whether each one was selected or not. jQuery makes it easy...

view plaincopy to clipboardprint?

$('#selectList').val();


It's worth spending some time looking through the jQuery documentation on the main site and having a nose around some of the lesser known functions.



19. Use noconflict to rename the jquery object when using other frameworks


Most javascript frameworks make use of the $ symbol as a shorthand and this can cause clashes when trying to use more than one framework on the same page. Luckily there's a simple solution. The .noconflict() function gives control of the $ back and allows you to set your own variable name, like this...

view plaincopy to clipboardprint?

var $j = jQuery.noConflict();
$j('#myDiv').hide();




20. How to tell when images have loaded


This is another one of those problems that doesn't seem to be as well documented as it should be (not when I went looking anyway) and it's a fairly common requirement when building photo galleries, carousels etc, but it's fairly easy.

All you have to do is use the .load() method on an IMG element and put a callback function in it. The following example changes the "src" attribute of an image tag to load a new image and attaches a simple load function.

view plaincopy to clipboardprint?

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});


You should find that the alert is called as soon as the image is loaded.



21. Always use the latest version


jQuery is constantly improving and John Resig, it's creator, always seems to be in search of ways to improve performance.

jQuery is currently on version 1.2.6 but John has already revealed that he's working on a new selector engine called Sizzle, which may apparently improve selector speeds in Firefox by up to 4x. So, it pays to keep up to date.



22. How to check if an element exists


You don't need to check if an element exists on the page before you manipulate it because jQuery will will simply do nothing if you try to select something and it isn't in the DOM. But when you do need to check if anything has been selected, or how many items have been selected you can use the length property.

view plaincopy to clipboardprint?

if ($('#myDiv).length) {
// your code
}


Simple, but not obvious.



23. Add a JS class to your HTML attribute


I learned this tip from Karl Swedberg whose excellent books I used to learn jQuery.

He recently left a comment on one of my previous articles about this technique and the basics are as follows...

Firstly, as soon as jQuery has loaded you use it to add a "JS" class to your HTML tag.

view plaincopy to clipboardprint?

$('HTML').addClass('JS');


Because that only happens when javascript is enabled you can use it to add CSS styles which only work if the user has JavaScript switched on, like this...

view plaincopy to clipboardprint?

.JS #myDiv{display:none;}


So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content as it's not hidden. I'll be using this one a lot in the future.

To read his full article click here.



24. Return 'false' to prevent default behaviour


This should be an obvious one but maybe not. if you have a habit of doing this...

view plaincopy to clipboardprint?

Click me!


... and then attaching an event handler like this...

view plaincopy to clipboardprint?

$('popup').click(function(){
// Launch popup code
});


... it'll probably work fine until you use it on a long page, at which point you'll notice that the # is causing it to jump to the top of the page when your click event is triggered.

All you have to do to prevent this default behaviour, or indeed any default behaviour on any event handler is to add "return false;" to your handler, like this...

view plaincopy to clipboardprint?

$('popup').click(function(){
// Launch popup code
return false;
});




25. Shorthand for the ready event


A small tip this one but you can save a few characters by using shorthand for the $(document).ready function.

Instead of this...

view plaincopy to clipboardprint?

$(document).ready(function (){
// your code
});


You can do this...

view plaincopy to clipboardprint?

$(function (){
// your code
});

google map tutorial

There are many times I want to leverage jQuery’s strengths to create a custom Google Maps mashup. In this tutorial, I will walk you through how to get started using jQuery inside the Google Maps environment. I will assume nothing, and explain each piece in detail.

View Final Demo

If you are already familiar with Google Maps API, skip to step #5, or so.

Step #1: Get API key

First, grab yourself an API key for Google Maps , you will need this in the next step.

Step #2: Load Google Maps and jQuery

We want to load up jQuery and Google Maps with the Google AJAX Libraries API.

<><>

Make sure to replace YOUR_API_KEY_HERE with your API key. By using the Google AJAX Libraries API, it allows you to load the JavaScript libraries you need right from Google’s servers. This increases the chance that your users will be able to load the scripts faster from their browser cache, as well as shuffle the jQuery script loading off your server.

Step #3: Create the Google Map

To create our Google Map, we need to create a container div and use CSS to give it a width and a height.

id="map">

media="screen"type="text/css">#map { width:500px; height:500px; }

Use the GMap2 function to make a map instance. Then, set the center of the map. I wrapped this code block in jQuery’s document ready function so that the code is run after the page has loaded.

$(document).ready(function(){







 var map = new GMap2(document.getElementById(‘map’));







 var burnsvilleMN = new GLatLng(44.797916,-93.278046);







 map.setCenter(burnsvilleMN, 8);







});

Here, I used Burnsville, MN’s latitude and longitude because it is where I live right now. There are many ways to get the latitude and longitude of an address, like this simple service by iTouchMap.

The second parameter for setCenter is the zoom level, which is a number. I set the zoom level to"8"here because it is about in the middle.

At this point we should have a simple map.

Step #4: Load the Google Maps Example

To have some points to work with, let’s paste in the google maps example .

// setup 10 random points 







var bounds = map.getBounds();







var southWest = bounds.getSouthWest();







var northEast = bounds.getNorthEast();







var lngSpan = northEast.lng() – southWest.lng();







var latSpan = northEast.lat() – southWest.lat();







var markers = [];







for (var i = 0; i<10; i++) {







 var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());







 marker = new GMarker(point);







 map.addOverlay(marker);







 markers[i] = marker;







}

Note that I added a markers array to the example code. This will be used in the next step.

Step #5: Loop Through Markers and Add Basic Click Event to Markers

In this step, we start to use jQuery and Google Maps together. We want to be careful to use Google Map’s built-in API as much as possible, leaving jQuery only for what it is best at.

Let’s take that array of markers and loop through them with jQuery’s each method.

$(markers).each(function(i,marker){







 GEvent.addListener(marker,"click", function(){







   map.panTo(marker.getLatLng());







 });







});

Inside the loop, let’s use Google Maps’s GEvent namespace to attach a click event to each marker. Then, we will add a panTo behavior to center the map on the marker. marker.getLatLng(); returns the latitude and longitude of the marker, while map.panTo(GLatLng) allows us to center the map on that latitude and longitude.

Step #6 – Make a Clickable List of Markers

Let’s add a clickable list next to the map. Insert a ul.

<ul id="list"></ul>

Then let’s style it up a bit by floating the map left and float our list element next to it. We also want to add a hover effect to the list items to give visual feedback to the user that they can click on each item in the list.

<style type="text/css" media="screen">







 #map { float:left; width:500px; height:500px; }







 #list { float:left; width:200px; background:#eee; list-style:none; padding:0; }







 #list li { padding:10px; }







 #list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }







</style>

In our jQuery each loop from last step, let’s append the clickable list items to the list.

$("



")     .html("Point"+i)     .click(function(){       map.panTo(marker.getLatLng());     })     .appendTo("#list");

Here I am just setting the content to"Point (the count)", adding that same panTo action from before, then appending the list item to our list.

Step #7 – Add a Custom Message

When I create a Google Maps mashup, I usually want to replace the built-in info window with something custom. With jQuery, we can add any arbitrary HTML in place of the info window. This is great when you want complete control over what the info window looks like.



Add a message div with some test text.

id="message"style="display:none;">Test text.

Then add some basic styling to the message.

#message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }

We have to place the message div inside the map. To do this, we can use jQuery to append it to an object. The map view is seperated into panes. Each pane is a div layered on top of the other. To get the div object that we want to attach our message div to, we can use map.getPane(PANE). The G_MAP_FLOAT_SHADOW_PANE is the layer that I find works best for attaching custom messages.

$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

To show the message div in place of the info window, we need to separate the click action into a separate function. Replace the map.panTo(marker.getLatLng(); with displayPoint(marker, i);, a call to the new displayPoint function shown below.

function displayPoint(marker, i){







 map.panTo(marker.getPoint());







 var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());







 $("#message").show().css({ top:markerOffset.y, left:markerOffset.x });







}

We put the panTo action in our new function. Then the magic function here is the map.fromLatLngToDivPixel(GLatLng); which converts the latitude/longitude of the marker into a pixel on the map div.This returns aobject containing x (amount of pixels from the left of the map) and y (amount of pixels from the top of the map).

Final Step #8 – Add Some Spice

To finish up, we will add an event when the map stops panning. We can do this by attaching the"movend"event map object. This way, after panning to the marker you’ve clicked on we can use jQuery’s fadeIn method to add some spice.

function displayPoint(marker, index){







 $("#message").hide();







 var moveEnd = GEvent.addListener(map,"moveend", function(){







   var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());







   $("#message")







     .fadeIn()







     .css({ top:markerOffset.y, left:markerOffset.x });







   GEvent.removeListener(moveEnd);







 });







 map.panTo(marker.getLatLng());







}

There you have it. We’ve come a long ways by adding our own custom click event, a clickable list and a custom info window. In the next tutorial, I’ll show you how to store and retrieve points with a server-side language.

google map tutorial

There are many times I want to leverage jQuery’s strengths to create a custom Google Maps mashup. In this tutorial, I will walk you through how to get started using jQuery inside the Google Maps environment. I will assume nothing, and explain each piece in detail.
View Final Demo
If you are already familiar with Google Maps API, skip to step #5, or so.

Step #1: Get API key

First, grab yourself an API key for Google Maps , you will need this in the next step.

Step #2: Load Google Maps and jQuery

We want to load up jQuery and Google Maps with the Google AJAX Libraries API.

<><>

Make sure to replace YOUR_API_KEY_HERE with your API key. By using the Google AJAX Libraries API, it allows you to load the JavaScript libraries you need right from Google’s servers. This increases the chance that your users will be able to load the scripts faster from their browser cache, as well as shuffle the jQuery script loading off your server.

Step #3: Create the Google Map

To create our Google Map, we need to create a container div and use CSS to give it a width and a height.

id="map">

media="screen"type="text/css">#map { width:500px; height:500px; }

Use the GMap2 function to make a map instance. Then, set the center of the map. I wrapped this code block in jQuery’s document ready function so that the code is run after the page has loaded.

$(document).ready(function(){ 

  var map = new GMap2(document.getElementById(‘map’)); 

  var burnsvilleMN = new GLatLng(44.797916,-93.278046); 

  map.setCenter(burnsvilleMN, 8); 

});

Here, I used Burnsville, MN’s latitude and longitude because it is where I live right now. There are many ways to get the latitude and longitude of an address, like this simple service by iTouchMap.
The second parameter for setCenter is the zoom level, which is a number. I set the zoom level to"8"here because it is about in the middle.
At this point we should have a simple map.

Step #4: Load the Google Maps Example

To have some points to work with, let’s paste in the google maps example .

// setup 10 random points 

var bounds = map.getBounds(); 

var southWest = bounds.getSouthWest(); 

var northEast = bounds.getNorthEast(); 

var lngSpan = northEast.lng() – southWest.lng(); 

var latSpan = northEast.lat() – southWest.lat(); 

var markers = []; 

for (var i = 0; i<10; i++) { 

  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 

  marker = new GMarker(point); 

  map.addOverlay(marker); 

  markers[i] = marker; 

}

Note that I added a markers array to the example code. This will be used in the next step.

Step #5: Loop Through Markers and Add Basic Click Event to Markers

In this step, we start to use jQuery and Google Maps together. We want to be careful to use Google Map’s built-in API as much as possible, leaving jQuery only for what it is best at.

Let’s take that array of markers and loop through them with jQuery’s each method.

$(markers).each(function(i,marker){ 

  GEvent.addListener(marker,"click", function(){ 

    map.panTo(marker.getLatLng()); 

  }); 

});

Inside the loop, let’s use Google Maps’s GEvent namespace to attach a click event to each marker. Then, we will add a panTo behavior to center the map on the marker. marker.getLatLng(); returns the latitude and longitude of the marker, while map.panTo(GLatLng) allows us to center the map on that latitude and longitude.

Step #6 – Make a Clickable List of Markers

Let’s add a clickable list next to the map. Insert a ul.

<ul id="list"></ul>

Then let’s style it up a bit by floating the map left and float our list element next to it. We also want to add a hover effect to the list items to give visual feedback to the user that they can click on each item in the list.

<style type="text/css" media="screen">

  #map { float:left; width:500px; height:500px; } 

  #list { float:left; width:200px; background:#eee; list-style:none; padding:0; } 

  #list li { padding:10px; } 

  #list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }

</style>

In our jQuery each loop from last step, let’s append the clickable list items to the list.

$("
")     .html("Point"+i)     .click(function(){       map.panTo(marker.getLatLng());     })     .appendTo("#list");

Here I am just setting the content to"Point (the count)", adding that same panTo action from before, then appending the list item to our list.

Step #7 – Add a Custom Message

When I create a Google Maps mashup, I usually want to replace the built-in info window with something custom. With jQuery, we can add any arbitrary HTML in place of the info window. This is great when you want complete control over what the info window looks like.

Add a message div with some test text.

id="message"style="display:none;">Test text.

Then add some basic styling to the message.

#message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }

We have to place the message div inside the map. To do this, we can use jQuery to append it to an object. The map view is seperated into panes. Each pane is a div layered on top of the other. To get the div object that we want to attach our message div to, we can use map.getPane(PANE). The G_MAP_FLOAT_SHADOW_PANE is the layer that I find works best for attaching custom messages.

$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

To show the message div in place of the info window, we need to separate the click action into a separate function. Replace the map.panTo(marker.getLatLng(); with displayPoint(marker, i);, a call to the new displayPoint function shown below.

function displayPoint(marker, i){ 

  map.panTo(marker.getPoint()); 

  var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());

  $("#message").show().css({ top:markerOffset.y, left:markerOffset.x }); 

}

We put the panTo action in our new function. Then the magic function here is the map.fromLatLngToDivPixel(GLatLng); which converts the latitude/longitude of the marker into a pixel on the map div.This returns aobject containing x (amount of pixels from the left of the map) and y (amount of pixels from the top of the map).

Final Step #8 – Add Some Spice

To finish up, we will add an event when the map stops panning. We can do this by attaching the"movend"event map object. This way, after panning to the marker you’ve clicked on we can use jQuery’s fadeIn method to add some spice.

function displayPoint(marker, index){ 

  $("#message").hide(); 

  var moveEnd = GEvent.addListener(map,"moveend", function(){ 

    var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 

    $("#message") 

      .fadeIn() 

      .css({ top:markerOffset.y, left:markerOffset.x }); 

    GEvent.removeListener(moveEnd); 

  }); 

  map.panTo(marker.getLatLng()); 

}

There you have it. We’ve come a long ways by adding our own custom click event, a clickable list and a custom info window. In the next tutorial, I’ll show you how to store and retrieve points with a server-side language.

gps jquery

jQuery GPS

Submitted by birdwingfx on October 16, 2009 - 9:22pm

For people that want to add Google maps to their website, but don't want their website to be bogged down with features they don't need.

Jquery GPS is a lightweight and simple solution to all your Google Map needs.

Add inputs for addresses by simply adding default or custom ID's.

You can use any element to trigger the event! So it doesn't need to be embedded inside a form.

The default ID's make it easy to create an application that will give directions and a highlighted map right on your website!







gps jquery

jQuery GPS

Submitted by birdwingfx on October 16, 2009 - 9:22pm

For people that want to add Google maps to their website, but don't want their website to be bogged down with features they don't need.
Jquery GPS is a lightweight and simple solution to all your Google Map needs.
Add inputs for addresses by simply adding default or custom ID's.
You can use any element to trigger the event! So it doesn't need to be embedded inside a form.
The default ID's make it easy to create an application that will give directions and a highlighted map right on your website!

Thats it! By using the default ID's you have just created a driving directins application for your website!. All thats left is to load the google maps API and initiate the plugin using Jquery.
First In order to use The Google Maps API you must have an API key which you can get Here.
Then you have to load jQuery the google maps API and the plugin:





Because there is NO default ID for what Div tag the MAP will be in we use this initiate the plugin:

As you can see here the div with the id="map" is where the google map will appear.
Thats it! now anyone can get directions from your website.
There are more features like setting where the map first is when it loads, the zoom level, and some other features that would be good for a business. Hopefully I will finish the documentation soon so that you can take advantage of these features!

What is jQuery GPS?

jQuery GPS is a jQuery plugin for people that want to add Google maps to their website, but don't want their website to be bogged down with features they don't need.

Jquery GPS is a lightweight and simple solution to all your Google Map needs. Add inputs for addresses by simply adding default or custom ID's. You can use any element to trigger the event! So it doesn't need to be embedded inside a form.

The default ID's make it easy to create an application that will give directions and a highlighted map right on your website!

jQuery GPS also has the ability for you to select the place the map shows when it first loads, and to open a toolip and load a graphic image on that starting location.

If you like the plugin then Help Spread the Word!

"directions"> "map"> "text" id="start" /> "text" id="end" /> "submit" id="getdirections" value="Get Directions!" />

What is jQuery GPS?

jQuery GPS is a jQuery plugin for people that want to add Google maps to their website, but don't want their website to be bogged down with features they don't need.
Jquery GPS is a lightweight and simple solution to all your Google Map needs. Add inputs for addresses by simply adding default or custom ID's. You can use any element to trigger the event! So it doesn't need to be embedded inside a form.
The default ID's make it easy to create an application that will give directions and a highlighted map right on your website!
jQuery GPS also has the ability for you to select the place the map shows when it first loads, and to open a toolip and load a graphic image on that starting location.
If you like the plugin then Help Spread the Word!

"directions"> "map"> "text" id="start" /> "text" id="end" /> "submit" id="getdirections" value="Get Directions!" />

plugins for google map

At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way.
Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins.
The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.
I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post. If you are taking your first steps within Google Maps, I suggest you start there.

Before you install any of these plugins you may want to firstly download the latest version of jQuery, and secondly you had better grab your Google Map API Key here: Sign Up for the Google Maps API.

 

Map – Google Maps Plugin

 

plugins for google map

At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way.
Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins.
The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.
I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post. If you are taking your first steps within Google Maps, I suggest you start there.

Before you install any of these plugins you may want to firstly download the latest version of jQuery, and secondly you had better grab your Google Map API Key here: Sign Up for the Google Maps API.

 

Map – Google Maps Plugin

 

jquery for gps

jQuery Google Maps plugin

For one of my recent clients I had to add a google map to the website that allowed people to put in their address and get directions to the festival location.



Looking around I saw a bunch of jQuery plugins that could get the job done. But they were bulky and loaded with features I didn't need.





My solution! Create my own jQuery plugin that allows for simple functionality.



Thus jQuery GPS was born





You can create a simple directions application with a From: and To: box that will give users turn by turn directions and highlight the google map with only 1 actual line of javascript (using default ID's and not including the loading of jQuery the plugin or the google API)



Here Is an example





You can change where the map is centered when it first loads, Put a custom icon on that location and open a custom tooltip. Perfect for people who want to include directions to their stores, or other places of work.



All the code used to create

the Demo was this:

Code:

   
From: 

       To: 



   

jQuery GPS homepage: http://www.birdwingfx.com/jQuery_gps

jQuery GPS on jQuery: http://plugins.jquery.com/project/jGPS



Full documentation available on the homepage as well as license info.

jquery for gps

jQuery Google Maps plugin

For one of my recent clients I had to add a google map to the website that allowed people to put in their address and get directions to the festival location.

Looking around I saw a bunch of jQuery plugins that could get the job done. But they were bulky and loaded with features I didn't need.


My solution! Create my own jQuery plugin that allows for simple functionality.

Thus jQuery GPS was born


You can create a simple directions application with a From: and To: box that will give users turn by turn directions and highlight the google map with only 1 actual line of javascript (using default ID's and not including the loading of jQuery the plugin or the google API)

Here Is an example


You can change where the map is centered when it first loads, Put a custom icon on that location and open a custom tooltip. Perfect for people who want to include directions to their stores, or other places of work.

All the code used to create
the Demo was this:

Code:

    
From: 
        To: 

    

 


jQuery GPS homepage: http://www.birdwingfx.com/jQuery_gps
jQuery GPS on jQuery: http://plugins.jquery.com/project/jGPS

Full documentation available on the homepage as well as license info.