Well, I wouldn't call the standard way to get a portion of the HTML DOM inspected and "applied" only when javascript is off "messy" but I would agree that Richard's solution is much much more elegant (thanks for the pointer, Richard, btw).
Anyway, if you still want to manipulate CSS rules, maybe you could look into jQuery.Rule: http://flesler.blogspot.com/2007/11/jqueryrule.html 2009/11/4 jez9999 <jez9...@gmail.com> > Still feels a little messy to me, and I think it'd be nicer to be able > to access pseudo-classes through jQuery. Although tricky, I believe > it could be implemented by finding the rule using > document.styleSheets? Or is there some technical hurdle that would > make this impossible? > > Best regards, > Jeremy Morton (Jez) > > On Nov 1, 1:55 pm, Julian Aubourg <aubourg.jul...@gmail.com> wrote: > > You could protect your rules with a noscript tag: > > > > <html> > > <head> > > <noscript> > > <style> > > .show { color: red } > > </style> > > </noscript> > > </head> > > <body> > > <span class="show">Hello world</span> > > </body> > > </html> > > > > In this example, the span would only be in red when javascript is off. > > > > 2009/10/31 jez9999 <jez9...@gmail.com> > > > > > 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> > <jquery-dev%2bunsubscr...@googlegroups.com<jquery-dev%252bunsubscr...@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<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.
