1 How long before we start writing CSS in jQuery?

Apologies for the tangential comment, but with jQuery’s support for cross-browser CSS3 selectors, effects library, and other javascript things like variables and so on, how long is it until we’re writing our CSS in jQuery?

I know it seems like a terrible idea at first glance, and there are obvious caveats (speed – though John Resig is testing a new, fast selector engine, JS support, complexity, verbosity etc) but then again.. Variables! Conditionals! Effects!

It does open plenty of doors that spec creators/browser developers aren’t going to be opening any time soon which web designers/devs have been kvetching about for a while – food for thought anyway :)

Anyway, it looks like jQuery (or your framework of choice) techniques are going to be a standard part of the modern web designers arsenal, so it’s nice to see them applied to some of the ‘old faithful’ CSS techniques :)

posted at 03:04 am on August 26, 2008 by Luke Stevens

2 This is another use of animation with jQuery

I have it at http://d7nh.com/. The navigation uses not only fadeIn and fadeOut, but also jQuery animation

It’s nice to have jQuery all around :)

posted at 03:11 am on August 26, 2008 by Dinh Pham

3 CSS mastery

I love the idea of sprites. I really think that using flash to animate things is ineffective in it’s intent, and I don’t think it’s js counter part is much better. I think the reason why flash is not cool is because of the animation. I think others would agree as well.

posted at 04:27 am on August 26, 2008 by Nuovo Labs

4 Some leaner jquery perhaps?

In the section “Initializing in jQuery” you use the code

$(”.nav”).children(“li”).each(function() { $(this).children(“a”).css({backgroundImage:”none”}); });

This could be done more efficiently (and more straight forward if you ask me) with the following:

$(”.nav li a”).css({backgroundImage:”none”});

I may be missing something but the anonymous function to get the second array of children a tags seems a bit much…

Otherwise, awesome article! Thanks, Dave!

posted at 05:08 am on August 26, 2008 by Nic Johnson

5 Flash Alternative

I’ve been using jQuery on every project for about six months now. I’m always surprised by how quickly it renders and how well in runs in IE6. It can even handle some very complex page elements that are typically reserved for Flash. Here’s an example of I put together of IGN’s Flash slideshow, built with jQuery, as an example of its durability. IGN Flash Slideshow in jQuery

posted at 05:18 am on August 26, 2008 by Brad Estey

7 jQuery to rule them all

I am so glad jQuery is becoming more and more used as a flash alternative that I may shed a tear of joy. I’ve been using it for just a few weeks now, but I can already see its power and ease of use in many situations where I would otherwise struggle with complex javascript at the point of giving up. Anyway, thanks for the nice article Mr. Dave.

posted at 06:38 am on August 26, 2008 by Damjan Mozetič

8 Re:

Is this method actually needed (and I am not meaning critical for UX)? And what is this technique’s impact on performance (load time, especially if inexperienced users don’t already use jQuery in their projects)?

No need to answer I guess.

posted at 07:11 am on August 26, 2008 by Jens Meiert

9 small bug

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.

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.

posted at 07:19 am on August 26, 2008 by Marco van Hylckama Vlieg

10 0.9999 Opacity

Is overriding the paragraph opacity necessary? The lack of sub-pixel text rendering is far from pretty. It renders rather jaggy here in both Firefox and Safari. Unacceptably bad.

I saved a copy of the article page and added “p { opacity: 1;}” to the stylesheet to override the 0.9999 to see this bug for myself. I tested in Firefox 3.0 and Safari 3.1.2 on Mac OS 10.5.4 and couldn’t reproduce this.

I also noticed the referenced mezzoblue article is from 2006. Rather old in the non-IE world. If anyone can reproduce this and thinks any flickering is worse than bad font rendering, please comment.

If this bug does still exist in commonly used browsers, perhaps a bit of runtime JS to workaround those instances is in order rather than a blanket feature downgrade.

P.S. My browsers are also affected by the submit button bug mentioned by Marco. I managed to activate it by tabbing and pressing enter.

posted at 07:24 am on August 26, 2008 by Jason W