Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > list item (li) hover effect in IE

Reply
Thread Tools

list item (li) hover effect in IE

 
 
windandwaves
Guest
Posts: n/a
 
      10-22-2005
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[i].onmouseover=function() {this.className = ulname + "ie";}
>> lis[i].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[i].onmouseover=mouseOver;
> lis[i].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.




 
Reply With Quote
 
 
 
 
Vladdy
Guest
Posts: n/a
 
      10-23-2005
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[i].onmouseover=function() {this.className = ulname + "ie";}
> lis[i].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
 
Reply With Quote
 
 
 
 
Mellow Crow
Guest
Posts: n/a
 
      10-24-2005
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;}



 
Reply With Quote
 
windandwaves
Guest
Posts: n/a
 
      10-24-2005
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


 
Reply With Quote
 
Mellow Crow
Guest
Posts: n/a
 
      10-24-2005
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.


 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      10-24-2005
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[i].onmouseover=function() {this.className = ulname + "ie";}
> lis[i].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[i].className = 'cNormal'
lis[i].onmouseover=function() {this.className = 'cHover';}
lis[i].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)

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Hover effect of Asp Dotnet Buttons jack ASP .Net 8 05-12-2009 05:22 PM
Re: Hover effect in Calender Control Christopher Reed ASP .Net 0 01-03-2006 12:49 PM
Hover effect in Calender Control jack ASP .Net 3 01-03-2006 12:34 PM
list item (li) hover effect in IE windandwaves Javascript 11 10-24-2005 11:42 AM
help ! cannot get hover style to take effect Dave Brown HTML 9 09-09-2004 11:50 AM



Advertisments