JavaScript Forum

**iwebkit** · 11-19-2008, 01:15 PM

Hey guys im new here

I need a little help with this javascript. It works well but never it doesnt seem to execute Code:

window.setTimeout(reChangeClass, 3000);

when you change classes. The problem simply is the classes do not change to "slidreset" but stay on "slide" or "slide2"

could anyone help me?? thanks a lot

HTML Code:

function addListener(o, e, f) {
    if (o.addEventListener) {
        o.addEventListener(e, f, false);
    } else {
        o.attachEvent("on" + e, f);
    }
}



function bindAnchors() {
    try {
        var collection1 = document.getElementById("topmenu").getElementsByTa  gName("a");
        for (i = 0; i <= collection1.length - 1; ++i) {
            var lien = collection1.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass2);
        }
    } catch (e) {}
    try {
        var collection2 = document.getElementById("content").getElementsByTa  gName("a");
        for (i = 0; i <= collection2.length - 1; ++i) {
            var lien = collection2.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
    try {
        var collection5 = document.getElementById("footer").getElementsByTag  Name("a");
        for (i = 0; i <= collection5.length - 1; ++i) {
            var lien = collection5.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
    try {
        var collection3 = document.getElementById("toprightmenu").getElement  sByTagName("a");
        for (i = 0; i <= collection3.length - 1; ++i) {
            var lien = collection3.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
    try {
        var collection4 = document.getElementById("toprightbutton").getEleme  ntsByTagName("a");
        for (i = 0; i <= collection4.length - 1; ++i) {
            var lien = collection4.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
}


function reChangeClass() {
    document.getElementById("content").className = "slidereset";
    document.getElementById("footer").className = "slidereset";
    document.getElementById("list").className = "slidereset";
}


function changeClass1() {
    document.getElementById("content").className = "slide";
    document.getElementById("footer").className = "slide";
    document.getElementById("list").className = "slide";
    window.setTimeout(reChangeClass, 3000);


}


function changeClass2() {
    document.getElementById("content").className = "slide2";
    document.getElementById("footer").className = "slide2";
    document.getElementById("list").className = "slide2";
    window.setTimeout(reChangeClass, 3000);
}

addListener(window, "load", bindAnchors);

**LogicFlux** · 11-27-2008, 07:46 PM

It seems like it's working. I created a little document using the code just to test if the events were being bound and the reChangeClass() function was being called. These things seem to be happening as expected.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title> reChangeClass test </title>

  <style>
  
   .slidereset {background-color:yellow;}
   
  </style>

  <script language="javascript">

    function addListener(o, e, f) {
        if (o.addEventListener) {
            o.addEventListener(e, f, false);
        } else {
            o.attachEvent("on" + e, f);
        }
    }


    function bindAnchors() {
        try {
            var collection1 = document.getElementById("topmenu").getElementsByTagName("a");
            for (i = 0; i <= collection1.length - 1; ++i) {
                var lien = collection1.item(i);
                if (lien.className != 'noslide')
                    addListener(lien, "click", changeClass2);
            }
        } catch (e) {}
        try {
            var collection2 = document.getElementById("content").getElementsByTagName("a");
            for (i = 0; i <= collection2.length - 1; ++i) {
                var lien = collection2.item(i);
                if (lien.className != 'noslide')
                    addListener(lien, "click", changeClass1);
            }
        } catch (e) {}
        try {
            var collection5 = document.getElementById("footer").getElementsByTagName("a");
            for (i = 0; i <= collection5.length - 1; ++i) {
                var lien = collection5.item(i);
                if (lien.className != 'noslide')
                    addListener(lien, "click", changeClass1);
            }
        } catch (e) {}
        try {
            var collection3 = document.getElementById("toprightmenu").getElementsByTagName("a");
            for (i = 0; i <= collection3.length - 1; ++i) {
                var lien = collection3.item(i);
                if (lien.className != 'noslide')
                    addListener(lien, "click", changeClass1);
            }
        } catch (e) {}
        try {
            var collection4 = document.getElementById("toprightbutton").getElementsByTagName("a");
            for (i = 0; i <= collection4.length - 1; ++i) {
                var lien = collection4.item(i);
                if (lien.className != 'noslide')
                    addListener(lien, "click", changeClass1);
            }
        } catch (e) {}
    }


    function reChangeClass() {

        alert('in reChangeClass!!!');

        document.getElementById("content").className = "slidereset";

        //alert('document.getElementById("content").className = ' + document.getElementById("content").className);
        //document.getElementById("footer").className = "slidereset";
        //document.getElementById("list").className = "slidereset";
    }


    function changeClass1() {
        //document.getElementById("content").className = "slide";
        //document.getElementById("footer").className = "slide";
        //document.getElementById("list").className = "slide";
        alert('in changeClass1!!!');
        window.setTimeout(reChangeClass, 3000);
    }


    function changeClass2() {
        //document.getElementById("content").className = "slide2";
        //document.getElementById("footer").className = "slide2";
        //document.getElementById("list").className = "slide2";
        alert('in changeClass2!!!');
        window.setTimeout(reChangeClass, 3000);
    }

    addListener(window, "load", bindAnchors);

  </script>
 </head>

 <body>
  <div id="topmenu">
    <a href="#" id="topmenu-a-1">1</a>
    <a href="#" id="topmenu-a-2">2</a>
    <a href="#" id="topmenu-a-3">3</a>
  </div>

  <div id="toprightbutton">
    <a href="#" id="toprightbutton-a-1">1</a>
    <a href="#" id="toprightbutton-a-2">2</a>
    <a href="#" id="toprightbutton-a-3">3</a>
  </div>

  <div id="content" class="default-class">asdg;kasdjglsakdgjasldkgj</div>
 </body>
</html>

Are you using firebug? You can view the html tab in firebug to see if the class attribute has changed to 'slidereset'.