Add a no-js class to the body in the html and then, using JavaScript, remove it and add a js class. Use these classes to scope any css rules you want for only the no-js or only the js scenarios. See this article for a similar technique:
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content - Richard On Sat, Oct 31, 2009 at 10:55 AM, jez9999 <jez9...@gmail.com> wrote: > Hi all, > > I have a minor problem with my webpage I'm designing. I'm doing > pulldown menus via a UL, with LIs that have child ULs (the pulldown > menus), where the pulldown menus fade in when you mouseover the parent > LI. So as to degrade gracefully if the browser isn't running > Javascript, I want to use CSS to at least make the child ULs appear > instantly on mouseover of the LI, and disappear on mouse out. I can > do this simply using: > > ul.rootMenu li:hover ul { > visibility: visible; > } > > (where elsewhere I set those child ULs to be hidden by default). > > The minor problem is that when I then apply my 'fade in' effect in > jQuery, I do it using something like this: > > jQuery("ul.rootMenu li").hover( > function(){ // On mouse over > jQuery(this).find("ul").each(function(){ > // In case we're currently animating this list, stop > the animation > immediately. > jQuery(this).stop(true, true); > > var origHeight = jQuery(this).height(); > var origWidth = jQuery(this).width(); > > jQuery(this).css({ > 'visibility' : 'visible', > 'opacity' : 0, > 'width' : origWidth, > 'height' : 0 > }).animate({ > 'opacity' : 1, > 'width' : origWidth, > 'height' : origHeight > }, 100, 'linear'); > > // Only want to do this for the first matched list; > break on the > first iteration. > return false; > }); > }, [...] > > This works well but it causes a kind of flicker or 'double-take' > sometimes when I mouse over in Opera. I'm guessing this is because > Opera's CSS engine immediately causes the menu to instantly popup > (become visislbe) because of the CSS :hover rule applied to the LI, > but then quickly the Javascript kicks in and makes it invisible and > fades it in. What I think I need to do is therefore remove > that :hover rule that I set in CSS via the 'ul.rootMenu li:hover ul' > selector, but of course it's very difficult to access pseudo selectors > in Javascript. So can anyone think of a better way of doing this, or > a way I can remove that 'ul.rootMenu li:hover ul' rule in Javascript? > I know it's difficult but could adding the ability to > manipulate :hover pseudo selector rules, and maybe others too > (:before, :after?) in jQuery be possible? It would be a handy > addition. > > Best regards, > Jeremy Morton (Jez) > > -- > > You received this message because you are subscribed to the Google Groups > "jQuery Development" group. > To post to this group, send email to jquery-...@googlegroups.com. > To unsubscribe from this group, send email to > jquery-dev+unsubscr...@googlegroups.com<jquery-dev%2bunsubscr...@googlegroups.com> > . > For more options, visit this group at > http://groups.google.com/group/jquery-dev?hl=en. > > > -- You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-...@googlegroups.com. To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.
