list item (li) hover effect in IE

**Neredbojias** · Oct 22 '05, 03:25 AM

Re: list item (li) hover effect in IE

With neither quill nor qualm, windandwaves quothed:
[color=blue]
> 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.htm l">option 1</a></li>
> <li><a href="page2.htm l">option 2</a></li>
> <li><a href="page3.htm l">option 3</a></li>
> <li><a href="page4.htm l">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.getEle mentById(ulname ).currentStyle ) {
> var navroot = document.getEle mentById(ulname );
> var lis=navroot.get ElementsByTagNa me("li");
> for (i=0; i<lis.length; i++) {
> var oldClassName = this.className;
> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
> lis[i].onmouseout=fun ction() {this.className = oldClassName;}
> }
> }
> }
>
> any comments / questions greatly appreciated.
>
> - Nicolaas[/color]

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

--
Neredbojias
Contrary to popular belief, it is believable.

**windandwaves** · Oct 22 '05, 03:55 AM

Re: list item (li) hover effect in IE

Neredbojias wrote:[color=blue]
> With neither quill nor qualm, windandwaves quothed:
>[color=green]
>> 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.htm l">option 1</a></li>
>> <li><a href="page2.htm l">option 2</a></li>
>> <li><a href="page3.htm l">option 3</a></li>
>> <li><a href="page4.htm l">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.getEle mentById(ulname ).currentStyle ) {
>> var navroot = document.getEle mentById(ulname );
>> var lis=navroot.get ElementsByTagNa me("li");
>> for (i=0; i<lis.length; i++) {
>> var oldClassName = this.className;
>> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
>> lis[i].onmouseout=fun ction() {this.className = oldClassName;}
>> }
>> }
>> }
>>
>> any comments / questions greatly appreciated.
>>
>> - Nicolaas[/color]
>
> That's great but if you need javascript, why not just use onmouseover?[/color]

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

**Randy Webb** · Oct 22 '05, 05:05 AM

Re: list item (li) hover effect in IE

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

<snip>
[color=blue][color=green]
>> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
>> lis[i].onmouseout=fun ction() {this.className = oldClassName;}
>> }
>> }
>>}
>>
>>any comments / questions greatly appreciated.
>>
>>- Nicolaas[/color]
>
>
> That's great but if you need javascript, why not just use onmouseover?
>[/color]

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

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

**Dan** · Oct 22 '05, 02:45 PM

Re: list item (li) hover effect in IE

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

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

--
Dan

**Jonathan N. Little** · Oct 22 '05, 03:45 PM

Re: list item (li) hover effect in IE

Dan wrote:[color=blue]
> windandwaves wrote:
>[color=green]
>>Below is a little function I "developed" (stole, copied and adapted) that
>>can create this hover effect in IE.[/color]
>
>
> And what does it do for people who use other, better, browsers?
>[/color]
Nothing, he filters them out with a browser test at the start of the
function

if (document.all && document.getEle mentById(ulname ).currentStyle ) {

since they do not need the JavaScript hack...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Thomas 'PointedEars' Lahn** · Oct 22 '05, 03:45 PM

Re: list item (li) hover effect in IE

Dan wrote:
[color=blue]
> windandwaves wrote:[color=green]
>> Below is a little function I "developed" (stole, copied and adapted) that
>> can create this hover effect in IE.[/color][/color]
^^^^^^^^^^^^^^^ ^^[color=blue]
> And what does it do for people who use other, better, browsers?[/color]

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

PointedEars

**Duncan Booth** · Oct 22 '05, 05:55 PM

Re: list item (li) hover effect in IE

windandwaves wrote:
[color=blue]
><body onload="hoverer ('menu');">
>
> function hoverer(ulname) {
> if (document.all && document.getEle mentById(ulname ).currentStyle ) {
> var navroot = document.getEle mentById(ulname );
> var lis=navroot.get ElementsByTagNa me("li");
> for (i=0; i<lis.length; i++) {
> var oldClassName = this.className;
> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
> lis[i].onmouseout=fun ction() {this.className = oldClassName;}
> }
> }
> }
>
> any comments / questions greatly appreciated.[/color]

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.getEle mentById &&
document.getEle mentById(ulname );
if (document.all && navroot && navroot.current Style ) {
var navroot = document.getEle mentById(ulname );
var lis=navroot.get ElementsByTagNa me("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=mo useOver;
lis[i].onmouseout=mou seOut;
}
}
}

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 '05, 09:15 PM

Re: list item (li) hover effect in IE

