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 <[email protected]>
> 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 [email protected].
> To unsubscribe from this group, send email to
> [email protected]<jquery-dev%[email protected]>
> .
> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en.
