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>
> > .
> > 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.