Duncan Booth wrote:[color=blue]
> windandwaves wrote:
>[color=green]
>> <body onload="hoverer ('menu');">
>>
>> function hoverer(ulname) {
>> if (document.all && document.getEle mentById(ulname ).currentStyle ) {
>> var navroot = document.getEle mentById(ulname );
>> var lis=navroot.get ElementsByTagNa me("li");
>> for (i=0; i<lis.length; i++) {
>> var oldClassName = this.className;
>> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
>> lis[i].onmouseout=fun ction() {this.className = oldClassName;}
>> }
>> }
>> }
>>
>> any comments / questions greatly appreciated.[/color]
>
> 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.getEle mentById &&
> document.getEle mentById(ulname );
> if (document.all && navroot && navroot.current Style ) {
> var navroot = document.getEle mentById(ulname );
> var lis=navroot.get ElementsByTagNa me("li");
> for (var i=0; i<lis.length; i++) {
> lis[i].onmouseover=mo useOver;
> lis[i].onmouseout=mou seOut;
> }
> }
> }[/color]

Thank you for that. That is awesome.
[color=blue]
>
> 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.[/color]

**Vladdy** · Oct 23 '05, 02:45 AM

Re: list item (li) hover effect in IE

windandwaves wrote:[color=blue]
> 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.htm l">option 1</a></li>
> <li><a href="page2.htm l">option 2</a></li>
> <li><a href="page3.htm l">option 3</a></li>
> <li><a href="page4.htm l">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.getEle mentById(ulname ).currentStyle ) {
> var navroot = document.getEle mentById(ulname );
> var lis=navroot.get ElementsByTagNa me("li");
> for (i=0; i<lis.length; i++) {
> var oldClassName = this.className;
> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
> lis[i].onmouseout=fun ction() {this.className = oldClassName;}
> }
> }
> }
>
> any comments / questions greatly appreciated.
>
> - Nicolaas
>
>[/color]
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

**Mellow Crow** · Oct 24 '05, 08:05 AM

Re: list item (li) hover effect in IE

windandwaves wrote:[color=blue]
> 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.htm l">option 1</a></li>
> <li><a href="page2.htm l">option 2</a></li>
> <li><a href="page3.htm l">option 3</a></li>
> <li><a href="page4.htm l">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.[/color]
[snip]

why not the following?

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

**windandwaves** · Oct 24 '05, 11:25 AM

Re: list item (li) hover effect in IE

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

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

**Mellow Crow** · Oct 24 '05, 11:45 AM

Re: list item (li) hover effect in IE

windandwaves (Nicolaas) wrote:[color=blue]
> Mellow Crow wrote:
> [snip][color=green]
>> #menu a:hover {background-color: #123456;}[/color]
>
> 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.[/color]

It's informative know there was no objection to a:hover in this case. Thank
you.

**Evertjan.** · Oct 24 '05, 11:55 AM

Re: list item (li) hover effect in IE

windandwaves wrote on 22 okt 2005 in comp.lang.javas cript:
[color=blue]
> 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.htm l">option 1</a></li>
> <li><a href="page2.htm l">option 2</a></li>
> <li><a href="page3.htm l">option 3</a></li>
> <li><a href="page4.htm l">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.getEle mentById(ulname ).currentStyle ) {
> var navroot = document.getEle mentById(ulname );
> var lis=navroot.get ElementsByTagNa me("li");
> for (i=0; i<lis.length; i++) {
> var oldClassName = this.className;[/color]

'this' would refer here to the window, I think.
[color=blue]
> lis[i].onmouseover=fu nction() {this.className = ulname + "ie";}
> lis[i].onmouseout=fun ction() {this.className = oldClassName;}[/color]
[color=blue]
> }
> }
>}[/color]

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

=============== =============== =====
<style>
ul li {width:200px;te xt-align:center;}
..cNormal a {background-color:yellow;co lor:red;}
..cHover a {background-color:red;color :yellow;}
..cNormal {border:navy 3px dotted;backgrou nd-color:#eee;}
..cHover {border:green 3px solid;backgroun d-color:#bbb;}
</style>

<script type="text/javascript">
function hoverer(ulname) {
if (document.all && document.getEle mentById(ulname ).currentStyle ) {
var navroot = document.getEle mentById(ulname );
var lis=navroot.get ElementsByTagNa me("li");
for (i=0; i<lis.length; i++) {
lis[i].className = 'cNormal'
lis[i].onmouseover=fu nction() {this.className = 'cHover';}
lis[i].onmouseout=fun ction() {this.className = 'cNormal';}
}
}
}
</script>

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

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

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

list item (li) hover effect in IE

list item (li) hover effect in IE

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment