[js] colorfade scriptje werkt alleen met alert!?

[BikkelZ]

Ik heb een rollover-colorfade, die ik zonder schokken wil laten werken. Dus ik gebruik voor rollover en rollout een for-loopje waarbij dezelfde waarde i gebruikt wordt. Is hij dus nog niet volledig naar wit (in dit geval), doorloopt het mouseout gedeelte ook automatisch minder stappen.

mOver werkt prima, zo op het oog. mOut werkt alleen als ik alert(i) gebruik en door de stappen heen enter, als ik dat niet gebruik, dan doorloopt hij dezelfde fade als mOver zo op het oog. Het wordt getriggerd met een simpele div die al een #0000FF achtergrond heeft.

JavaScript:

    var orval = Array(0, 0, 255);
    var toval = Array(255, 255, 255);
    var steps = 12;

    var i = 1;

    var rstep = (toval[0] - orval[0]) / steps;
    var gstep = (toval[1] - orval[1]) / steps;
    var bstep = (toval[2] - orval[2]) / steps;
    var theobj = null;
    var hexColor = Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

    function mOver(obj)
    {
        theobj = obj;
        for (i; i < steps + 1; i++)
        {
            setTimeout("handleChange("+i+")", i * 80);
        }
    }

    function mOut(obj)
    {
        theobj = obj;
        for (i; i > 0; i--)
        {
            alert(i);
            setTimeout("handleChange("+i+")", i * 80);
        }
    }

    function handleChange(i)
    {
        var newr = doubleHex(i, rstep, orval[0]);
        var newg = doubleHex(i, gstep, orval[1]);
        var newb = doubleHex(i, bstep, orval[2]);
        theobj.style.background = "#"+newr+newg+newb;
    }

    function doubleHex(num, step, oldcolval)
    {
        var newcol = oldcolval + Math.round(num * step);
        if (newcol > -1 && newcol < 256)
        {
            switch (newcol)
            {
            case 254:
                return "ff";
            case 0:
                return "00";
            default:
                var newhex1 = hexColor[(Math.round(newcol / 16) - 1)];
                var secondnum = newcol % 16;
                if (secondnum != 0)
                {
                    secondnum = secondnum - 1;
                }
                var newhex2 = hexColor[(newcol % 16)];
                return "" + newhex1 + "" + newhex2 + "";
            }
        }
        else if (newcol > 255)
        {
            return "ff";
        }
        else
        {
            return "00";
        }
    }

[BikkelZ]

OK, het komt gedeeltelijk door de buffers die door de setTimeOut ingesteld worden denk ik. Die worden gevuld omdat het loopje sowieso gedraaid wordt, of je nou wel of niet je muis er af haalt.

[BikkelZ]

Het vermoeden rijst dat setTimeout() en clearTimeout() geschreven zijn door Stephen King. Hoog horrorgehalte

Ik gooi mijn setTimeout-dingetjes nu in een array, en als ik die dan weer ga poppen dan komen er cijfertjes uit die wel iedere keer uniek zijn? En die dus helemaal niets doen als ik clearTimeout() er op los laat?

[BikkelZ]

Timeouts en de clearings aan window gehangen, helaas, helpt ook niet.

Als ik bij iedere stap iets alert, dan werkt het bij de mouseout, doe ik dat niet, doet hij niet wat ik verwacht.

[ Voor 55% gewijzigd door BikkelZ op 11-09-2006 15:28 ]

[BikkelZ]

Hij zet de timeouts in de verkeerde volgorde neer, waar je niet zoveel van merkt als je tussendoor op ENTER moet drukken. OK thanks

[BikkelZ]

Werkend script:

JavaScript:

    var orval = Array(0, 0, 255);
    var toval = Array(255, 255, 255);
    var steps = 12;
    var steptime = 40

    var objectsTimes = Array();

    var i = 1;

    var rstep = (toval[0] - orval[0]) / steps;
    var gstep = (toval[1] - orval[1]) / steps;
    var bstep = (toval[2] - orval[2]) / steps;
    var theobj = null;
    var hexColor = Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

    var timeouts = Array();

    function mOver(obj)
    {
        j = checkTheObj(obj.id);
        clearTOs(obj.id, 'out');
        if (timeouts[obj.id] == undefined)
        {
            timeouts[obj.id] = Array();
        }
        if (timeouts[obj.id]['in'] == undefined)
        {
            timeouts[obj.id]['in'] = Array();
        }
        for (j; j < steps + 1; j++)
        {
            timeouts[obj.id]['in'].push(window.setTimeout("handleChange("+j+", '"+obj.id+"')", (j * steptime) - steptime));
        }
    }

    function mOut(obj)
    {
        j = checkTheObj(obj.id);
        clearTOs(obj.id, 'in');
        if (timeouts[obj.id] == undefined)
        {
            timeouts[obj.id] = Array();
        }
        if (timeouts[obj.id]['out'] == undefined)
        {
            timeouts[obj.id]['out'] = Array();
        }
        for (j; j > 0; j--)
        {
            var timetodo = (steps) * steptime - (j * steptime);
            var timeevent = window.setTimeout("handleChange("+j+", '"+obj.id+"')", timetodo);
            timeouts[obj.id]['out'].push(timeevent);
        }
    }

    function handleChange(as, arrownum)
    {
        var newr = doubleHex(as, rstep, orval[0]);
        var newg = doubleHex(as, gstep, orval[1]);
        var newb = doubleHex(as, bstep, orval[2]);
        document.getElementById(arrownum).style.background = "#"+newr+newg+newb;
        objectsTimes[arrownum] = as;
    }

    function clearTOs(obid, ioro)
    {
        var falser = 0;
        var goodr = 0;
        //alert(timeouts[obid]);
        if (timeouts[obid] !== undefined)
        {
            r = timeouts[obid][ioro].length;
            while (s = timeouts[obid][ioro].pop())
            {
                window.clearTimeout(s);
            }
        }
    }

    function doubleHex(num, step, oldcolval)
    {
        var newcol = oldcolval + Math.round(num * step);
        if (newcol > -1 && newcol < 256)
        {
            switch (newcol)
            {
            case 254:
                return "ff";
            case 0:
                return "00";
            default:
                var newhex1 = hexColor[(Math.round(newcol / 16) - 1)];
                //alert("first hex "+newhex1); 
                var secondnum = newcol % 16;
                if (secondnum != 0)
                {
                    secondnum = secondnum - 1;
                }
                var newhex2 = hexColor[(newcol % 16)];
                //alert("second hex "+newhex2);
                return "" + newhex1 + "" + newhex2 + "";
            }
        }
        else if (newcol > 255)
        {
            return "ff";
        }
        else
        {
            return "00";
        }
    }

    function checkTheObj(theid)
    {
        if (objectsTimes[theid] !== undefined)
        {
            retval = objectsTimes[theid];
        }
        else
        {
            objectsTimes[theid] = i;
            retval = i;
        }
        return retval;
    }

[André]

Zo, een one man's topic? Graag editten in het vervolg ipv 5 reacties achter elkaar te plaatsen.