[JS] Hover-effect probleem IE

[Gersomvg]

beste Tweakers,

De afgelopen paar dagen heb ik met een zeer bescheiden javascript kennis een scriptje gebouwd voor een onmouseover voor bijv. links. Nu programmeer ik al een aantal jaar in PHP maar javascript heb ik me de laatste paar dagen ook aardig bijgebracht.

Het scriptje wat ik heb gemaakt is cross-browser alleen IE valt (zoals het wel vaker gebeurd) buiten de boot. Ik kom er met de foutmelding die IE geeft niet echt uit waar de fout zit.

Dit is het script.

HTML:

voorbeeld:
<div onmouseover="smoothBlink(this, \'ffffff\', \'BBBBBB\', 600);">Een link</div>
<div onmouseover="smoothBlink(this, \'ffffff\', \'ff6666\', 600);">Een link2</div>
<div onmouseover="smoothBlink(this, \'ffffff\', \'66ff66\', 600);">Een link3</div>
//De div is dus wit, vloeit bij een onmouseover over in BBBBBB (naadloos) en weer terug. 
Daar doet het script 600 milliseconden over.

JavaScript:

    //Decimaal naar hexa
    function d2hClr(d) {
        d = d.toString(16);
        if (d.length < 2)
        {
            d = '0'+d;
        }
        return d;
    }
    
    //Hexa naar decimaal
    function h2dClr(h) {
        return parseInt(h,16);
    }

    //In- en uitfaden van een achtergrondkleur
    counter = 0;
    intervalFadeClr = '';
    function colorFadeClr(){
        if (counter < numberOfChanges)
        {
            tempColor[1] = d2hClr(h2dClr(tempColor[1])+clrStep[1]);
            tempColor[2] = d2hClr(h2dClr(tempColor[2])+clrStep[2]);
            tempColor[3] = d2hClr(h2dClr(tempColor[3])+clrStep[3]);
        }
        else
        {
            tempColor[1] = d2hClr(h2dClr(tempColor[1])-clrStep[1]);
            tempColor[2] = d2hClr(h2dClr(tempColor[2])-clrStep[2]);
            tempColor[3] = d2hClr(h2dClr(tempColor[3])-clrStep[3]);
        }
        targetElement2.style.backgroundColor = '#'+tempColor.join('');
        counter++;
        if (counter == numberOfChanges*2)
        {
            stopInterval();
        }
    }
    
    function stopInterval()
    {
        clearInterval(intervalFadeClr);
        intervalFadeClr = '';
        counter = 0;
    }
    
    function smoothBlink(targetElement, normalColor, blinkColor, duration) {
        if (intervalFadeClr != '')
        {
            stopInterval();
            targetElement2.style.backgroundColor = '#'+normalColor;
        }
        changeTimeOut = 20; //milliseconden
        numberOfChanges = duration/changeTimeOut/2;
        
        nClrSplit = new Array(3);
        nClrSplit[1] = normalColor.substr(0,2);
        nClrSplit[2] = normalColor.substr(2,2);
        nClrSplit[3] = normalColor.substr(4,2);
        
        bClrSplit = new Array(3);
        bClrSplit[1] = h2dClr(blinkColor.substr(0,2));
        bClrSplit[2] = h2dClr(blinkColor.substr(2,2));
        bClrSplit[3] = h2dClr(blinkColor.substr(4,2));
        
        clrStep = new Array(3);
        clrStep[1] = Math.round((bClrSplit[1]-h2dClr(nClrSplit[1]))/numberOfChanges);
        clrStep[2] = Math.round((bClrSplit[2]-h2dClr(nClrSplit[2]))/numberOfChanges);
        clrStep[3] = Math.round((bClrSplit[3]-h2dClr(nClrSplit[3]))/numberOfChanges);
        
        tempColor = nClrSplit;
        targetElement2 = targetElement;
        intervalFadeClr = setInterval(colorFadeClr, changeTimeOut);
    }

Voorbeeld:
www.gersom.nl/smoothblink

Aangezien het verder wel crossbrowser is maar alleen in IE problemen geeft denk ik niet dat het om een schoonheidsfoutje gaat. Weet iemand waar de fout kan zitten? Of is dit gewoon crappy van IE?

[SPee]

1. Wat is de melding van IE
2. Heb je het geprobeerd met de IE-dev toolbar om het probleem te zoeken
3. Waarom niet een al beschikbaar script die dat kan, b.v. jquery

[BtM909]

SPee schreef op donderdag 04 december 2008 @ 15:24:
1. Wat is de melding van IE
2. Heb je het geprobeerd met de IE-dev toolbar om het probleem te zoeken
3. Waarom niet een al beschikbaar script die dat kan, b.v. jquery

1. Alsof IE JS meldingen je vaak verder helpen
2. Wat voegt dit toe aan 't probleem of de oplossing van TS?
3. Misschien als leertraject ("maar javascript heb ik me de laatste paar dagen ook aardig bijgebracht.")

Oftewel, als je geen inhoudelijke reactie heb, maak dan een TR aan en blijf uit het topic weg

[DanielG]

IE zegt dat hij de error op regel 31 krijgt, dat is je eerste regel in de functie colorFadeClr(tempColor, targetElement).

de foutmelding "undefined is leeg of geen object" komt volgens mij omdat de functie colorFadeClr aanroepen wordt zonder argumenten.

En dat wordt weer veroorzaakt omdat IE "setInterval(callback, delay, param1, param2, ..., paramN);" niet goed implementeerd.

zie: http://msdn.microsoft.com/en-us/library/ms536749(VS.85).aspx

edit:

Wat neerkomt op: IE geeft geen argumenten mee met setInterval().

[ Voor 7% gewijzigd door DanielG op 04-12-2008 15:32 . Reden: ff laatste regel voor de duidelijkheid. ]

[Gersomvg]

Prob solved
Ik heb het nu zo gedaan:

JavaScript:

tempColor = nClrSplit;
targetElement2 = targetElement;
intervalFadeClr = setInterval(colorFadeClr, changeTimeOut);

Hartelijk dank (niet aan MS )

[ Voor 8% gewijzigd door Gersomvg op 04-12-2008 15:42 ]

[reddevil]

DanielG schreef op donderdag 04 december 2008 @ 15:30:
IE zegt dat hij de error op regel 31 krijgt, dat is je eerste regel in de functie colorFadeClr(tempColor, targetElement).

de foutmelding "undefined is leeg of geen object" komt volgens mij omdat de functie colorFadeClr aanroepen wordt zonder argumenten.
...

Bij mij 32
Maar goed ... regel 32... kan niet moeilijk zijn om dan te vinden wat het probleem is.

[DanielG]

reddevil schreef op donderdag 04 december 2008 @ 15:43:
Maar goed ... regel 32... kan niet moeilijk zijn om dan te vinden wat het probleem is.

Dat staat al in mijn post, het komt vanwege hoe setInterval wordt gebruikt.

[Gersomvg]

Ik heb even het artikel op MSDN gedownrate met feedback erbij

Maar nog 1 ding, iedereen kan dit script naar hartelust gebruiken (maar dat is misschien sowieso al het geval als je een script post op tweakers; ken dat gedeelte van de policy niet ).
Ik heb er niet voor niets zo hard aan gewerkt, dus kopieer maar naar hartelust (heb de wijzigingen nog even doorgevoerd in de startpost).