list item (li) hover effect in IE

Discussion in 'HTML' started by windandwaves, Oct 22, 2005.

  1. windandwaves

    windandwaves Guest

    Hi Folk

    Just a bit of help here for newbies who want their menus to look nicer.

    I am sure that many of you make menus like this

    <ul id="menu">
    <li><a href="page1.html">option 1</a></li>
    <li><a href="page2.html">option 2</a></li>
    <li><a href="page3.html">option 3</a></li>
    <li><a href="page4.html">option 4</a></li>
    </ul>

    and then add style like this

    #menu li:hover {background-color: #123456;}

    Below is a little function I "developed" (stole, copied and adapted) that
    can create this hover effect in IE.

    To make it work, write the body tag as follows:
    <body onload="hoverer('menu');">

    function hoverer(ulname) {
    if (document.all && document.getElementById(ulname).currentStyle ) {
    var navroot = document.getElementById(ulname);
    var lis=navroot.getElementsByTagName("li");
    for (i=0; i<lis.length; i++) {
    var oldClassName = this.className;
    lis.onmouseover=function() {this.className = ulname + "ie";}
    lis.onmouseout=function() {this.className = oldClassName;}
    }
    }
    }

    any comments / questions greatly appreciated.

    - Nicolaas
    windandwaves, Oct 22, 2005
    #1
    1. Advertising

  2. windandwaves

    dorayme Guest

    > From: "windandwaves" <>
    >
    > Hi Folk
    >
    > Just a bit of help here for newbies who want their menus to look nicer.
    >
    > I am sure that many of you make menus like this
    >
    > <ul id="menu">
    > <li><a href="page1.html">option 1</a></li>
    > <li><a href="page2.html">option 2</a></li>
    > <li><a href="page3.html">option 3</a></li>
    > <li><a href="page4.html">option 4</a></li>
    > </ul>
    >
    > and then add style like this
    >
    > #menu li:hover {background-color: #123456;}
    >
    > Below is a little function I "developed" (stole, copied and adapted) that
    > can create this hover effect in IE.
    >
    > To make it work, write the body tag as follows:
    > <body onload="hoverer('menu');">
    >
    > function hoverer(ulname) {
    > if (document.all && document.getElementById(ulname).currentStyle ) {
    > var navroot = document.getElementById(ulname);
    > var lis=navroot.getElementsByTagName("li");
    > for (i=0; i<lis.length; i++) {
    > var oldClassName = this.className;
    > lis.onmouseover=function() {this.className = ulname + "ie";}
    > lis.onmouseout=function() {this.className = oldClassName;}
    > }
    > }
    > }
    >
    > any comments / questions greatly appreciated.
    >



    I find it simpler (when even simpler won't do) to work with
    something like the one at http://dorayme.150m.com/test/nav.html

    (Which I have been adapting from where I found it, via alt.htm I
    think, for various things lately). It seems to work well, no
    fancy scripting...

    --
    dorayme
    dorayme, Oct 22, 2005
    #2
    1. Advertising

  3. windandwaves

    Neredbojias Guest

    With neither quill nor qualm, windandwaves quothed:

    > Hi Folk
    >
    > Just a bit of help here for newbies who want their menus to look nicer.
    >
    > I am sure that many of you make menus like this
    >
    > <ul id="menu">
    > <li><a href="page1.html">option 1</a></li>
    > <li><a href="page2.html">option 2</a></li>
    > <li><a href="page3.html">option 3</a></li>
    > <li><a href="page4.html">option 4</a></li>
    > </ul>
    >
    > and then add style like this
    >
    > #menu li:hover {background-color: #123456;}
    >
    > Below is a little function I "developed" (stole, copied and adapted) that
    > can create this hover effect in IE.
    >
    > To make it work, write the body tag as follows:
    > <body onload="hoverer('menu');">
    >
    > function hoverer(ulname) {
    > if (document.all && document.getElementById(ulname).currentStyle ) {
    > var navroot = document.getElementById(ulname);
    > var lis=navroot.getElementsByTagName("li");
    > for (i=0; i<lis.length; i++) {
    > var oldClassName = this.className;
    > lis.onmouseover=function() {this.className = ulname + "ie";}
    > lis.onmouseout=function() {this.className = oldClassName;}
    > }
    > }
    > }
    >
    > any comments / questions greatly appreciated.
    >
    > - Nicolaas


    That's great but if you need javascript, why not just use onmouseover?

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 22, 2005
    #3
  4. windandwaves

    windandwaves Guest

    dorayme wrote:
    >> From: "windandwaves" <>
    >>
    >> Hi Folk
    >>
    >> Just a bit of help here for newbies who want their menus to look
    >> nicer.
    >>
    >> I am sure that many of you make menus like this
    >>
    >> <ul id="menu">
    >> <li><a href="page1.html">option 1</a></li>
    >> <li><a href="page2.html">option 2</a></li>
    >> <li><a href="page3.html">option 3</a></li>
    >> <li><a href="page4.html">option 4</a></li>
    >> </ul>
    >>
    >> and then add style like this
    >>
    >> #menu li:hover {background-color: #123456;}
    >>
    >> Below is a little function I "developed" (stole, copied and adapted)
    >> that can create this hover effect in IE.
    >>
    >> To make it work, write the body tag as follows:
    >> <body onload="hoverer('menu');">
    >>
    >> function hoverer(ulname) {
    >> if (document.all && document.getElementById(ulname).currentStyle ) {
    >> var navroot = document.getElementById(ulname);
    >> var lis=navroot.getElementsByTagName("li");
    >> for (i=0; i<lis.length; i++) {
    >> var oldClassName = this.className;
    >> lis.onmouseover=function() {this.className = ulname + "ie";}
    >> lis.onmouseout=function() {this.className = oldClassName;}
    >> }
    >> }
    >> }
    >>
    >> any comments / questions greatly appreciated.
    >>

    >
    >
    > I find it simpler (when even simpler won't do) to work with
    > something like the one at http://dorayme.150m.com/test/nav.html
    >
    > (Which I have been adapting from where I found it, via alt.htm I
    > think, for various things lately). It seems to work well, no
    > fancy scripting...


    That is great, so you do the following:

    1. change a tag from inline element to block element
    2. set a tag's width to auto
    3. use a:hover to show the hover effect

    I guess that is even smarter ;-)

    Thank you for that.
    windandwaves, Oct 22, 2005
    #4
  5. windandwaves

    windandwaves Guest

    Neredbojias wrote:
    > With neither quill nor qualm, windandwaves quothed:
    >
    >> Hi Folk
    >>
    >> Just a bit of help here for newbies who want their menus to look
    >> nicer.
    >>
    >> I am sure that many of you make menus like this
    >>
    >> <ul id="menu">
    >> <li><a href="page1.html">option 1</a></li>
    >> <li><a href="page2.html">option 2</a></li>
    >> <li><a href="page3.html">option 3</a></li>
    >> <li><a href="page4.html">option 4</a></li>
    >> </ul>
    >>
    >> and then add style like this
    >>
    >> #menu li:hover {background-color: #123456;}
    >>
    >> Below is a little function I "developed" (stole, copied and adapted)
    >> that can create this hover effect in IE.
    >>
    >> To make it work, write the body tag as follows:
    >> <body onload="hoverer('menu');">
    >>
    >> function hoverer(ulname) {
    >> if (document.all && document.getElementById(ulname).currentStyle ) {
    >> var navroot = document.getElementById(ulname);
    >> var lis=navroot.getElementsByTagName("li");
    >> for (i=0; i<lis.length; i++) {
    >> var oldClassName = this.className;
    >> lis.onmouseover=function() {this.className = ulname + "ie";}
    >> lis.onmouseout=function() {this.className = oldClassName;}
    >> }
    >> }
    >> }
    >>
    >> any comments / questions greatly appreciated.
    >>
    >> - Nicolaas

    >
    > That's great but if you need javascript, why not just use onmouseover?


    The reason I used the javascript is because if you have a really long menu,
    it keeps the html clean (without any mouseovers).

    Having said that, I am now using dorayme's solution, because it seems a lot
    smarter again!

    Thank you

    - Nicolaas
    windandwaves, Oct 22, 2005
    #5
  6. windandwaves

    Randy Webb Guest

    Neredbojias said the following on 10/21/2005 11:17 PM:
    > With neither quill nor qualm, windandwaves quothed:


    <snip>

    >> lis.onmouseover=function() {this.className = ulname + "ie";}
    >> lis.onmouseout=function() {this.className = oldClassName;}
    >> }
    >> }
    >>}
    >>
    >>any comments / questions greatly appreciated.
    >>
    >>- Nicolaas

    >
    >
    > That's great but if you need javascript, why not just use onmouseover?
    >


    It does use onmouseover/out, it just adds them dynamically.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Randy Webb, Oct 22, 2005
    #6
  7. windandwaves

    Dan Guest

    windandwaves wrote:
    > Below is a little function I "developed" (stole, copied and adapted) that
    > can create this hover effect in IE.


    And what does it do for people who use other, better, browsers?

    --
    Dan
    Dan, Oct 22, 2005
    #7
  8. Dan wrote:
    > windandwaves wrote:
    >
    >>Below is a little function I "developed" (stole, copied and adapted) that
    >>can create this hover effect in IE.

    >
    >
    > And what does it do for people who use other, better, browsers?
    >

    Nothing, he filters them out with a browser test at the start of the
    function

    if (document.all && document.getElementById(ulname).currentStyle ) {

    since they do not need the JavaScript hack...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 22, 2005
    #8
  9. Dan wrote:

    > windandwaves wrote:
    >> Below is a little function I "developed" (stole, copied and adapted) that
    >> can create this hover effect in IE.

    ^^^^^^^^^^^^^^^^^
    > And what does it do for people who use other, better, browsers?


    With them, the CSS rule included in the posting will suffice :)


    PointedEars
    Thomas 'PointedEars' Lahn, Oct 22, 2005
    #9
  10. windandwaves

    Duncan Booth Guest

    windandwaves wrote:

    ><body onload="hoverer('menu');">
    >
    > function hoverer(ulname) {
    > if (document.all && document.getElementById(ulname).currentStyle ) {
    > var navroot = document.getElementById(ulname);
    > var lis=navroot.getElementsByTagName("li");
    > for (i=0; i<lis.length; i++) {
    > var oldClassName = this.className;
    > lis.onmouseover=function() {this.className = ulname + "ie";}
    > lis.onmouseout=function() {this.className = oldClassName;}
    > }
    > }
    > }
    >
    > any comments / questions greatly appreciated.


    You could avoid multiple calls of getElementById by moving the declaration
    of navroot outside the if statement.

    You shouldn't use a global variable as the loop counter. This is likely to
    lead to subtle errors.

    The line 'var oldClassName = this.className' is a loop invariant, so you
    might as well move it outside the loop. The functions you define don't vary
    either, so those can be moved out as well.

    The onmouseout function is setting the li element's classname to the body's
    classname which probably isn't what you intended.

    A better way to do this is to use the fact that an element can have
    multiple classes. e.g.

    function hoverer(ulname) {
    function mouseOver() {
    this.className += ' hover';
    }
    function mouseOut() {
    this.className = this.className.replace(/ *hover\b/g, '');
    }
    var navroot = document.getElementById &&
    document.getElementById(ulname);
    if (document.all && navroot && navroot.currentStyle ) {
    var navroot = document.getElementById(ulname);
    var lis=navroot.getElementsByTagName("li");
    for (var i=0; i<lis.length; i++) {
    lis.onmouseover=mouseOver;
    lis.onmouseout=mouseOut;
    }
    }
    }

    Then your style rules can do things like:

    #menu li.hover, #menu li:hover {
    background-color: #123456;
    }

    One other point to consider is that you might want to attach other
    mouse over/mouse out event handlers directly to list elements, so it might
    be better to use the 'attachEvent' method to add an additional handler and
    not interfere with existing handlers. If you do this though it gets a bit
    more complicated as you can't just use 'this' to access the list element.
    Duncan Booth, Oct 22, 2005
    #10
  11. windandwaves

    windandwaves Guest

    Duncan Booth wrote:
    > windandwaves wrote:
    >
    >> <body onload="hoverer('menu');">
    >>
    >> function hoverer(ulname) {
    >> if (document.all && document.getElementById(ulname).currentStyle ) {
    >> var navroot = document.getElementById(ulname);
    >> var lis=navroot.getElementsByTagName("li");
    >> for (i=0; i<lis.length; i++) {
    >> var oldClassName = this.className;
    >> lis.onmouseover=function() {this.className = ulname + "ie";}
    >> lis.onmouseout=function() {this.className = oldClassName;}
    >> }
    >> }
    >> }
    >>
    >> any comments / questions greatly appreciated.

    >
    > You could avoid multiple calls of getElementById by moving the
    > declaration of navroot outside the if statement.
    >
    > You shouldn't use a global variable as the loop counter. This is
    > likely to lead to subtle errors.
    >
    > The line 'var oldClassName = this.className' is a loop invariant, so
    > you might as well move it outside the loop. The functions you define
    > don't vary either, so those can be moved out as well.
    >
    > The onmouseout function is setting the li element's classname to the
    > body's classname which probably isn't what you intended.
    >
    > A better way to do this is to use the fact that an element can have
    > multiple classes. e.g.
    >
    > function hoverer(ulname) {
    > function mouseOver() {
    > this.className += ' hover';
    > }
    > function mouseOut() {
    > this.className = this.className.replace(/ *hover\b/g, '');
    > }
    > var navroot = document.getElementById &&
    > document.getElementById(ulname);
    > if (document.all && navroot && navroot.currentStyle ) {
    > var navroot = document.getElementById(ulname);
    > var lis=navroot.getElementsByTagName("li");
    > for (var i=0; i<lis.length; i++) {
    > lis.onmouseover=mouseOver;
    > lis.onmouseout=mouseOut;
    > }
    > }
    > }


    Thank you for that. That is awesome.

    >
    > Then your style rules can do things like:
    >
    > #menu li.hover, #menu li:hover {
    > background-color: #123456;
    > }
    >
    > One other point to consider is that you might want to attach other
    > mouse over/mouse out event handlers directly to list elements, so it
    > might be better to use the 'attachEvent' method to add an additional
    > handler and not interfere with existing handlers. If you do this
    > though it gets a bit more complicated as you can't just use 'this' to
    > access the list element.
    windandwaves, Oct 22, 2005
    #11
  12. windandwaves

    Vladdy Guest

    windandwaves wrote:
    > Hi Folk
    >
    > Just a bit of help here for newbies who want their menus to look nicer.
    >
    > I am sure that many of you make menus like this
    >
    > <ul id="menu">
    > <li><a href="page1.html">option 1</a></li>
    > <li><a href="page2.html">option 2</a></li>
    > <li><a href="page3.html">option 3</a></li>
    > <li><a href="page4.html">option 4</a></li>
    > </ul>
    >
    > and then add style like this
    >
    > #menu li:hover {background-color: #123456;}
    >
    > Below is a little function I "developed" (stole, copied and adapted) that
    > can create this hover effect in IE.
    >
    > To make it work, write the body tag as follows:
    > <body onload="hoverer('menu');">
    >
    > function hoverer(ulname) {
    > if (document.all && document.getElementById(ulname).currentStyle ) {
    > var navroot = document.getElementById(ulname);
    > var lis=navroot.getElementsByTagName("li");
    > for (i=0; i<lis.length; i++) {
    > var oldClassName = this.className;
    > lis.onmouseover=function() {this.className = ulname + "ie";}
    > lis.onmouseout=function() {this.className = oldClassName;}
    > }
    > }
    > }
    >
    > any comments / questions greatly appreciated.
    >
    > - Nicolaas
    >
    >

    Why make real browsers waste the bandwidth by downloading IE only code:
    http://www.vladdy.net/demos/iepseudoclassesfix.html
    and when applied to navigation:
    http://www.vladdy.net/demos/cssnav.html

    --
    Vladdy
    http://www.klproductions.com
    Vladdy, Oct 23, 2005
    #12
  13. windandwaves

    Mellow Crow Guest

    windandwaves wrote:
    > Hi Folk
    >
    > Just a bit of help here for newbies who want their menus to look
    > nicer.
    >
    > I am sure that many of you make menus like this
    >
    > <ul id="menu">
    > <li><a href="page1.html">option 1</a></li>
    > <li><a href="page2.html">option 2</a></li>
    > <li><a href="page3.html">option 3</a></li>
    > <li><a href="page4.html">option 4</a></li>
    > </ul>
    >
    > and then add style like this
    >
    > #menu li:hover {background-color: #123456;}
    >
    > Below is a little function I "developed" (stole, copied and adapted)
    > that can create this hover effect in IE.

    [snip]

    why not the following?

    #menu a:hover {background-color: #123456;}
    Mellow Crow, Oct 24, 2005
    #13
  14. windandwaves

    windandwaves Guest

    Mellow Crow wrote:
    [snip]
    > #menu a:hover {background-color: #123456;}


    Yes, that is what I ended up using. It worked fine for this situation, but
    it will not work in all situations. Have a look at some of the other
    responses, there are actually some cool ways out there to solve it.

    Thank you.

    - Nicolaas
    windandwaves, Oct 24, 2005
    #14
  15. windandwaves

    Mellow Crow Guest

    windandwaves (Nicolaas) wrote:
    > Mellow Crow wrote:
    > [snip]
    >> #menu a:hover {background-color: #123456;}

    >
    > Yes, that is what I ended up using. It worked fine for this
    > situation, but it will not work in all situations. Have a look at
    > some of the other responses, there are actually some cool ways out
    > there to solve it.


    It's informative know there was no objection to a:hover in this case. Thank
    you.
    Mellow Crow, Oct 24, 2005
    #15
  16. windandwaves

    Evertjan. Guest

    windandwaves wrote on 22 okt 2005 in comp.lang.javascript:

    > Hi Folk
    >
    > Just a bit of help here for newbies who want their menus to look
    > nicer.
    >
    > I am sure that many of you make menus like this
    >
    > <ul id="menu">
    > <li><a href="page1.html">option 1</a></li>
    > <li><a href="page2.html">option 2</a></li>
    > <li><a href="page3.html">option 3</a></li>
    > <li><a href="page4.html">option 4</a></li>
    > </ul>
    >
    > and then add style like this
    >
    >#menu li:hover {background-color: #123456;}
    >
    > Below is a little function I "developed" (stole, copied and adapted)
    > that can create this hover effect in IE.
    >
    > To make it work, write the body tag as follows:
    > <body onload="hoverer('menu');">
    >
    > function hoverer(ulname) {
    > if (document.all && document.getElementById(ulname).currentStyle ) {
    > var navroot = document.getElementById(ulname);
    > var lis=navroot.getElementsByTagName("li");
    > for (i=0; i<lis.length; i++) {
    > var oldClassName = this.className;


    'this' would refer here to the window, I think.

    > lis.onmouseover=function() {this.className = ulname + "ie";}
    > lis.onmouseout=function() {this.className = oldClassName;}


    > }
    > }
    >}


    try, [if you don't like the css a:hover]:

    ===================================
    <style>
    ul li {width:200px;text-align:center;}
    ..cNormal a {background-color:yellow;color:red;}
    ..cHover a {background-color:red;color:yellow;}
    ..cNormal {border:navy 3px dotted;background-color:#eee;}
    ..cHover {border:green 3px solid;background-color:#bbb;}
    </style>

    <script type="text/javascript">
    function hoverer(ulname) {
    if (document.all && document.getElementById(ulname).currentStyle ) {
    var navroot = document.getElementById(ulname);
    var lis=navroot.getElementsByTagName("li");
    for (i=0; i<lis.length; i++) {
    lis.className = 'cNormal'
    lis.onmouseover=function() {this.className = 'cHover';}
    lis.onmouseout=function() {this.className = 'cNormal';}
    }
    }
    }
    </script>

    <body onload="hoverer('menu');">

    <ul id="menu">
    <li><a href="page1.html">option 1</a></li>
    <li><a href="page2.html">option 2</a></li>
    <li><a href="page3.html">option 3</a></li>
    <li><a href="page4.html">option 4</a></li>
    </ul>
    ===================================



    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
    Evertjan., Oct 24, 2005
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jack

    Hover effect in Calender Control

    jack, Jan 2, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    494
    Christopher Reed
    Jan 3, 2006
  2. jack
    Replies:
    8
    Views:
    33,420
    tooMuchCode
    May 12, 2009
  3. Christopher Reed

    Re: Hover effect in Calender Control

    Christopher Reed, Jan 3, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    427
    Christopher Reed
    Jan 3, 2006
  4. Dave Brown
    Replies:
    9
    Views:
    703
  5. windandwaves

    list item (li) hover effect in IE

    windandwaves, Oct 22, 2005, in forum: Javascript
    Replies:
    11
    Views:
    190
    Evertjan.
    Oct 24, 2005
Loading...

Share This Page