...

View Full Version : Change Class of LI onMouseover



sundevil67
01-25-2009, 03:25 AM
I've been going out of my mind trying to get this to work, and now I'm out of time! It seems like it *SHOULD* be simple! All I am trying to do is get all of the <li> items that belong to a particular UL ID, and change the class name onmouseover. I've cut down the code to bare-bones to try and isolate the problem. I can get it to work if I use unique IDS for each list element, but that seems silly. The latest piece of code I am working with:


<script type="text/javascript">
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
if (mylist.childNodes[i].nodeName=="LI") {
mylist.onmouseover=function() {
setAttribute('class', 'menuActive'); }
mylist.onmouseout=function() {
setAttribute('class', ''); }
</script>

<ul id="mylist">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

TIA!

mrhoo
01-25-2009, 04:33 AM
1. If you want to change the class of the individual list item, and not the UL,
query the event target or srcElement of the mouse events that bubble up to the UL.

2. To work in IE as well as more competent browsers,
set the className property instead of using setAttribute.

3. You cannot reference an element before it is rendered in the browser.
Either run the script onload, or after the html it requires.

< script type= "text/javascript">

window.onload= function(){
var mylist= document.getElementById("mylist");
mylist.onmouseover= function(e){
e= window.event? event.srcElement: e.target;
if(e.nodeName== 'LI') e.className= 'menuActive';
}
mylist.onmouseout= function(e){
e= window.event? event.srcElement: e.target;
if(e.nodeName== 'LI') e.className= '';
}
}
< /script>
</head>
<body>

< ul id= "mylist">
< li> Test< /li>
< li> Test< /li>
< li> Test< /li>
< /ul>

sundevil67
01-25-2009, 05:01 AM
Ahh, that is a little bit clearer to me now....the final requirement is that I fire the class change of the <li> when mousing over the <a></a>...so for this example, (I promise there is a good reason to do this that is beyond the scope of this issue!)...let's say the list looks like this:

<ul id= "mylist">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
< /ul>

I've been trying to use a getElementbyTagname after getting the nodeName==LI with no success just yet...can I trouble u for just one more hint!? THANKS SO MUCH! The biggest hurdle is cleared...I tried so many combinations!

mrhoo
01-25-2009, 05:55 AM
if the target is a child of the element you want to change, find the parent.


if(e.nodeName== 'A'){
var pa=e.parentNode;
pa.className= 'menuActive';
}

If the target may be buried in p or other elements within the list item, climb the tree-

if(e.nodeName== 'A'){
var pa=e.parentNode;
while(pa && pa.nodeName!='LI')pa=pa.parentNode;
if(pa)pa.className= 'menuActive';
}

sundevil67
01-25-2009, 06:28 AM
Arg! It all makes good sense to me now, though it still won't work! I tried a few alerts and it doesn't seem to be firing the mouseover at all...I've got the 'tree' set up right...but....


window.onload= function(){
var mylist= document.getElementById("mylist");
mylist.onmouseover= function(e){
e= window.event? event.srcElement: e.target;
if(e.nodeName== 'A'){
var pa=e.parentNode;
pa.className= 'menuActive';

}
}
mylist.onmouseout= function(e){
e= window.event? event.srcElement: e.target;
if(e.nodeName== 'A'){
var pa=e.parentNode;
pa.className= '';
}
}

sundevil67
01-25-2009, 08:06 AM
Hmmm....I got it to work using a getElementsByTagName, but I know this will conflict with other list items/links on the page when I put everything together.


<script type="text/javascript">
window.onload = initMenu; // 1

function initMenu() {
var links=document.getElementsByTagName('a'); // 2
for(i=0; i < links.length; i++) {
var thisLink = links[i];
if(thisLink.parentNode.tagName == "LI"){
setActivity(thisLink);
}
}
}

function setActivity(thisLink){
thisLink.onmouseover = mouseOver; // 3
thisLink.onmouseout = mouseOut;
}

function mouseOver() {
this.parentNode.className = 'menuActive'; // 4
return this;
}

function mouseOut() {
this.parentNode.className = '';
// Faster? change style instead of class - this.parentNode.style.backgroundColor = '#171717';
return this;
}
</script>

sundevil67
01-25-2009, 08:21 AM
Triple Arg, shoot me now! I got it! I was missing a stupid @()#@ bracket at the very end! What a rookie mistake. Thanks so much for your help and your patience!!!!!

sundevil67
01-25-2009, 08:44 AM
In case you want to look at a more polished example of what this will accomplish; before, I had tied the mouseover to the LI, but that was no good because it didn't fire at the same time as the image swap that was previously done with JavaScript....anyway, I kept running into problems until you helped me get this method going. I NEEDED to contain everything in the <a>; and now I have!

Menu Test (http://www.adamfialkov.com/staging/header_test.html)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum