In today’s post I’m going to show you guys 50 jQuery Snippets that can help you with your JavaScript projects. Some of these snippets are going to be things that have just been supported with jQuery 1.4.2 whilst others are really useful functions or methods that can help you do things better or quicker. I’ve tried to bare in mind optimal performance with these snippets so if there’s anything you see that you think could be done better, please feel free to post your version in the comments!. I hope you find the post useful.

• How to Create A Nested Filter:

   //a filter allows you to reduce the set of matched elements
   //to those that match a given selector. In this case the query
   //removes anything which doesn't (:not) have (:has) a child with
   //class "selected" (.selected)
  
   .filter(":not(:has(.selected))")
  

• How to Reuse Your Element Searches

  var allItems = $("div.item");
  var keepList = $("div#container1 div.item");
  
  //Now you can keep working with those jQuery objects. For example,
  //trim down the "keep list" based on checkboxes whose names
  //correspond to
  class names:
  
  $(formToLookAt + " input:checked").each(function() {     keepList = keepList.filter("." + $(this).attr("name")); });
  

• How To Check If An Element contains a certain class or element with has():

  
   //jQuery 1.4.* includes support for the has method. This method will find
   //if a an element contains a certain other element class or whatever it is
   //you are looking for and do anything you want to them.
  
   $("input").has(".email").addClass("email_icon");  
  

• How to Switch StyleSheets With jQuery:

  	//Look for the media-type you wish to switch then set the href to your new style sheet
  	$('link[media='screen']').attr('href', 'Alternative.css');

• How to Limit the Scope of Selection (For Optimization):

  
  		//Where possible, pre-fix your class names with a tag name
  		//so that jQuery doesn't have to spend more time searching
  		//for the element you're after. Also remember that anything
  		//you can do to be more specific about where the element is
  		//on your page will cut down on execution/search times
  
  		var in_stock = $('#shopping_cart_items input.is_in_stock');
  

  
  
   Item X
  
   Item Y
  
   Item Z
  
  

• How to Correctly Use ToggleClass:

  
  	 //Toggle class allows you to add or remove a class
  	 //from an element depending on the presence of that
  	 //class. Where some developers would use:
  
  	 a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
  
  	 //toggleClass allows you to easily do this using
  
  	 a.toggleClass('blueButton');
  

• How to set an IE Specific Function:

  
  	if ($.browser.msie) { // Internet Explorer is a sadist. }
  

• How to Replace an element with jQuery:

  $('#thatdiv').replaceWith('fnuh');

• How to Verify if an element is empty:

  if ($('#keks').html()) { //Nothing found ;} 

• How to find out the index of an element in an unordered set

  $("ul > li").click(function () {
      var index = $(this).prevAll().length;
  });

• How to Bind a function to an event:

  $('#foo').bind('click', function() {
    alert('User clicked on "foo."');
  });

• How to Append or add HTML to an element:

  $('#lal').append('sometext');

• How to use an object literal to define properties when creating an element

  	var e = $("", { href: "#", class: "a-class another-class", title: "..." });
  	

• How to Filter using multiple-attributes

  
  	//This precision-based approached can be useful when you use
  	//lots of similar input elements which have different types
  	var elements = $('#someid input[type=sometype][value=somevalue]').get();
  	

• How to Preload images with jQuery:

  
  	jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };
  
  	// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
  	

• How to set an event handler for any element that matches a selector:

  $('button.someClass').live('click', someFunction);
  
  	//Note that in jQuery 1.4.2, the delegate and undelegate options have been
  	//introduced to replace live as they offer better support for context
  
      //For example, in terms of a table where before you would use..
  
  	// .live()
  	$("table").each(function(){
  	  $("td", this).live("hover", function(){
  		$(this).toggleClass("hover");
  	  });
  	});
  
  	//Now use..
  
  	$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
  });
  

• How to find an option element that’s been selected:

  	$('#someElement').find('option:selected');
  	

• How to hide an element that contains text of a certain value:

  $("p.value:contains('thetextvalue')").hide();

• How To AutoScroll to a section of your page:

  jQuery.fn.autoscroll = function(selector) {
    $('html,body').animate(
      {scrollTop: $(selector).offset().top},
      500
    );
  }
  
  //Then to scroll to the class/area you wish to get to like this:
  $('.area_name').autoscroll();
  

• How To Detect Any Browser:

  	Detect Safari (if( $.browser.safari)),
  	Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),
  	Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),
  	Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' ))

• How To Replace a word in a string:

  var el = $('#id');
  	el.html(el.html().replace(/word/ig, ''));

• How To Disable right-click contextual menu :

  $(document).bind('contextmenu',function(e){ return false; });

• How to define a Custom Selector

  	$.expr[':'].mycustomselector = function(element, index, meta, stack){
      // element- is a DOM element
      // index - the current loop index in stack
      // meta - meta data about your selector
      // stack - stack of all elements to loop
  
      // Return true to include current element
      // Return false to explude current element
  };
  
  // Custom Selector usage:
  $('.someClasses:test').doSomething();
  

• How to check if an element exists

  if ($('#someDiv').length) {//hooray!!! it exists...}

• How to Detect Both Right & Left Mouse-clicks with jQuery:

  $("#someelement").live('click', function(e) {
      if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
          alert("Left Mouse Button Clicked");
      }
      else if(e.button == 2)
          alert("Right Mouse Button Clicked");
  });
  

• How To Show or Erase a Default Value In An Input Field:

  //This snippet will show you how to keep a default value
  //in a text input field for when a user hasn't entered in
  //a value to replace it
  
  swap_val = [];
  $(".swap").each(function(i){
      swap_val[i] = $(this).val();
      $(this).focusin(function(){
          if ($(this).val() == swap_val[i]) {
              $(this).val("");
          }
      }).focusout(function(){
          if ($.trim($(this).val()) == "") {
              $(this).val(swap_val[i]);
          }
      });
  });
  

• How To Automatically Hide or Close Elements After An Amount Of Time (supports 1.4):

  
   //Here's how we used to do it in 1.3.2 using setTimeout
      setTimeout(function() {
    $('.mydiv').hide('blind', {}, 500)
  }, 5000);
  
  //And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
  $(".mydiv").delay(5000).hide('blind', {}, 500);
   

• How To Add Dynamically Created Elements to the DOM:

   var newDiv = $('');
  	newDiv.attr('id','myNewDiv').appendTo('body'); 

• How To Limit The Number Of Characters in a "Text-Area" field:

  	jQuery.fn.maxLength = function(max){
  	this.each(function(){
  		var type = this.tagName.toLowerCase();
  		var inputType = this.type? this.type.toLowerCase() : null;
  		if(type == "input" && inputType == "text" || inputType == "password"){
  			//Apply the standard maxLength
  			this.maxLength = max;
  		}
  		else if(type == "textarea"){
  			this.onkeypress = function(e){
  				var ob = e || event;
  				var keyCode = ob.keyCode;
  				var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
  				return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
  			};
  			this.onkeyup = function(){
  				if(this.value.length > max){
  					this.value = this.value.substring(0,max);
  				}
  			};
  		}
  	});
  };
  
  //Usage:
  
  $('#mytextarea').maxLength(500);
  

• How to create a basic test for a function

  
  	//Separate tests into modules.
  module("Module B");
  
  test("some other test", function() {
    //Specify how many assertions are expected to run within a test.
    expect(2);
    //A comparison assertion, equivalent to JUnit's assertEquals.
    equals( true, false, "failing test" );
    equals( true, true, "passing test" );
  });
  

• How to clone an element in jQuery:

  var cloned = $('#somediv').clone(); 

• How to test if an element is visible in jQuery:

  if($(element).is(':visible') == 'true') { //The element is Visible } 

• How to center an element on screen:

  jQuery.fn.center = function () {
  	this.css('position','absolute');
  	this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
  	this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}
  	//Use the above function as: $(element).center(); 

• How to put the values of all the elements of a particular name into an array:

  
  	var arrInputValues = new Array();
     $("input[name='table\\[\\]']").each(function(){
       arrInputValues.push($(this).val());
  });
  

• How to Strip HTML From Your Element

  
  	(function($) {
      $.fn.stripHtml = function() {
          var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
          this.each(function() {
              $(this).html(
                  $(this).html().replace(regexp,”")
              );
          });
          return $(this);
      }
  })(jQuery); 
  
  	//usage:
  	$('p').stripHtml();  
  

• How to get a parent element using closest:

  $('#searchBox').closest('div'); 

• How to log jQuery events using Firebug and Firefox:

  
  // Allows chainable logging
  // Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');
  jQuery.log = jQuery.fn.log = function (msg) {
        if (console){
           console.log("%s: %o", msg, this);
        }
        return this;
  };
  

• How to force links to open in a pop-up window:

  
  	jQuery('a.popup').live('click', function(){
  	newwindow=window.open($(this).attr('href'),'','height=200,width=150');
  	if (window.focus) {newwindow.focus()}
  	return false;
  });
  

• How to force links to open in a new tab:

  
  jQuery('a.newTab').live('click', function(){
  	newwindow=window.open($(this).href);
  	jQuery(this).target = "_blank";
  	return false;
  });
  

• How to select siblings in jQuery using .siblings()

  
  // Rather than doing this
  $('#nav li').click(function(){
      $('#nav li').removeClass('active');
      $(this).addClass('active');
  });
  
  // Do this instead
  $('#nav li').click(function(){
      $(this).addClass('active')
          .siblings().removeClass('active');
  });
  	

• How to Toggle All the checkboxes on a page:

  var tog = false; // or true if they are checked on load
  $('a').click(function() {
      $("input[type=checkbox]").attr("checked",!tog);
      tog = !tog;
  });
  

• How to filter down a list of elements based on some input text:

  
  	//If the value of the element matches that of the entered text
  	//it will be returned
  	$('.someClass').filter(function() {
      return $(this).attr('value') == $('input#someId').val() ;
   })
   

• How to get mouse cursor X and Y

  $(document).mousemove(function(e){
  $(document).ready(function() {
  $().mousemove(function(e){
  $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
  });
  });

• How to make an entire List Element (LI) clickable

  $("ul li").click(function(){
    window.location=$(this).find("a").attr("href"); return false;
  });
  

   
  Link 1
  
   
  Link 2
  
   
  Link 3
  
  	
  Link 4
  
  
  

• How to Parse XML with jQuery (Basic example):

  function parseXml(xml) {
  	//find every Tutorial and print the author
  	$(xml).find("Tutorial").each(function()
  	{
  	$("#output").append($(this).attr("author") + "");
  	});
  }
  

• How to Check if an image has been fully loaded:

  
   $('#theImage').attr('src', 'image.jpg').load(function() {
  alert('This Image Has Been Loaded');
  });
  

• How to namespace events using jQuery:

  
  //Events can be namespaced like this
  $('input').bind('blur.validation', function(e){
      // ...
  });
  
  //The data method also accept namespaces
  $('input').data('validation.isValid', true);
  

• How to Check if Cookies Are Enabled Or Not:

      var dt = new Date();
      dt.setSeconds(dt.getSeconds() + 60);
      document.cookie = "cookietest=1; expires=" + dt.toGMTString();
      var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
      if(!cookiesEnabled)
  	{
          //cookies have not been enabled
      }
  

• How to Expire A Cookie:

  var date = new Date();
  date.setTime(date.getTime() + (x * 60 * 1000));
  $.cookie('example', 'foo', { expires: date });
  

• Replace any URL on your page with a clickable link

  $.fn.replaceUrl = function() {
          var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
          this.each(function() {
              $(this).html(
                  $(this).html().replace(regexp,'$1‘)
              );
          });
          return $(this);
      }  
  
  	//usage
  
  	$('p').replaceUrl();
  

Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features. Facebook were one of the first companies to introduce this toolbar concept and have been the source of inspiration for many others. 

Taking a leaf from their book, companies like Wibiya and Meebo have been at the forefront of a toolbar-for-the masses revolution, offering easily customizable widgets for almost anyone to install on their pages. Larger companies have also been hopping onto the toolbar-band too, with sites like CNET.com embracing this concept as a way to offer their visitors more ways to interact with their site.

In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.

What Site-bars Our There At The Moment?

As I mentioned, we’ve all seen the widget-packed Wibiya Toolbar in action and they’ve recently moved from their invite-only model to being fully open to the public. Meebo (the popular web destination for online IM services) also started offering their own version of this toolbar and both of them offer something a little different (Meebo for example includes a pretty funky drag-and-share feature). Today, we’ve going to create our very own awesome website toolbar, but from a design perspective here’s how the Meebo and Wibiya bars look close-up.

Wibiya

Meebo

Now that we know what we’re aiming for, let’s see how easy it can be to put together something like this ourselves.

The First Step – Fixed Positioning with CSS

The first step in creating a website-toolbar is creating an empty div which can be correctly fixed-positioned at the bottom of any webpage. The HTML for this is:

<div id="content">&nbsp;</div>
 
<div id="floatingbar"><ul> <li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /></ul></div>

and the CSS for this can be found below.

  div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;	
    }
 
@media screen
  {
  body>div#floatingbar
    {
    position: fixed;
    }
  }

Whilst fixed-positioning isn’t very difficult to achieve using browsers like FireFox and Chrome, it’s been notoriously buggy to code for Internet Explorer 6. Thankfully TagSoup came up with this wonderful set of CSS/JS hackswhich claim to support fixed-positioning all the way back to IE5. If you’re creating a toolbar from scratch, I would definitely recommend reading their post as it’ll save you a lot of time later on. The IE Fix for this is:

JavaScript/HTML:

1
2
3
4

<link rel="stylesheet" type="text/css" href="css/fixed4ie.css" />
<script type="text/javascript">onload = function() { 
content.focus() }
</script>

CSS:

body
  {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
  }
div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }

Once you’ve got your basic-toolbar in place…

The next thing you’re going to want to do is begin adding in some basic styling around it. Most website-toolbars are around the same dimension in height (although there is no official “standard”) so I’m going to set the height of my component as well as some very basic skinning and CSS to style my list items. The background design is made possible with a blue gradient PNG that has some light shadows added to it – similar to the kind of design Wibiya have gone for. Although CSS3 could be just as equally used to create this effect, remember that some people still use IE!

div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 38px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    font-family:Arial;
    font-weight:bold;
    background-image:url('../images/tui.png');	
    }
 
#floatingbar ul { 
list-style-type:none;
}
#floatingbar ul li 
{ 
float:left; padding:14px; 
color:#666; margin-top:-3px;  
}
#floatingbar ul li a 
{ 
text-decoration:none; 
color:#fff; padding: 10px;  
font-size:12px;  font-weight:normal; 
font-family:Arial;
}
#floatingbar ul li a:hover { color:#000033;}

Now that this is done, I also want to add some basic animation to my toolbar so that when users first load up their page, the bar will slide up from the bottom. This is made possible using jQuery’s great animate() feature by keeping the initial height of the component at 0 and then tweening it up to it’s maximum height over a period of time. The code for this can be found below

CSS:

div#floatingbar
    {  
    height: 0px;	
    }

JavaScript:

<script type='text/javascript'> 
  $(function() { 
  $('#floatingbar').css({height: 0}).animate({ height: '38' }, 'slow');
  });
</script>

This will end up creating something a little like this

Next, populate the toolbar with some links and some more jQuery Magic

In the next step of development, we’re going to add some nice visual effects to the toolbar, with the assistance of two of my favorite jQuery plugins – the first will provide us with some lightweight tooltips for our toolbar items whilst the second is going to be used for displaying our content.

1. jQuery Tipsy Tooltips for Toolbar Elements – This is a plugin used for adding Facebook-Like Tooltip effects to your site or links (http://onehackoranother.com/projects/jquery/tipsy/)

Sample Usage:

<script type='text/javascript'> 
  $(function() {
 
  $('.toolbarLink').tipsy({gravity: 's'});
 
  });
</script>

2. jQuery PrettyPhoto - This is a lightbox alternative that allows you to display any type of content, in particular, iFrame content from local or external websites (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Sample Usage:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
</script>

Let’s start adding some social features to the toolbar

When I first looked at the Wibiya toolbar, the big features that appealed to me were how easy it made it for any user to interact with all of the social networks associated with a website. I could easily take a look at the site’s Twitter account or become a fan of their Facebook Fan page, I could even easily browse through all their pictures without having to leave the page I was on. That "ease" of access impressed me, so I developed my website toolbar with widgets in mind.

When there are so many different ways currently available to pull in your recent tweets or display your Flickr albums in an easily scrollable box, why not find an implementation you like and just customize it?. So, that’s what we’re going to do.

1. Google Buzz Plugin – Mike More’s excellent Google Buzz Widget grabs the feed of your latest Google Buzz posts and refreshes this list depending on a set of parameters you’ve configured (http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html)

2. Sea of Clouds jQuery Twitter Plugin – This wonderfully compact plugin makes pulling your Twitter feeds a piece of cake and also allows you to customize the output quite extensively (http://tweet.seaofclouds.com/)

3. Facebook Fan Page Widget - The Facebook Fan Page Widget is a widget provided free by Facebook to site owners wishing to share their fan streams or followers in a box on their website. To allow you to show to Fan Box widgets side by side as in the original Wibiya bar, one can either choose to proxy one of the content boxes or load each of the widgets in separate iFrames which are then loaded into the same window.

4. Coolris Express Viewer - CoolIris offer the public a free version of their commercial 3D-Wall Component for use on your own personal sites. They’ve got a fantastic widget generator online that lets you pull in feeds from all sorts of sources including Flickr, YouTube or your own RSS Feed. It then takes this information and renders it as a scrollable wall of thumbnails that’s easy to view.

5. AddToAny Subscription and Share Widgets – These excellent widgets allow you to configure everything down to the event handlers that execute them so you can choose whether they appear on click or on mouse over. All the usual share sites and social networks are included and these guys even offer an API to anyone wishing to do more with their code.

6. ConveyThis.com Translation Features – Google Translate has been a favorite service among many of my fellow coders for a while now, but I came across this great service that allows you to give your visitors the choice to pick what translation service they want to use to translate your page once they’ve selected a language. Because some services have stronger features in one area of language than others, your visitors will have all the options they could want available to them. ConveyThis? also has a great widget you can add easily to your site, so definitely check it out.

Widget Delivery

Widgets (or plugins such as a Twitter-Reader or Translation service) can be delivered to our visitors through the site-bar in two main methods. The first is on page-load and the second is dynamically on-demand. The second of these options is the most beneficial as it means that we only have to load up the plugin when a user requests it. This can be either done through Ajax-Calls or iFrames.

In my implementation I have opted for iFrames through the PrettyPhoto Light-Box plugin – I thought this was a good idea because it provides a nice sandboxed area where the widget can execute as required without the chance of it interfering with the other widgets on the page. Whilst this isn’t a problem for most modern browsers, sandboxing widgets into iFrames can help lower the bug rate for older browsers like IE6.

To host a widget inside a lightbox iFrame, all you need to do is write or paste the code for it, once configured, into a new html file, save it into a local file in your toolbar directory and call it via PrettyPhoto as follows:

1

<a rel="prettyPhoto[iframe]" href="widget.html" title="Here's the tooltip text " class="toolbarLink"> My Page</a>

You can then freely call any widget file, with it’s very own themes if desired the same way you would any other link used from a lightbox. prettyPhoto also includes some pagination by default so if you want to easily flick through all of the widgets available on your toolbar you can do so through the controls at the bottom of the lightbox.

Further Customization & Demos

It’s possible to further customize your toolbar by adding in icons next to each of your widget links and floating them accordingly. For the example in today’s post, I’ve used some fantastic 24×24 icons from iconfinder.net, and you can see the final version of this page here (or click below to expand the screenshot).

You can also take your imagination one step further and replace all of the text in your toolbar with some nice images – I personally spent a few minutes putting together some gradient text in PhotoShop and here’s what the final product looked like.

With a little more work you could easily add some nice toggle buttons to the side of the toolbar to allow visitors to open or close it and there are a lot more widgets out there that you could experiment adding to your version.

and that’s it!. If you found today’s tutorial helpful, let me know in the comments section below.

Download All Of Todays Examples

You can download all of today’s examples including both the CSS/Icons version of Fubar as well as the Graphics version from the link below. All widgets can be obtained or generated from the site’s referenced in the list earlier in the article, but I’m also including my own ones in the example pack so you can see how easy it is to get setup.

Bonus: Fixed-Position Website Toolbar Plugins

As a bonus to today’s post, I’m also sharing some of the best out-of-the-box alternative solutions and tutorials available for creating your own customized fixed-position Site Bar. We all know that Wibiya is great for a one-click solution, but if you need something a little different one of these will definitely be able to help if the tutorial above doesn’t give you what you’re after.

CSS3 Fixed-Position Toolbar for your site with Social Networking Icons

Learn how to create a fantastic fixed footer toolbar for your site – this version includes some usefully placed social networking and subscription icons, great eye-candy tooltip effects and a complete tutorial on how to create it from start to finish. CSS3 Effects compliment it further with some nice visual design touches. Recommended for those who aren’t looking for extensive changes in customization to the above design and currently have more of a functionality requirement.

Facebook Style Footer-Toolbar from Soh Tanaka

Soh Tanaka presents this excellent tutorial on how to create a Facebook Style Fixed Site Footer toolbar. This implementation is very close to how the real Facebook site-bar looks and feels and even includes a follow-up tutorial on how to create a pop-out Friends List Chat bar. Recommended for those looking for a fully-featured example of how to create a floating site toolbar for further customization.

Floating Footer Toolbar

This entry from Ben Nadel, the most barebones of my recommended tutorials for today, will show you how to build a very very simple implementation of a floating site toolbar. This doesn’t include any of the sample icons or buttons that Soh Tanaka’s version above does so if you want an example that you can literally just start adding your own content to, this would be the one to get.  Ben’s version has been tested with many browsers including IE6, so cross browser compatibility won’t be an issue!.

JixedBar – A Fixed-Position Toolbar plugin for jQuery

Here’s a recently updated plugin that takes a lot out of the effort out of creating a fixed-position toolbar for your site. All you need to do is create a <ul> /<li> structure for each split section and then have the plugin transform it into the toolbar for you. It’s a hassle-free way of adding this feature to your projects and at under 7KB, it’s definitely a recommended download.

After a few weeks away in the US, I’m back with a brand new jQuery post – this week taking a look at a new style of navigation menu. jQuery has made it simple for developers to define an idea or wireframe for a component and then implement it reasonably quickly, which has certainly helped it become the most popular JavaScript Framework out there at the moment. I feel like some of the navigation options out there right now don’t provide you with enough information about the sections of a site you can visit, so today we’re going to learn how to create a menu that solves this problem. 

Here’s what we’re going to be creating in it’s final form.

First, I’m going to define what the menu can do and we’ll take a look at a rough wireframe I created using MockFlow’s free wireframe generator. We want to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display. This can be seen in the wireframe below.

Next, let’s begin to create this menu using some basic HTML structure and CSS. We’re going to need a holder for the menu, the menu itself, each item and a div for each of the drop-down elements we’re going to display information in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div id="menuBarHolder">
 
<ul id="menuBar">
 
<li class="firstchild"><a href="javascript:#">Home</a>
 
<div class="menuInfo">I am some text about the home section</div></li>
<li><a href="javascript:#">Services</a>
 
<div class="menuInfo">I am some text about the services section</div></li>
<li><a href="javascript:#">Clients</a>
 
<div class="menuInfo">I am some text about the clients section</div></li>
<li><a href="javascript:#">Portfolio</a>
 
<div class="menuInfo">I am some text about the portfolio section</div></li>
<li><a href="javascript:#">About</a>
 
<div class="menuInfo">I am some text about the about section</div></li>
<li><a href="javascript:#">Blog</a>
 
<div class="menuInfo">I am some text about the blog section</div></li>
<li><a href="javascript:#">Follow</a>
 
<div class="menuInfo">I am some text about the follow section</div></li>
<li><a href="javascript:#">Contact</a>
 
<div class="menuInfo">I am some text about the contact section</div></li>
 
</ul>
 
</div>
</div>

We’re now going to style this content. Because we only want to display the extra information for each section when a user hovers over an “li” element, we’re going to hide the information divs until they’re needed. I’ve also noticed that a lot of the popular browsers you guys use (IE aside) support CSS rounded corners, so I’m including this effect to be used for the drop-down menus – it’s visually more pleasing to the eye than corners in some designs, and if you’d prefer you can drop the last few terms in the “menuInfo” class.

This menu is completely cross-browser compatible (yay!) so it’s possible to use rounded corner definitions without needing to worry about how they’ll render in older browsers – everything should gracefully degrade as per necessary.

 
#menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
#container { margin-top:100px;}
#menuBar li{  float:left;  padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#999;}
.firstchild { border-left:1px solid #ccc;}
.menuInfo { cursor:hand; background-color:#000; color:#fff;
width:74px; font-size:11px;height:100px; padding:3px; display:none;
position:absolute; margin-left:-15px; margin-top:-15px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright: 5px;
-khtml-border-radius-bottomleft: 5px;
 border-radius-bottomright: 5px;
border-radius-bottomleft: 5px;
}

Finally, let’s take a look at the jQuery for our Fluid Menu. We want to add hover cases to each element of our menu so that when a user moves their mouse over a menu-item, the information div animates into place elegantly. To achieve this, we’re simply going to use jQuery’s built-in slideDown and slideUp effects as they provide the most efficient way to achieve the effect we want with the least amount of code.

We also want users to be able to click on the entire “li” element rather than the links inside them, so we’re going to bind a pseduo-click event to all the menu’s li’s by means of document.location.href and an attribute check on the href of their child links.This is achieved as follows:

$(document).ready(function()
{
 
$('#menuBar li').click(function()
{
  var url = $(this).find('a').attr('href');
  document.location.href = url;
 
});
 
$('#menuBar li').hover(function()
{
   $(this).find('.menuInfo').slideDown();
},
function()
{
  $(this).find('.menuInfo').slideUp();
 
});
 
});

and that’s it!. You can now easily set additional information for any of the menu items in your menu-bar and if needed you can easily extend the length of the drop-downs to suit your needs. You can find a demo and download links to all of the code in today’s post below.

Demo: http://addyosmani.com/resources/fluid-menu/fluid-menu.html

Download: http://addyosmani.com/resources/fluid-menu/fluid-menu.zip

Hi guys. Today I wanted to share with you interface tutorials for some of the ideas I’ve found quite inspiring over the past few weeks. In this post you’ll find tutorials that will teach you how to create easily switchable gallery views, a 3D rotating share button carousel, the Facebook Admin Panel and much more. We often come across small pieces of design that make us pause and think .. “Wow. I really want to do that..” so I hope that this post goes a little way towards helping you add a few special touches to your own interfaces.

Before we begin, I just want to let everyone know that I’m currently working on a really interesting post on how to create brand new User Interface form elements based on the logic *you* define. Think about radio buttons that have more than just two states or checkboxes which do more than just check or uncheck. It’s a topic I don’t believe has been covered in depth anywhere else before so hopefully it will be a good read. I’m hoping to have it finished some time this week so stay tuned for some more jQuery action soon!. Anyway.. let’s charge forward with this post.

How to create the image-less from Google.com

Recently, Google invested in a team of graphic designs and engineers for one simple goal – to create a set of form buttons that had all the style of their image-counterparts but didn’t actually contain any (really..a whole team? Yipes). The benefit of this is that they created visually appealing buttons through CSS and could thus offer users a fast homepage experience regardless of whether they were browsing using broadband, 3G or something slower. You don’t need CSS3 or any specific next-gen features in your browser to make these buttons work which is why they fascinated me when I read about them. This tutorial will teach you how to re-recreate the Google image-less buttons and it’s certainly worth checking out.

How to Create an Image Gallery with easily Switchable Views

Renowned developer Soh Tanaka provides this slick and very easy to learn technique for offering your users a variety of “switchable” views for your image galleries. It effectively allows you to choose whether you want to see images as a list with detailed information, as a gallery of just images or as a list of pure links. Putting the choice of view style in the hands of you users is a very powerful tool and this tutorial will teach you exactly how to implement it. Recommended reading.

An Animated Sharing-Bar that includes a 3D Carousel Effect

Sharing features are important for just about any blog, but in a lot of cases you’ll find site-owners using the same boring layout and UI to display theirs (no comment on mine!)– this is usually some variation of a row of icons, but wouldn’t it be interesting if we spiced that up a little?. This excellent tutorial from TutorialZine harnesses the power of 3D Carousels to display share buttons in a way that definitely catches your attention with both animation and reflection effects through into the mix thanks to some jQuery. A good read.

Facebook Style Footer Admin Panel with CSS and jQuery

Bottom navigation bars are becoming a trend with Facebook, MySpace and now the Wibiya toolbar offering users a consistent way to interact with a site. This excellent tutorial will teach you how to implement your own Footer Admin Panel and it’s very comprehensive.

How to use the Sliding-Doors Technique to create buttons using Sprites

Image Sprites are a great way to decrease the number of images your page needs to download, but did you know that there’s an easy way to use sprites to create buttons of any length for your site?. I’ve had to deal with this problem lots of times, and let me tell you guys – there is nothing worse than having to constrict the text you use in a button just because you don’t want to create a static image for it and your background image isn’t long enough to fit behind. Well..perhaps herpes, but I’m trying to be serious here. This great tutorial shows you how you can create buttons of any size using the same Sprite image with all the bells and whistles you need. A recommended bookmark.

jQuery Mega-Menu with slide-down effects

Mega-menu’s offer a richer navigation experience, allowing developers and site-owners to offer users a much more in-depth view of the pages available on a site. Where previously a site-map may be used for this purpose, we’re now finding that a lot of this content can be neatly categorized and placed in a Mega-Menu instead.  This excellent tutorial will show you exactly how to add a slick mega-menu to your site in no time.

"border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="168" alt="image" src="http://addyosmani.com/blog/wp-content/uploads/2010/01/image_thumb4.png" width="454" border="0" />

jQuery Fly-To-Basket Effect for Online Stores

The Fly-to-basket effect was something I first saw done in Flash a few years ago and now it’s available in jQuery with all it’s cross-browser compatible glory. This is an excellent example of how to make your user interface feel more interactive and the effect is surprisingly easy to achieve. This effect has been popping up on quite a few sites recently and I’m sure that the code-samples will come in useful for anyone currently thinking of adding this to their site. For a comprehensive tutorial, hit the link above.

Fancy Quotes using jQuery, CSS and Ajax

This is an excellent tutorial that will show you how to provide your users a way to scroll through a large list of content without having to click through any scrollbars at all – mouse movements control most of the UI. Admittedly, it can take a few moments to get used to the interface, but I could easily imagine it being used to rate or view all sorts of content. Everything from the latest tweets about Britney Spears latest wig to financial stock tips – This a UI that minimizes necessary interaction and maximises the content that can be displayed in a very small space. A+ in my books.

GivaLabs iButtons – a different way of displaying your checkbox

Whilst Giva aren’t the first group to try creating a “switch-like” alternative to the standard checkbox, they have turned it into something of an art, including animations of all sorts into the mix and in general making the element appear a lot more interactive than previous iterations. Switches aren’t for everyone, but these examples are worth looking at if from a UI elements perspective if nothing else. Recommended reading.

jQuery Impromptu – A Sleek, light-weight and simple way to add user-prompts

What I like about Impromptu is that it was build from the ground-up specifically for the purpose of providing developers with a sleek, easy way to display user prompts. Prompts are treated in the same way that JavaScript alerts are and you can define all of the mark-up for your prompt within jQuery, without needing to store it in a hidden div on some other part of the page. It’s an elegant solution and one I would certainly recommend to anyone developing Rich jQuery Applications.

NiceForms – Easy Form Skinning for the masses

NF is a nice alternative to using jQuery UI and ThemeRoller to skin your everyday forms. It’s relatively light-weight and allows you to easily skin an entire form using just JavaScript and some CSS without needing to do a lot of manual work to add the right class names to all your elements. One of the benefit’s it offers are beautified skinning of the radio, checkbox, select and input field elements and it helps you do this with little pain. I’d definitely recommend checking this out.

A Very Simple Change to your Layout – Fade in and Fade-out effects for main page icons

Fade-in and fade-out effects take less than 5 minutes to add to an image using jQuery, but from a user appreciation perspective, they’re fantastic. Sure, you’re not handing them a bucket of money, but users do notice things like animation effects on web-pages and icons are a perfect place where hover/fades are suitable. They don’t constrict the page or any functionality, gracefully degrade and are the type of eye-candy that can help your design pop-out.

A Colorful Accordion with Bounce Effects

I’m not usually a big fan of Accordions because in a lot of cases I see them being used incorrectly. ie. “filling that spot” to the side of the page where developers replicate their top-navigation because they have nothing else to put there. My word..some people deserve to be chased into busy traffic. Anyway, there are a lot more intuitive ways of displaying navigational content so why am I including an accordion on this list you may ask. Well, to be honest it’s because these developers included a few very small, very subtle changes in this accordion such as the inclusion of animated bounce effects and a varying colour scheme which easily distinguishes every top-level category in a way other accordions sometimes fail to. Recommended for fans of the accordion.

Preface: Chris Coyier, of CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn’t been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author – my original online source didn’t include any mention of him (or any author for that matter) so I had rather foolishly gone ahead with the use of them without investing more time into researching who put them up. This revised version of the article gives full credit to Chris who is indeed the man that gave the original presentation and was kind enough to give his permission for his slides to be used. I and this article would like to thank him for being the main inspiration behind this topic.

Having viewed Chris’s presentation, I thought I’d write a post around it to help my readers see how jQuery helps us to extend CSS in ways that make our jobs a whole lot easier. I’ve always thought that jQuery was extraordinary framework – allowing both web developers and designers an easy way to harness the full visual capabilities of JavaScript. One of the nicest advantages of jQuery has been ability to extend CSS beyond what was previously capable with simple mark-up alone. In this post, I’m going to show you how to use jQuery to fix cross browser compatibility issues, solve some shortcomings with CSS, do things CSS just can’t do on it’s own and we’ll finally also go through some real-world problems that will be useful to both those new to the framework and those coders who’ve been using it for a while. I hope you find it helpful!.

Before we leap in, let’s take a look at why jQuery has come to be the most widely adopted of JavaScript frameworks. First, it’s extremely designer friendly. In Chris’s slide below you’ll see some standard CSS mark-up – hover conditions, list elements – defining styles is very much a static process, but jQuery allows you to easily and instantly add or remove classes, conditions, functions and more to any element on your page so that it takes CSS to the next level – interactivity. jQuery also has a very short learning curve (which as some of us know) has meant that creating effects like boxes sliding up or down a page child’s play.

Selectors and Pseudo Selectors

Selectors are one of the most important aspects of the jQuery library – these such selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. Below you’ll see that an example of where in the past we would have used CSS selectors to define some styling for say, an input element.

jQuery allows us to take even further control of this, providing methods where you can define custom selectors of your own, or use powerful pseudo selectors such as : odd, :button, :submit or :reset to select elements you wish to style. What this means is that at the end of the day, you have access to (or the ability to create access to) any element in the DOM via any number of conditions you want it to satisfy.

Transparency

jQuery has also made Opacity (or Transparency) more easy to implement than ever. Opacity is an effect whereby you set the visibility of an element to be a percentage or fraction of what it originally was – in design, this is often used to show that an element is inactive or to allow you to see through it. In the past, it was necessary to code up a special Opacity case for IE8, IE5-7, Safari, Netscape and the list went on. It was frustrating for developers because even at their best, these custom cases didn’t always work. That’s where we bring in jQuery…

jQuery’s support for transparency is so broad, that all you need to do to add opacity effects to any element in your page is use a selector for the element followed by .css(“opacity”, “opacity-value”); It really is that straight-forward.

Hover

Next, let’s take a look at the hover class. I remember that years ago, you could probably get away with using the simple css :hover selector to add hover effects to an element, but you would always run into problems with older browsers not being able to use this correctly. Now before anyone leaps in and says.. Well.. nobody these days has an old browser, you might be right, but don’t forget about that Mobile Web Browsers. Many of these browsers currently used in all sorts of Mobile devices don’t fully support the entire CSS 1/2 specification, but using jQuery can provide us with access to the features of them than can make ‘hover’ work as expected.

With jQuery, all you need to do to add hover classes to any element on your page is define a function as follows $(selector).hover { function for mouseOver, function for mouseOut}. Your mouseOver function can easily attach a class that highlights the element or perhaps underlines it while your mouseOver event would remove this class taking the element back to it’s default state. No more having to worry about IE not supporting the effect we’re trying to achieve!

Animation

For anyone that’s ever seen some of my CoverFlow work in JavaScript over the years, you’ll know that it can sometimes take a while to create impressive effects using JavaScript if you’re writing them from scratch. You don’t have the Tweening tools available to you in many production quality animation systems and much of your work is going to be manual. You’ve got to consider how the effect is going to look using your default CSS, whether it’s going to slow your browser down to a halt when all your styling’s done, if it’ll work in all browsers but..jQuery takes a lot of that pain right away.

With it’s built-in functions like fadeIn(), slideDown() and more, it’s never been easier to add simple animated effects to you webpages easily. jQuery even comes with a special animate() function that lets you chain together special effects so things that I would have had nightmares about (like having a logo from the top of a page, adding and removing CSS classes every second or two to create complex effects or even just making an icon bounce) are now relatively easy to get done in a few minutes.

In this slide you can see an example of where jQuery can be truly powerful – we have a block of text in a paragraph which we need to constrain to a specific width so that it doesn’t break our site’s template. This piece of text could just be a list that would look better in it’s original form rather than having a few line breaks split it up, so how can jQuery help me come up with a solution to my problem?.

Well, let’s use hover! – if I were to make it so that when someone hovers over the paragraph it’ll set itself to the front of the page and expand, they’ll be able to read it without breaking my template. Just as easily, when they mouseOut, I can simply set the width of the paragraph back to what it was before and my page will still work fine without any problems at all. A perfect example of how a nice UI update can be achieved with minimal code and the amazing jQuery framework.

Grids

Next lets take a look at Grids – Grids can contain all sorts of information from gallery thumbnails to previews of pieces of text from a document. A perfect example of the kind of content you might want to fit into the below layout is if you have a Blog or Publishing site where users are posting new articles or stories every day (even Tweets). You might want a way of showing readers a preview of content past just the title and what better way to display it in a compact form other than a grid?

The problem with grids are that they can be difficult – when you’re not dealing with tabular data and your content has text of a length that can vary, you need to think of an intelligent way to make your layout shape around the data so that it still looks the way you want it to.

If we try to solve this problem using just CSS, it’s going to take us hours because as you can see below, simply defining one class for our grid entry isn’t going to solve our problem. We *could* do something on the server side such as limiting the amount of text that’s output, but what if we wanted to let the user expand the entry so they can read all of the preview text or we wanted to display a complete sentence? A UI Solution would be called for and as CSS is going to cause us some problems, let’s see if we can come up with something more intelligent using jQuery next..

With jQuery, we can set specific CSS rules for border cases, text that makes our preview element longer than the other entries, we can turn our entire DIV into a clickable object and to top if off we can also add some nice opacity hover effects to make it look that extra bit professional. We can achieve all of these using a few simple checks for height, a few css rules and some basic jQuery functions. For the full code samples, please click on the slide to expand.

Zebra Striping

Zebra Striping is a design technique that will be familiar to anyone that’s ever used iTunes – it’s an aesthetically pleasing way of displaying your information because it allows the reader to neatly separate rows of data in their mind.

The problem with Zebra striping is that it usually requires a lot of manual work, whether you decide to use the dd and :even selectors or not. Stylesheets, whether they be on the web via CSS or in an application such as Adobe InDesign are there to control the visual properties of elements contained within a document. And while CSS’s selectors allow you to specify which document elements should have which styles applied, the pure-CSS solution to Zebra Striping requires the author to apply the appropriate class (either even or odd) to at least half of the rows in a table.

While this isn’t a problem if the table contains only a few rows, copying and pasting can get old very quickly when the table contains tens or hundreds of rows. This problem can be avoided when the table is generated on the server side, because modifications to the table’s markup need only the editing of a few lines of code. Unfortunately, not every web page is built by a server-side application, and even if you are creating a web app, it is frequently desirable to off-load layout processing to the client through CSS and JavaScript – so let’s see how jQuery can make Zebra striping easy for everyone.

Rather than tediously and manually binding CSS classes to the appropriate rows, we can instead use a little jQuery to go through the table and apply CSS styles for us.

Let’s take a look at how this can be achieved:

1. Obtain a reference to the table that we want to add stripes to.
2. With that in hand, drill down into the table’s child elements to find all the <tr>s that are contained within <tbody> elements.
3. Loop through the <td>s and apply the appropriate styling (which is determined by the location of this <tr> in the table).
Season to taste.

A-List-Apart has an excellent demo of this that reproduces the iTunes Zebra Striping Effect. The source code to their script can be found here. In the below example, Zebra Striping can be extended by adding hover classes for specific columns or rows.

We can take that example one step further by using a selector which checks to see if a particular row contains a specific term. This Client-side search doesn’t need Ajax or any server-side code to work and within one line of jQuery we can easily find and highlight the row we’re looking for.

A plugin that I’ve personally found useful in the past is the jQuery TableSorter by Christian Bach. It’s very easy to integrate into both HTML, Adobe AIR and PHP Applications and even includes some really great Sorting options too. You can check it out over at http://www.tablesorter.com/docs

Loading After Loading

One of the issues that users regularly experience is having to wait for their page to fully load up Flash Video Players – we’ve all had to deal with this crap before. Some sites, rather than automatically loading up a video, will instead display a thumbnail or preview image in the Player to speed things up, but if you have to wait for Flash to initialize it’s still going to take some of your time. jQuery allows us to do this a little more intelligently. Rather than loading up multimedia when the page first loads, just display the preview image in a div (without the Player loaded). If a user decided they want to watch the video, you can easily load up the Flash Video Player page via jQuery’s .load() function so that if they would like to watch it..they will, but if they don’t, they’ll have a much faster and smoother experience browsing through the rest of your site.

Controlling Outside Content

CSS is a wonderful tool for designing, but what if you want to control the content that you’ve styled up outside of pure CSS definitions?. That’s a problem  – CSS doesn’t allow you to dynamically display content when other actions occur in your page such as a user entering in their password or credit-card details. This is where some really simply jQuery logic can add more power to your interface.  In the example below we want to display a voucher code box when a user clicks on “Add a coupon”. Because CSS doesn’t allow us to do this..

we simply do it with some JavaScript. Notice how in just two lines of code we’ve managed to enrich our shopping cart in less than 30 seconds. How awesome is that?

To sum it up, jQuery is a CSS fan’s dream – it provides you with a simple, elegant way to add another level of interaction to your pages without having to waste your time debugging too many quirks with our age-old friend, JavaScript. On many occasions, it’s helped me to pump out impressive interactive web-pages that not only impressed my clients….. they impressed me too, because for many years it wasn’t possible to do the things it’s enabled us to without taking days. So as we welcome in the new year, I’d like to take my hat off to jQuery – thank you for making my life easier. Once again, my thanks to Chris Coyier for his excellent presentation slides

In today’s post, I thought it might be nice to hand-pick some of my favourite sites for design inspiration. Many of these sites take web design to the next-level featuring unique graphics concepts, excellent typography and a clean layout that’s memorable. Learning from other designers is an excellent way for you to charge up your creative batteries and I hope this post gives you a few ideas to help with your own projects!

Hero for Hire

Four 24

Storenvy

SiteCake

MotionSpire

QuaffsLabs

NewWorkCity

RadiumLabs

Elmwood Design

ASOS Plc

David Massiani

NameOurBaby

SilverBackApp

GetMeFast

Riot Industries

PeepNote

Traffik

Spinen

NarfStuff Portfolio

HyperXLocal

Creative Outsourcing

HowHost

YazSoft

Serj.ca

Nerve Music

Voices

TeaRound

365 Days of Astronomy

BlogFullBliss

Villager-Kent

Hey all. In today’s post I’m going to show you how to create a few simple yet impressive animation effects using WebKit CSS and some JavaScript. Webkit (the rendering engine that powers both Safari and Google Chrome) supports a few advanced animation features which have yet to make their way into FireFox or IE, but it’s really exciting getting to see just what’s capable with it animation-wise. For anyone that enjoyed reading my 3D Wall post, this is going to be a treat.

WebKit animation is especially of interest given that it’s a lot easier to create powerful animations in it using just CSS than with any other browser. It’s also really interesting because Mozilla are pondering switching over to them as their rendering engine of choice. Many of the Webkit-specific animation effects in today’s post can be rendered successfully using either jQuery or plain-JavaScript, but for the sake of simplicity today’s post is going to use the latter.

Quick note: The demos in this article are going to use WebKit for all of the rendering. If you are currently using FireFox or IE and would prefer not to install another browser, here’s a light, portable version of WebKit that I’ve put together than you can download for testing WebKit related projects easily. It’s only around 10mb in size and has been tested with both our demos for today, so feel free to grab it if you need it.

To get started with Webkit animation, let’s take a look at a very simple example of a bounce effect.

A Bounce effect is a relatively easy effect to achieve as all that’s required to get it working is an object, the two points you want to bounce that object between and the code to do the bounce itself. In Webkit, the first thing we do to create a bounce effect is define the range points as follows:

  @-webkit-keyframes bounce {  from {    left: 0px;  }  to {    left: 200px;  } }  

Next, we use a Webkit Keyframes block which defines the styles for the animation and the duration for which the animation lasts:

  div { 

-webkit-animation-name: bounce; 

-webkit-animation-duration: 4s; 

-webkit-animation-iteration-count: 10; 

-webkit-animation-direction: alternate;

}  

The final product we get looks like this. Next, let’s do something a little more advanced using JavaScript.

In the example below (see demo here in Chrome or Safari) you can see a selection of leaves falling down a window which look pretty slick. Even though the entire effect is achieved using JavaScript, it still looks just as good as if it were created using Flash.

The effect itself is initialized by creating a loop for the number of leaves you want to generate and then calling the createLeaf() function as follows:

The initialization step:

function init()
{
    /* Get a reference to the element that will contain the leaves */
    var container = document.getElementById('leafContainer');
    /* Fill the empty container with new leaves */
    for (var i = 0; i < NUMBER_OF_LEAVES; i++)
    {
        container.appendChild(createALeaf());
    }
}

Next, let’s define a function to generate a random number between two ranges for our leaf positioning:

//Receives the lowest and highest values of a range and returns a random 

//integer that falls within that range.
function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

And finally the step to create a new leaf:

function createALeaf()
{
    /* Start by creating a wrapper div, and an empty img element */
    var leafDiv = document.createElement('div');
    var image = document.createElement('img');

    /* Randomly choose a leaf image and assign it to the newly created element */
    image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';

    leafDiv.style.top = "-100px";

    /* Position the leaf at a random location along the screen */
    leafDiv.style.left = pixelValue(randomInteger(0, 500));

    /* Randomly choose a spin animation */
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 

'counterclockwiseSpinAndFlip';

    /* Set the -webkit-animation-name property with these values */
    leafDiv.style.webkitAnimationName = 'fade, drop';
    image.style.webkitAnimationName = spinAnimationName;

    /* Figure out a random duration for the fade and drop animations */
    var fadeAndDropDuration = durationValue(randomFloat(5, 11));

    /* Figure out another random duration for the spin animation */
    var spinDuration = durationValue(randomFloat(4, 8));
    /* Set the -webkit-animation-duration property with these values */
    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + 

fadeAndDropDuration;

    var leafDelay = durationValue(randomFloat(0, 5));
    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;

    image.style.webkitAnimationDuration = spinDuration;

    // add the <img> to the <div>
    leafDiv.appendChild(image);

    /* Return this img element so it can be added to the document */
    return leafDiv;
}

and that’s it!. Here’s the final product.

It’s also possible to create Webkit animation effects without needing to use any JavaScript at all. You may not have as much control over the effects, but you can still make something that’s equally as effective. Let’s take a look at the Snow-flake effect.

To create this, first let’s define some structure for our snow-flakes and the tree in the backdrop.

<div id="container">

<div id="snow" class="snow">

<!– Draw snowflakes without using images! –>

<div class="snowflake f1">&#10053;</div>

<div class="snowflake f2">&#10052;</div>

<div class="snowflake f3">&#10053;</div>

<div class="snowflake f4">&#10052;</div>

</div>

<div id="ground"></div>

</div>

Next, let’s define the WebKit CSS for the animation effects. These include a fade effect, spin effect and fall effects. The best part about animation in WebKit is that you can easily define powerful effects using simple commands such as from –> to (see fall below). It’s also really simple to add fade effects using just the opacity parameter (see fade).

@-webkit-keyframes fade{

0% { opacity: 0; }

10% { opacity: 0.8; }

100% { opacity: 0; }

}

@-webkit-keyframes fall{

from {top: 10px;}

to {top: 470px;}

}

@-webkit-keyframes accumulate{

from {height: 0px; opacity: 0}

to {height: 20px; opacity: .75;}

}

The spin effect is created by defining a Webkit rotate transformation at a given angle as follows:

@-webkit-keyframes spin{

0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}

100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}

}

Next, we define an animation length for each of the snowflakes as well as initial positioning details as follows:

.snowflake.f1 {

left: 40px;

-webkit-animation-duration: 5s;

/* set duration individually */

}

.snowflake.f2 {

font-size: 1.8em;

left: 120px;

-webkit-animation-duration: 7s;

}

.snowflake.f3 {

left: 200px;

-webkit-animation-duration: 8s;

}

.snowflake.f4 {

font-size: 1.5em;

left: 280px;

-webkit-animation-duration: 6s;

}

Finally, we setup the animation by telling Webkit what effects we want to use, the iteration behaviour for the animation and finally the direction we wish our effects to take.

#snow div {

position: absolute;

top: -40px;

-webkit-animation-name: fall, fade, spin;

-webkit-animation-iteration-count: infinite; /* use 0 to infinite */

-webkit-animation-direction: normal; /* default is normal. use ‘alternate’ to reverse direction */

-webkit-animation-timing-function: ease-in;

}

WebKit transforms and Webkit animation are an amazing step-forward in the progress towards in-browser, flash-less animation and this is definitely an area to watch for the future. I hope this article has given you all a little inspiration for your projects – feel free to let me know what you think in the comments!. Thanks.

In today’s post I’m going to share 20 jQuery Plugins that I think could really improve your user interface in just a few minutes. Some of them require a little more customization or integration than others, but on the whole, the plugins in this post will hopefully give you the inspiration and implementations you need to give your projects that little extra something.

jQuery Plugin – Feature List

Simple and easy creation of an interactive "Featured Items" widget …

jQuery Plugin – Sexy Alert Box

Sexy Alert Box is a “sexy” clone of classic Javascript alert …

jQuery Plugin – Facebook like Autosuggestion

Facebook like Autosuggestion user search with jQuery, Ajax and PHP …

jQuery Plugin – Horizontal Tooltips Menu

A horizontal menu with tooltip that slides across the menu panel …

 jQuery Plugin – Sexy Lightbox

Sexy Lightbox is a more lightweight and sexier clone of the classic Lightbox. It was constructed thinking about web designers, easy installation and use …

jQuery Plugin – Simple Page Peel Effect

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath …

 jQuery Plugin – Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website …

 jQuery Plugin – Facebook Style Alert Confirm Box

This shows you how to implement a facebook style alert box …

 jQuery Plugin – Create an Interactive, Filterable Portfolio

How to create an interactive portfolio in jQuery that looks like it was made in Flash …

 jQuery Plugin – Favorite Rating

This tutorial shows you how to implement a "Show the love" rating system like amypink.com …

 jQuery Plugin – Coda Bubble

This plugin can be used to create multiple pop-ups Coda Bubble style …

 jQuery Plugin – Search & Share

Search and Share makes highlighting text a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and present a variety of options accordingly …

 jQuery Plugin – Simply Scroll

simplyScroll is a jQuery plugin that can animate (scroll) a set of elements either automatically or manually, horizontally or vertically …

 jQuery Plugin – Side Navigation Tooltip / Popup Bubble

A tooltip / popup bubble using jQuery …

jQuery Plugin – Color Changing Text and Backgrounds

Here’s a quick and easy way to cycle between multiple colors smoothly. Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors …

 jQuery Plugin – Dance Floor

When you click on a product, the product image will zoom out to see a featured close-up shot and a description …

 jQuery Plugin – Horizontal Animated Menu

This tutorial teaches you how to build a basic horizontal animated menu using jQuery that shows more information about the link when mouse is moved over it …

 jQuery Plugin – Editable Select

Transforms a select list to a text input so you can edit the value directly, or choose a value from the list options …

 jQuery Plugin – Create Good Looking Floating Menu

This tutorial will show you how to create a horizontal menu with floating effect by using jquery.easing and jquery animate function …

In today’s post, I’m going to be giving away a new plugin for jQuery that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

The background-story

A while back, I used to work for an Image-Search company developing Flash image browsers for the company’s Front-end. One of the reasons we had decided to opt for Flash back then was simple – we wanted to provide our clients with some eye-candy that could both demonstrate our technology working and our knowledge of smart user interfaces. Being fluent in both JavaScript frameworks and AS3, I knew how to code up the UI in either language, but because the quality of such effects wasn’t up to par in JavaScript back then, we had to go for Flash.

With jQuery’s optimization of animation in javascript over the past few years, it’s finally possible for us to create Flash-like interfaces using just JavaScript. So, I thought it would be nice to demonstrate a jQuery plugin that will allow you to achieve the same effects we used to use without needing any Flash at all. Let’s see how it works!.

Let’s take a look at the code

Impressive animation effects can be achieved in jQuery with just a few short lines of code and this plugin is no different. What we want to achieve today is increasing the visible size of a thumbnail image from something smaller to something larger whilst also animating the title/caption of it. Rather than using multiple images for this process, what we are going to do in this post is use the same image for both the thumbnail and the “zoom”. To do this we need to ensure that all of our images are larger than the default size of our thumbnails (and optimally, a little larger than our zoomed in images). CSS Bi-cubic interpolation is used to keep everything looking clean.

Lets define some plugin variables with the head of our new code

$.fn.Zoomer=function(b){

var c=$.extend({

speedView:200,    //The speed of the main animation

speedRemove:400,  //The speed at which we remove the main animation

altAnim:false,  //Whether we animate our alt tags or not

speedTitle:400, //The speed of our title animation

debug:false},b);  //A quick switch between debug mode

var d=$.extend(c,b);

Now lets add two CSS classes for our code: The first is the default view for a thumbnail and the second is a class we attach to a thumbnail when someone hovers over it

ul.thumb li img {

width: 100px;

height: 100px;

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;left: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

ul.thumb li img.hover

{

margin-top:15px;

background:url(thumb_bg.png) no-repeat center center;

border: none;

}

Next, lets take a look at the code required to animate the image from it’s default size of 100px X 100px to a larger size.

Whilst we change over from our default class to the hover class, the effect we see will be a “grow” with the final state including a nice glowing border to it which is achieved using an image from the hover class above.

$(this).find(’img’).addClass("hover").stop().animate(

{marginTop:’-110px’,

marginLeft:’110px’,

top:’50%’,

left:’50%’,

width:’175px’,

height:’181px’,

padding:’20px’},d.speedView);

To make the effect look even better we want to animate the swinging in of our Title for the thumbnail. This is achieved as follows.

$(’.title’).animate({

marginLeft:’-42px’,

marginTop:’90px’},

d.speedTitle).css({’z-index’:'10′,’position’:'absolute’,'float’:'left’})}}}

We will also need to write some code to remove the effect elegantly when a user is no longer hovering over the current element.

$(this).find(’img’).removeClass("hover").stop().animate({

marginTop:’0′,

marginLeft:’0′,

top:’0′,

left:’0′,

width:’100px’,

height:’100px’,

padding:’5px’},d.speedRemove);

and for the title..

$(this).find(’.title’).remove()})}}})

How to download and include the plugin in your page

To include this plugin in your page and initialize it, simply define your list of images as follows:

<ul class="thumb">
                <li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
                <li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
                <li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>

</ul>

and then call the script:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(’ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>

and that’s it!. You can download the tutorial pack or view a demo below. I hope this post was helpful.

This post will give you 11 easy steps that are going to instantly improve your jQuery application’s performance. There isn’t anything that difficult in here and almost anyone can apply these methods to their project. If you’ve got a few extra tips you would like to share, please feel free to include them in the comments section. We’d love to hear from you!.

Optimization is something that can help the users of your application achieve actions inside of it much quicker than they may currently be able to. Looking for a way to make that animated drag look smoother? Perhaps you’re accessing it using the least-optimal path. That navigation menu working slow? Perhaps you just need to get rid of some of the waste in your calls. If you feel like your script or jQuery app could use a little performance optimization, read on because this article is sure to help.

Before we get started I would like for everyone to remember that you should only strive for optimization when there is a measured need for optimization. Changing neat code to something you or your developers may not be used to is something I would not advise unless you are all well experienced with jQuery and JavaScript syntax. jQuery is still blazingly fast without any performance improvements added (in a lot of cases). Most often, one cannot tell without resorting to metrics or viewing source if it’s the server that delivered these bits in the page, or client-side JavaScript.

Some of the tips that in this article will seem straight-forward to some, but I think that giving ourselves a “refresher” is always helpful. I would also like to remind everyone that the man behind jQuery itself (John Resig) strongly recommends that your jQuery applications be heavily performance tested. There are some amazing articles on how to performance test your apps including this one from Resig on performance testing (which comes with a free plugin), this one on Ajax/JSON testing within Visual Studio and Paul Irish’s interesting presentation on Anti-patterns in performance and compression here. If you are going to try improving the performance of your application, guage how long it takes for core functions to be executed, discover what is causing any slow-down (is it the server? is the browser? is it the rendering engine, or is it my code?) and then set out a plan for how you are going to improve your application.

With that in mind, let us begin!.

jQuery Performance Tip 1: Always Descend From an #id

The fastest selector in jQuery is the ID selector ($('#someid')). This is because it maps directly to a native JavaScript method, getElementById().

Selecting Single Elements

<div id="content">
	<form method="post" action="/">
		<h2>Traffic Light</h2>
		<ul id="traffic_light">
			<li><input type="radio" class="on" name="light" 

                          value="red" /> Red</li>
			<li><input type="radio" class="off" name="light"

                       value="yellow" /> Yellow</li>
			<li><input type="radio" class="off" name="light" 

                            value="green" /> Green</li>
		</ul>
		<input class="button" id="traffic_button" type="submit" 

              value="Go" />
	</form>
</div>

Selecting the button like this is slower:

var traffic_button = $('#content .button');

Instead, select the button directly:

var traffic_button = $('#traffic_button');

Selecting Multiple Elements

Once we start talking about selecting multiple elements, we are really talking about DOM traversal and looping, something that is slow.

To minimize the performance hit, always descend from the closest parent ID:

var traffic_lights = $('#traffic_light input');

jQuery Performance Tip 2: Use Tags Before Classes

The second fastest selector in jQuery is the Tag selector ($('head')). Again, this is because it maps to a native JavaScript method, getElementsByTagName().

<div id="content">
	<form method="post" action="/">
		<h2>Traffic Light</h2>
		<ul id="traffic_light">
			<li><input type="radio" class="on" name="light" 

                             value="red" /> Red</li>
			<li><input type="radio" class="off" name="light" 

                        value="yellow" /> Yellow</li>
			<li><input type="radio" class="off" name="light" 

                     value="green" /> Green</li>
		</ul>
		<input class="button" id="traffic_button" type="submit" 

               value="Go" />
	</form>
</div>

Always prefix a class with a tag name (and remember to descend from an ID):

var active_light = $('#traffic_light input.on');

Note: The class selector is among the slowest selectors in jQuery; in IE it loops through the entire DOM. Avoid using it whenever possible.

Never prefix an ID with a tag name. For example, this is slow because it will loop through all <div> elements looking for the ‘content’ ID:

var content = $('div#content');

Along the same lines, it is redundant to descend from multiple IDs:

var traffic_light = $('#content #traffic_light');

jQuery Performance Tip 3: Cache jQuery Objects

Get in the habit of saving your jQuery objects to a variable (much like our examples above).

For example, never (eeeehhhhver) do this:

$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

Instead, first save the object to a local variable, and continue your operations:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

Tip: Since we want to remember that our local variable is a jQuery wrapped set, we are using $ as a prefix.

Remember, never repeat a jQuery selection operation more than once in your application.

Bonus Tip – Storing jQuery results for later

If you intend to use the jQuery result object(s) in another part of your program, or should your function execute more than once, cache it in an object with a global scope.

By defining a global container with jQuery results, we can reference them from within other functions:

// Define an object in the global scope (i.e. the window object)
window.$my =
{
	// Initialize all the queries you want to use more than once
	head : $('head'),
	traffic_light : $('#traffic_light'),
	traffic_button : $('#traffic_button')
};

function do_something()
{
	// Now you can reference the stored results and manipulate them
	var script = document.createElement('script');
	$my.head.append(script);

	// When working inside functions, continue to save jQuery results
	// to your global container.
	$my.cool_results = $('#some_ul li');
	$my.other_results = $('#some_table td');

	// Use the global functions as you would a normal jQuery result
	$my.other_results.css('border-color', 'red');
	$my.traffic_light.css('border-color', 'green');
}

jQuery Performance Tip 4: Harness the Power of Chaining

The previous example can also be accomplished like this:

var $active_light = $('#traffic_light input.on');

$active_light.bind('click', 

 function(){...})
	.css('border', '3px dashed yellow')
	.css('background-color', 'orange')
	.fadeIn('slow');

This allows us to write less code, making our JavaScript more lightweight.

jQuery Performance Tip 5:  Use Sub-queries

jQuery allows us to run additional selector operations on a wrapped set. This reduces performance overhead on subsequent selections since we already grabbed and stored the parent object in a local variable.

<div id="content">
	<form method="post" action="/">
		<h2>Traffic Light</h2>
		<ul id="traffic_light">
			<li><input type="radio" class="on" name="light" 

                        value="red" /> Red</li>
			<li><input type="radio" class="off" name="light" 

                       value="yellow" /> Yellow</li>
			<li><input type="radio" class="off" name="light" 

                   value="green" /> Green</li>
		</ul>
		<input class="button" id="traffic_button" type="submit" value="Go" />
	</form>
</div>

For example, we can leverage sub-queries to grab the active and inactive lights and cache them for later manipulation.

var $traffic_light = $('#traffic_light'),
	$active_light = $traffic_light.find('input.on'),
	$inactive_lights = $traffic_light.find('input.off');

Tip: You can declare multiple local variables by separating them with commas – save those bytes!

jQuery Performance Tip 6: Limit Direct DOM Manipulation

The basic idea here is to create exactly what you need in memory, and then update the DOM. This is not a jQuery best practice, but a must for efficient JavaScript. Direct DOM manipulation is slow.

For example, if you need to dynamically create a list of elements, do not do this:

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'); // jQuery selects our <ul> element

for (var i=0, l=top_100_list.length; i<l; i++)
{
	$mylist.append('<li>' + top_100_list[i] + '</li>');
}

Instead, we want to create the entire set of elements in a string before inserting into the DOM:

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'), // jQuery selects our <ul> element
top_100_li = ""; // This will store our list items

for (var i=0, l=top_100_list.length; i<l; i++)
{
	top_100_li += '<li>' + top_100_list[i] + '</li>';
}

$mylist.html(top_100_li);

Even faster, we should always wrap many elements in a single parent node before insertion:

var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'), // jQuery selects our <ul> element
	top_100_ul = '<ul id="#mylist">'; 

// This will store our entire unordered list

for (var i=0, l=top_100_list.length; i<l; i++)
{
	top_100_ul += '<li>' + top_100_list[i] + '</li>';
}
top_100_ul += '</ul>'; // Close our unordered list

$mylist.replaceWith(top_100_ul);

If you do the above and are still concerned about performance:

• Give jQuery’s clone() method a try. This creates a copy of the node tree, which you can manipulate “off-line” and then insert back in when you are ready.
• Use DOM DocumentFragments. As the creator of jQuery points out, they perform much better than direct DOM manipulation. The idea would be to create what you need (similar to what we did above with a string), and use the jQuery insert or replace methods.

jQuery Performance Tip 7:  Leverage Event Delegation (a.k.a. Bubbling)

Unless told otherwise, every event (e.g. click, mouseover, etc.) in JavaScript “bubbles” up the DOM tree to parent elements. This is incredibly useful when we want many elements (nodes) to call the same function.

Instead of binding an event listener function to many nodes—very inefficient—you can bind it once to their parent, and have it figure out which node triggered the event.

For example, say we are developing a large form with many inputs, and want to toggle a class name when selected.

A binding like this is inefficient:

$('#entryform input).bind('focus', function(){
	$(this).addClass('selected');
}).bind('blur', function(){
	$(this).removeClass('selected');
});

Instead, we should listen for the focus and blur events at the parent level:

$('#entryform).bind('focus', function(e){
	var cell = $(e.target);  

// e.target grabs the node that triggered the event.
	cell.addClass('selected');
}).bind('blur', function(e){
	var cell = $(e.target);
	cell.removeClass('selected');
});

The parent node acts as a dispatcher and can then do work based on what target element triggered the event.

If you find yourself binding one event listener to many elements, you are doing something wrong (and slow).

jQuery Performance Tip 8: Eliminate Query Waste

Although jQuery fails nicely if it does not find any matching elements, it still takes time to look for them. If you have one global JavaScript for your entire site, it may be tempting to throw every one of your jQuery functions into $(document).ready(function(){ // all my glorious code }).

Don’t you dare.

Only run functions that are applicable to the page. The most efficient way to do this is to use inline initialization functions so your template has full control over when and where JavaScript executes.

For example, in your “article” page template, you would include the following code before the body close:

<script type="text/javascript>
mylib.article.init();
</script>
</body>

If your page template includes any variety of modules that may or may not be on the page, or for visual reasons you need them to initialize sooner, you could place the initialization function immediately after the module.

<ul id="traffic_light">
	<li><input type="radio" class="on" name="light" value="red" /> Red</li>
	<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
	<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<script type="text/javascript>
mylib.traffic_light.init();
</script>

Your Global JS library would look something like this:

var mylib =
{
	article_page :
	{
		init : function()
		{
			// Article page specific jQuery functions.
		}
	},
	traffic_light :
	{
		init : function()
		{
			// Traffic light specific jQuery functions.
		}
	}
}

jQuery Performance Tip 9: Defer to $(window).load

There is a temptation among jQuery developers to hook everything into the $(document).ready pseudo event. After all, it is used in most examples you will find.

Although $(document).ready is incredibly useful, it occurs during page render while objects are still downloading. If you notice your page stalling while loading, all those $(document).ready functions could be the reason why.

You can reduce CPU utilization during the page load by binding your jQuery functions to the $(window).load event, which occurs after all objects called by the HTML (including <iframe> content) have downloaded.

$(window).load(function(){
	// jQuery functions to initialize after the page has loaded.
});

Superfluous functionality such as drag and drop, binding visual effects and animations, pre-fetching hidden images, etc., are all good candidates for this technique.

jQuery Performance Tip 10: Compress Your JS

Okay, this isn’t jQuery related, but I had to include it. There is a tendency to make JavaScript functions and variables overly descriptive, which is essential for developers but irrelevant to users.

No more excuses, it’s time to build JS compression into our workflows. Comment the heck out of your code, and run it through a compression tool before launching to production.

Use YUICompressor to squeeze out wasteful bytes from your code. In our experience, it safely compresses JavaScript as small as it can possibly get without a CPU penalty (such as Base62 encoding with Packer).

Tip: For maximum compression in YUICompressor, always declare your variables (e.g. var my_long_variable_name;).

jQuery Performance Tip 11:  Learn the Library!

Print out this jQuery 1.3 cheat sheet, and make it a goal to eventually understand what each function does. If you find yourself repeating yourself repeating, there is probably an easier (and more efficient) way. jQuery 1.4 will hopefully be released right around the corner, but this should prove an excellent resource until then.