21 ANIMATED GIFs?

Call me a silly billy, but wouldn’t this be achievable with no jQuery using animated GIFs as background images to the link? (Dave knows my fondness for the animated GIF.)

posted at 03:54 pm on August 26, 2008 by Bruce Lawson

22 Old school ALA style!

Thanks fo a very detailed practical quality article!

I haven’t looked at it in detail yet, but I know from experience (implementing a fade in/out on text links for the nav on my site) that making the fades behave nicely can be a little bit of a headache (they tend to keep on fading in/out long after your mouse is gone if you pass over a few times in a row…).

I’m surprised some people would complain about the fact that it “doesn’t add anything” in terms of usability and therefor dismiss the whole thing as pointless. This technic doesn’t “remove” anything either… and it sure looks nice… If you think it’s pointless, you must not listen to your clients very carefully… ;)

Thanks Dave, I’ll make sure to go over the details this weekend and see how you’ve implemented it :)

posted at 04:14 pm on August 26, 2008 by Yann B

23 jQuery all the way

Being a long term jQuery user I’d go all the way and make the generateSprites function a jQuery plugin. Would look like the following:

$(‘ul.nav’).sprites(‘current-’, true, 150, ‘slide’);

posted at 04:22 pm on August 26, 2008 by Klaus Hartl

24 CSS Animations

I just remembered all the confusion and hatred that CSS Animations have caused a couple of months ago when they were proposed by Apple.

And here – a whole A List Apart article at length explaining how to implement in a lot of non-semantic Javascript code something, that is a purely design decision and could be done with the above-mentioned technologies in two lines. Sigh!

posted at 04:33 pm on August 26, 2008 by Jakub Nesetril

25 Untitled

The articles states, “The most compact version of jQuery weighs in at 15k.”
But this is only for the minified, g-zipped version which may not be a viable choice for many. Plus the time to decompress must be taken into account.
jQuery’s full size is 97kb.
And in practice, there is little difference between the full version; the minified and g-zipped version; and the packed version. (The last choice created with Dean Edwards Packer)
In all but the full version there is overhead related to decompression.

The creator of jQuery, John Ressig, thoroughly discusses the the trade-offs here:
http://ejohn.org/blog/library-loading-speed/
Also, a recent study by Yahoo surprisingly found that 40-60% of Yahoo!’s users visit with an empty cache.
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
Ressig addresses this issue as well:
“…according to Yahoo’s research on caching, approximately 50% of users will never have the opportunity to have the page contents be cached. Thus, making sure that your page loads quickly both on initial load, and subsequent loads, should be of the utmost importance.”

The article understandably puts the best face possible on the download costs but be aware.

posted at 05:29 pm on August 26, 2008 by Richard Fink

26 For the Prototype/Lowpro people out there

In case anyone cares, I re-wrote the JS as a Lowpro behavior class. It requires Prototype, Lowpro and the Scriptaculous Effects file be included first. It’s here if you want it:

http://farrellit.com/js/navsprites.js

You activate it like this:

Event.addBehavior({
‘.nav’: NavSprites(‘nav’, ‘current-’, 150, ‘slide’)
});

See it in action here:

http://farrellit.com/testing/

Main advantage is that it’s a single event listener using event delegation. I also have a Jquery/Lowpro version but that is a pretty niche group.

posted at 05:32 pm on August 26, 2008 by Daniel Farrell

27 Proper jQuery Optimization

Not to go over this again, but your initial jQuery could be redone in a much cleaner way — sans regex. The current section designation should be attached to the appropriate element as the “current” class, not as an odd hyphenated combination in the parent class. Also, if the page is built dynamically the list will be made in a loop and the class assignment can happen much easier there.

Assuming the “current” class is attached to the list elements, not the parent list:

$(’.nav’).children(‘li’).each(function() {
    if (!$(this).hasClass(‘current’)) {
        $(this).children(“a”).css({backgroundImage:‘none’});
    }
});

posted at 06:06 pm on August 26, 2008 by Michael Thompson

28 Cripes

Sorry for the non-breaking muddles in my post above. Proper code:

$(’.nav’).children(‘li’).each(function() { if (!$(this).hasClass(‘current’)) { $(this).children(“a”).css({backgroundImage:‘none’}); }
});

Also, the reason the submit button can’t be clicked is because the syndication paragraph is jumping over top of it.

posted at 06:09 pm on August 26, 2008 by Michael Thompson