jQuery: The Write Less, Do More JavaScript Library

| 
jQuery
 » 
jQuery Dev List

'hover' pseudo element - access thru jQuery?

View: New views
5 Messages — Rating Filter:   Alert me  

'hover' pseudo element - access thru jQuery?

by jez9999 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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



Re: 'hover' pseudo element - access thru jQuery?

by jaubourg :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

Re: 'hover' pseudo element - access thru jQuery?

by jez9999 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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



Re: 'hover' pseudo element - access thru jQuery?

by Richard D. Worth-2 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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:


- Richard

On Sat, Oct 31, 2009 at 10:55 AM, jez9999 <jez9999@...> 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-dev@....
To unsubscribe from this group, send email to jquery-dev%2Bunsubscribe@....
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-dev@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

Re: Re: 'hover' pseudo element - access thru jQuery?

by jaubourg :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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 <jez9999@...>
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...@...> 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...@...>
>
> > 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-dev@....
> > To unsubscribe from this group, send email to
> > jquery-dev%2Bunsubscribe@...<jquery-dev%252Bunsubscribe@...>
> > .
> > 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-dev@....
To unsubscribe from this group, send email to jquery-dev%2Bunsubscribe@....
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-dev@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.
Free embeddable forum powered by Nabble Forum Help