...

View Full Version : Help me with my hovering code



jacafio
03-05-2012, 01:58 PM
Hi , I have this code in whitch I wanned an element to exchange between 2 CSS3 classes, but it isn't working, can any one help me out?

Here it goes:


var addClass = function (valor, elemento) {
if (!elemento.className) {
elemento.className = "nothing";
} else if (elemento.className.indexOf(valor) !== -1) {
return;
} else {
elemento.className += " ";
elemento.className += valor;
elemento.getAttribute("class");
}
};
var linkHover = function () {
var links = document.getElementsByTagName("a"), aLen = links.length, i;
console.log(links);
console.log(aLen);
for (i = 0; i < aLen; i += 1) {
links[i].onmouseover = function () {
if (this.className.indexOf("rotateRight") === -1 && this.className.indexOf("rotateLeft") === -1) {
addClass("rotateRight", this);
}
};
links[i].onmouseout = function () {
if (this.className.indexOf("rotateRight") !== -1) {

this.className.replace(/rotateRight/gi, "rotateLeft");

} else if (this.className.indexOf("rotateLeft") !== -1) {
this.className.replace(/rotateLeft/gi, "rotateRight");
}
console.log(this.className);
};
}
};
window.onload = function () {
linkHover();
};


Thanks!

MarPlo
03-05-2012, 02:32 PM
Hi,
Try this code:

<style type="text/css"><!--

--></style>
</head>
<body>


<a href="" class="abc">fjhj</a>

<div id="scrtop" onclick="scrollTo(0,0);"><span>&uArr;</span>TOP</div>
<script type="text/javascript"><!--
var addClass = function (valor, elemento) {
if (!elemento.className) {
elemento.className = "nothing";
} else if (elemento.className.indexOf(valor) != -1) {
return;
} else {
elemento.className += " ";
elemento.className += valor;
elemento.getAttribute("class");
}
};
var linkHover = function () {
var links = document.getElementsByTagName("a");
var aLen = links.length;

for (i = 0; i < aLen; i += 1) {
links[i].onmouseover = function () {
if (this.className.indexOf("rotateRight") === -1 && this.className.indexOf("rotateLeft") === -1) {
addClass("rotateRight", this);
}
};
links[i].onmouseout = function () {
if (this.className.indexOf("rotateRight") !== -1) {

this.className.replace(/rotateRight/gi, "rotateLeft");

} else if (this.className.indexOf("rotateLeft") !== -1) {
this.className.replace(/rotateLeft/gi, "rotateRight");
}
};
}
};
window.onload = function () {
linkHover();
};
--></script>

jacafio
03-05-2012, 06:03 PM
I've fixed it.
And by the way , avoid using in-line coding with javascript.


Here is the right code:


var addClass = function (valor, elemento) {
if (!elemento.className) {
elemento.className = "nothing";
} else if (elemento.className.indexOf(valor) !== -1) {
return;
} else {
elemento.className += " ";
elemento.className += valor;
elemento.getAttribute("class");
}
};
var linkHover = function () {
var links = document.getElementsByTagName("a"), aLen = links.length, i;
console.log(links);
console.log(aLen);
for (i = 0; i < aLen; i += 1) {
links[i].onmouseover = function () {
if (this.className.indexOf("rotateRight") === -1 && this.className.indexOf("rotateLeft") === -1) {
var newClass = addClass("rotateRight", this);
console.log("1: " + newClass);
}
};
links[i].onmouseout = function () {
if (this.className.indexOf("rotateRight") !== -1) {
newClass = this.className.replace(/rotateRight/gi, "rotateLeft");
console.log("2: " + newClass);
} else if (this.className.indexOf("rotateLeft") !== -1) {
newClass = this.className.replace(/rotateLeft/gi, "rotateRight");
console.log("3: " + newClass);
}
this.className = newClass;
console.log(this.className);
};
}
};
window.onload = function () {
linkHover();
};

Edit: the consle.log statements are just for debugging.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum