Discuss: CSS Sprites2 - It’s JavaScript Time

by Dave Shea

11 The asssumption of knowledge

Javascript as a programming language has been treated like no other. The overall lack of understanding has quickly resulted in enforcing the “cut and paste�? style of programming where you don’t necessarily want to know how and why something works, just as long as it does. It has also resulted in the assumption that one could, for example, use the coding styles learned from CSS or PHP etc. in Javascript. Usually we’d bother to learn a language (and learn it deep, like Douglas Crockford has been saying for years) before using it, but that hasn’t been the case here and it has set the language back quite a lot.

That said, there’s nothing wrong with using jQuery as a gateway into the language. It does, however, put enormous pressure on the gatekeepers who make the tutorials and who dish out “best practices”. Again, I’m not criticizing this article, at all, but it should be noted that a generation of mindless Javascript “programmers” will lead to problems, and in my opinion fixing those problems will make the transition from tables to CSS seem like a walk in the park.

(oh, and your submit button is broken in Safari – there’s a clickable area with a height of only 1px )

posted at 11:02 am on August 26, 2008 by Kari Pätilä

12 jQuery efficiency

Concerning the eas-up that Nic Johnson suggested I admit, Dave Shea, that he optimized “too soon”. However I think also your second snippet can be done more efficient and especially more maintainable. I would transform it into:

var current = $(”.nav”).attr(“class”).replace(/.current-([^ ]+)./, “$1”);
$(”.nav li:not(.”+ current +”) a”).css({backgroundImage:“none”});

Most notably due to the regular expression I use this will work even if your ul.nav has additional classNames. Plus this is a great example for the power of jQuery’s CSS-selectors!

Anyways I really do like your unobstrusive way of creating menus with smooth effects.

posted at 12:36 pm on August 26, 2008 by Christoph Tavan

13 Textile messed my Javascript

Oh, I see that textile messed up thes javascript I just posted. Each dot in the regular [removed]inside the two slashes) is followed by an asterisk * (which textile turned into bold text). The variable called current is then inserted into the jQuery selector using two plus-signs + on each side (which textile turned into underlined text).

posted at 12:45 pm on August 26, 2008 by Christoph Tavan

14

When hovering over the items in the third example I see the items shortly stick out at the bottom in a flash which looks a bit weird. Browser: FF3 Mac OS X.

Yes, when all three examples are viewed together, as they are at the top of the page, there is a brief extra hover at the bottom, just as you describe. But this only occurs at the top, where all three examples are viewed together. The actual examples work fine individually — and that’s how they’d be used.

Small unrelated side note: The submit button for the comment form on ALA cannot be clicked in FF3 and in safari you can ONLY click the 1px white inner border. You may want to fix that.

Thanks for calling that to our attention. It happens only on this article, and it appears to be caused by an unforeseen interaction between our code and Dave’s. We’re looking into it now.

posted at 01:33 pm on August 26, 2008 by Jeffrey Zeldman

15 Small active state behaviour bug

Thanks for a great article Dave. I’m a long time fan.

Just thought I’d point out a small bug. Mouse-down on an item changes it to the active state. If you then drag outside the item, it stays active. In other words, a click-and-drag on an item makes it stay in the active state.

I made a quick fix that seems to work. I just duplicated the line from the mouseup handler to the first line of the mouseout handler. So the mouseout handler looks like this:

mouseout(function() { $(“div.nav-” + myClass + “~~click”).attr(“class”, “nav~~“ + myClass); $(“div.nav-” + myClass).fadeOut(200, function() { $(this).remove(); });
})

posted at 02:54 pm on August 26, 2008 by David Tapper

16 release outside

Small suggestion for improvement: If you click a button and release outside of the navigation, the button will keep it’s pressed state. I now it’s a little nitpick but still: it feels weird.

Apart from that I really enjoyed the article! Well written, easy to understand and a beautifully designed example. That’s what I love ALA for.

posted at 02:54 pm on August 26, 2008 by Reimar Servas

17 Oops my example got mangled

My example above looks broken. Anyway, all I did was to add this line to the beginning of the mouseout handler.

$(“div.nav-” + myClass + “~~click”).attr(“class”, “nav~~“ + myClass);

(How should code blocks be posted? All white-space is mangled and it interferes with Textile.)

@Reimar Servas: Hivemind! =D

posted at 02:58 pm on August 26, 2008 by David Tapper

18 Blurry text

Is the opacity change on P tags really necessary? In Firefox 3 with Cleartype enabled the text is beginning to strain my eyes.

I also notice that the background images sometimes shift ‘out of bounds’ as they begin to animate.

posted at 03:40 pm on August 26, 2008 by Rowan W

19 Untitled

My question would be: what does this add? A visually nice gimmick, but with no added value. Pure CSS or the heavier, kinda exclusive JQuery version? Feels weired to me adding KB and markup to a page without improving, say usability.

posted at 03:43 pm on August 26, 2008 by Florian Schmitt

20 Animated GIF?

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:53 pm on August 26, 2008 by Bruce Lawson