...

View Full Version : Trouble assiging formatting to ID...



hothousegraphix
12-14-2007, 04:51 AM
I have a function which I run onload to apply formatting to a list of links.
This function handles both the static state and the hover state formatting.


function featuredEffects() {
featured = document.getElementById("work_1").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work_1");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}

}

This works perfectly. Here is the wrinkle. I am tagging the first item in my list with a class (could be ID if it makes it easier) of "active".
And to this element I want to apply a backgroundPosition of "0 46px. Initially, I thought I could just define this in my style sheet.
No go. Seems the JS overwrites those values. This is also true for defining inline as well.

So, I've been trying to figure out how to incorporate this logic in my featuredEffects() function. I've tried:

function featuredEffects() {
featured = document.getElementById("work_1").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
if(document.getElementById("active").className=="active"){
document.getElementById("active").style.backgroundPosition = "0 46px";
}else{
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work_1");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}

}
However, as you can guess this doesn't work. Which is why I'm here. Would anyone have a clue how to do this?

Thanks in advance.

hothousegraphix
12-14-2007, 02:55 PM
Thought this might work too; move the className of my active item to the link contained in my list item. Then:


function featuredEffects() {
featured = document.getElementById("work_1").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
/* updated conditional */
if(featured[q].getElementsByTagName("a")[0].className=="active"){
document.getElementById("active").style.backgroundPosition = "0 46px";
}else{
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work_1");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}

}

hothousegraphix
12-15-2007, 05:03 PM
Would anyone happen to be able to help?

The trick is seems to be targeting the one item in my list with a class of "active".

I've tried

function makeHovers() {
featured = document.getElementById("work").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
//conditional to target li with class of active - doesn't work
if(featured[q].className=="active") function(){
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}
}

The conditional here does not function. However, the rest of the function is working.

Zefris
12-16-2007, 06:30 AM
What are you trying to do?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum