Monday, September 1st, 2008

CSS Sprites2: Return of the JS

Category: CSS, jQuery

In March 2004, Dave Shea wrote about CSS Sprites, and now he is back with CSS Sprites 2. He walks us through using JavaScript to make this all work nicely, and picks jQuery to get ‘er done:

After putting this together piece by piece, we end up with:

javascript

  1. $(document).ready(function(){
  2.  
  3.     // remove link background images since we're re-doing the hover interaction below
  4.     // (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
  5.     // we also want to only remove the image on non-selected nav items, so this is a bit more complicated
  6.     $(".nav").children("li").each(function() {
  7.         var current = "nav current-" + ($(this).attr("class"));
  8.         var parentClass = $(".nav").attr("class");
  9.         if (parentClass != current) {
  10.             $(this).children("a").css({backgroundImage:"none"});
  11.         }
  12.     });
  13.  
  14.  
  15.     // create events for each nav item
  16.     attachNavEvents(".nav", "home");
  17.     attachNavEvents(".nav", "about");
  18.     attachNavEvents(".nav", "services");
  19.     attachNavEvents(".nav", "contact");
  20.  
  21.  
  22.     function attachNavEvents(parent, myClass) {
  23.         $(parent + " ." + myClass).mouseover(function() {
  24.             $(this).append('<div class="nav-' + myClass + '"></div>');
  25.             $("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
  26.         }).mouseout(function() {
  27.             $("div.nav-" + myClass).fadeOut(200, function() {
  28.                 $(this).remove();
  29.             });
  30.         }).mousedown(function() {
  31.             $("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
  32.         }).mouseup(function() {
  33.             $("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
  34.         });
  35.     }
  36. });

Posted by Dion Almaer at 6:41 am
3 Comments

+++--
3.7 rating from 28 votes

3 Comments »

Comments feed TrackBack URI

Alternatively you could use a full CSS solution by using animated GIFs to accomplish the same results. I tested it a few years ago as a proof-of-concept. The only difference is when the page loads, the items will “light up” and “fade” into their regular states. Still, I’d say that’s a rather cool side-effect.

Comment by Andy — September 1, 2008

I remember the big discussion around CSS Animations when the proposal came out. I think monstrosities like this illustrate well, why they are such a good idea and why animations DO belong into CSS.

Comment by zzen — September 1, 2008

nice one. btw: imho, the most interesting effect seems to happen incidentally (on ff3 and safari, both mac): if you hover over an item and drag it outside, it will stay highlighted. afterward, if you hover it again, it will get a nice 3d effect, feels somewhat organic :-)

Comment by bajoran — September 2, 2008

Leave a comment

You must be logged in to post a comment.