/    Sign up×
Community /Pin to ProfileBookmark

a problem with my code or Chrome???

i’ve written this code that worked just fine in Google chrome last night. i went to sleep and woke back up and it no longer worked. its a script that creates anchors around several anchors and attactches mouseover and mouseout events.

[CODE]
function showNav() {
var chatBox=document.getElementById(‘southProfile’);
chatBox.innerHTML=””;
var navBar=document.createElement(‘div’);
navBar.setAttribute(‘style’,’position:absolute;transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);height:180px;width:500px;margin-left:500px;margin-top:130px;’);
navBar.innerHTML=”<table><td valign=’bottom’ style=’width:500px;height:180px’> [COLOR=”Red”]<a class=’navX’ onmouseover=’waveUp(1)’ onmouseout=’waveDown(1)’>x</a><a class=’navX’ onmouseover=’waveUp(2)’ onmouseout=’waveDown(2)’>x</a><a class=’navX’ onmouseover=’waveUp(3)’ onmouseout=’waveDown(3)’>x</a><a class=’navX’ onmouseover=’waveUp(4)’ onmouseout=’waveDown(4)’>x</a><a class=’navX’ onmouseover=’waveUp(5)’ onmouseout=’waveDown(5)’>x</a><a class=’navX’ onmouseover=’waveUp(6)’ onmouseout=’waveDown(6)’ style=’color:#6bf;’ href=’javascript:t=setInterval(shiftChatter, 1300)’>x</a><a class=’navX’ onmouseover=’waveUp(7)’ onmouseout=’waveDown(7)’>x</a><a class=’navX’ onmouseover=’waveUp(8)’ onmouseout=’waveDown(8)’>x</a><a class=’navX’ onmouseover=’waveUp(9)’ onmouseout=’waveDown(9)’>x</a><a class=’navX’ onmouseover=’waveUp(10)’ onmouseout=’waveDown(10)’>x</a><a class=’navX’ onmouseover=’waveUp(11)’ onmouseout=’waveDown(11)’>x</a>[/COLOR]</td></table>”;
chatBox.appendChild(navBar);
showChatter();
}[/CODE]

I only put it in a table because i needed the text to be written at the bottom of the div and the div itself wouldnt allow me to manipulate the vertical alignment of text. anyhow, the wave up and wavedown events passes a numbered parameter that represents the number that corresponds to the position of the x that is being mouseovered. it was originally numbered 0-10, but it just wouldnt work. but the function waveUp subtracts 1 and adds one to the parameter and saves them in their own respective variables. then it changes the class of the element with the childNode number of the left var, the right var, and the middle variable.

[CODE]
function waveUp(xNum) {
var left=xNum-1;
var right=xNum+1;
document.getElementsByTagName(‘td’)[0].childNodes[right].setAttribute(‘class’,’navx2′);
if (left>=0) {
dhyocument.getElementsByTagName(‘td’)[0].childNodes[left].setAttribute(‘class’,’navx2′);
}
document.getElementsByTagName(‘td’)[0].childNodes[xNum].setAttribute(‘class’,’navx3′);
}
[/CODE]

now, it worked just fine last night…. and even the night before. but for some reason it no longer works…. its acting wierd and only changing the class of the X to the right of the one being hovered over…. making this wierd effect. whats going on??? is it me???

and also, as another addition to the things that acted fine last night and cease to work today is the rest of the function. i’ve commented it out for now because since it was the only thing that was new, i figured it was the issue… but it wasnt. apparently i just dont understand intervals… but i just dont understand how something can work perfectly one moment… and act crazy the next.

[CODE]
/*if (xNum==2) {
clearInterval(t);
t=setInterval(shiftDwnChatter, 200);
}
if (xNum==3) {
clearInterval(t);
t=setInterval(shiftDwnChatter, 400);
}
if (xNum==4) {
clearInterval(t);
t=setInterval(shiftDwnChatter, 700);
}
if (xNum==5) {
clearInterval(t);
t=setInterval(shiftDwnChatter, 1000);
}

if (xNum==6) {
clearInterval(t);
}

if (xNum==7) {
clearInterval(t);
t=setInterval(shiftChatter, 1000);
}
if (xNum==8) {
clearInterval(t);
t=setInterval(shiftChatter, 700);
}
if (xNum==9) {
clearInterval(t);
t=setInterval(shiftChatter, 400);
}
if (xNum==10) {
clearInterval(t);
t=setInterval(shiftChatter, 200);
}*/
[/CODE]

The intervals are set to make another function repeat itself over faster intervals depending on the X that is being mouseovered….. sigh… i dont know whats going on.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@aqutenolejauthorSep 24.2010 — [CODE]function waveDown(xNum) {
var xNum;
var left=xNum-1;
var right=xNum+1;
document.getElementsByTagName('td')[0].childNodes[right].setAttribute('class','navX');
if (left>=0) {
document.getElementsByTagName('td')[0].childNodes[left].setAttribute('class','navX');
}
document.getElementsByTagName('td')[0].childNodes[xNum].setAttribute('class','navX');
}[/CODE]


sry... here is the waveDown function.
Copy linkTweet thisAlerts:
@FangSep 25.2010 — Typo?[CODE]function waveUp(xNum) {
var left=xNum-1;
var right=xNum+1;
document.getElementsByTagName('td')[0].childNodes[right].setAttribute('class','navx2');
if (left>=0) {
[COLOR="Red"]dhyocument[/COLOR].getElementsByTagName('td')[0].childNodes[left].setAttribute('class','navx2');
}
document.getElementsByTagName('td')[0].childNodes[xNum].setAttribute('class','navx3');
}[/CODE]
It all appears the same in Chrome and Firefox, but will fail in IE with:

[i]setAttribute('style',[/i] and [I]setAttribute('class','navX')[/I]
[CODE]navBar.style.cssText = 'position:absolute;transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);height:180px;width:500px;margin-left:500px;margin-top:130px;';
// and
obj.className = 'navx2';[/CODE]

Also be carefull with referencing [I]childNodes[/I]: https://developer.mozilla.org/en/Whitespace_in_the_DOM

Referencing the element is often safer.

These 3 issues have been corrected in IE9
×

Success!

Help @aqutenolej spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...