Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Help me with my hovering code

    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:

    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) {
                    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!

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hi,
    Try this code:
    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>

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've fixed it.
    And by the way , avoid using in-line coding with javascript.


    Here is the right code:

    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.
    Last edited by jacafio; 03-05-2012 at 07:04 PM. Reason: Forgot to mention console.log statements


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •