[js] classname onmouseover functie vertraagd na veel gebruik

[Puck]

Ik heb in JS een functie aangemaakt waarmee ik van elk hml object de class kan aanpassen met een onmouseover en een onmouseout. Ik weet dat ik met de :hover functie en een .htc file dit ook in IE kan maken zonder javascript, maar ik heb helaas te weinig tijd om dit helemaal uit te pluizen.

Javascript:

code:

function getObject(objId) {
    if (document.all && !document.getElementById) {
        return document.all(objId)
    } else {
        return document.getElementById(objId)
    }
}

function colorize(obj) {
    class1 = getObject(obj).className;
    getObject(obj).className = class1+" "+class1+"_over";
}

function uncolorize(obj) {
    class2 = getObject(obj).className;
    class3 = class2.slice(0,-5)
    getObject(obj).className = class3;
}

CSS:

code:

<style>
input.mouseoverbutton {
    font-weight: bold;
    color: #ffffff;
    background: #102C67;
    border: 1px solid #102C67;
    margin-left: 2px;
    cursor: pointer;
    cursor: hand;
}

input.mouseoverbutton_over {
    background: #335C94;    
}
</style>

HTML

code:

<input type="button" id="mouseoverbutton" class="mouseoverbutton"
value="mouseoverbutton" onmouseover="colorize(this.id);" onmouseout="uncolorize(this.id);" />

Ik vraag me eigenlijk gewoon af wat het probleem is. De functie werkt namelijk prima, maar als de functie een aantal keer is aangeroepen word het steeds trager. Hoe kan ik dit oplossen?

Zie voor de vertraging hier

Als je een aantal keer over de button gaat en er weer afgaat met de cursor vertraagd de functie dus...

[André]

Het veranderen van classes is een een traag iets, je kunt beter de style rechtstreeks veranderen.

Ik zie dat je alleen de background veranderd, dus verander className door backgroundColor en klaar is kees.

[ Voor 37% gewijzigd door André op 27-01-2004 18:03 ]

[Bluestorm]

Alert je className eens? want volgens mij wordt ie bij jou iedere keer dat de functie wordt uitgevoerd langer...

edit:

je plakt immer de classname+"_over" iedere keer er bij... maar je haalt alleen "_over" er weer af in uncolorize.

[ Voor 38% gewijzigd door Bluestorm op 27-01-2004 18:15 ]

[André]

Bluestorm schreef op 27 januari 2004 @ 18:13:
Alert je className eens? want volgens mij wordt ie bij jou iedere keer dat de functie wordt uitgevoerd langer...

edit:

je plakt immer de classname+"_over" iedere keer er bij... maar je haalt alleen "_over" er weer af in uncolorize.

Klopt, daardoor zou het ook wel eens zwaar kunnen vertragen, gebruik ipv die slice een substr ofzo.

Maar zoals ik al zei: geen classes switchen.

[Puck]

Ik weet dat classes switch iets trager is. Maar ik wil het dus dynamisch houden. In dit voorbeeld verander ik inderdaad alleen de achtergrond kleur, maar voor andere elementen meer dingen. De snelheid is in principe snel genoeg, alleen na meerdere malen dus steeds trager.

André schreef op 27 januari 2004 @ 18:22:

Klopt, daardoor zou het ook wel eens zwaar kunnen vertragen, gebruik ipv die slice een substr ofzo.

Maar zoals ik al zei: geen classes switchen.

Ga ik proberen, thanks

[Verwijderd]

PS Bij mij is ie niet traag, hoor...

[Puck]

Bluestorm schreef op 27 januari 2004 @ 18:13:
Alert je className eens? want volgens mij wordt ie bij jou iedere keer dat de functie wordt uitgevoerd langer...

edit:

je plakt immer de classname+"_over" iedere keer er bij... maar je haalt alleen "_over" er weer af in uncolorize.

Je hebt gelijk!

Na vaker over de button heen te gaan vult ie em met

code:

mouseoverbutton mouseoverbutton mouseoverbutton mouseoverbutton mouseoverbutton mouseoverbutton mouseoverbutton_over

De functie werkt hierdoor wel nog (aangezien de classes allemaal hetzelfde zijn). Hoe kan ik dit het beste oplossen? Substr. gaat ook niet werken aangezien de classes ook verschillede lengtes zullen hebben.

edit:
Je was net te laat Jouw oplossing zal zeker werken, maar is voor mij niet echt een goede oplossing aangezien ik het script op van alles toe wil passen, waar dit script een stuk makkelijker werkt.

[ Voor 16% gewijzigd door Puck op 27-01-2004 18:56 ]

[Bluestorm]

Puck, het class switchen opzich is niet je probleem, wel dat je steeds weer een stuk achter je className plakt...

na 3 keer over/out staat er al "mouseoverbutton mouseoverbutton mouseoverbutton"

dus je kunt je indenken dat het steeds trager wordt... de string wordt immers steeds langer dus er moet steeds meer gebeuren.

als je class wisselen wilt gebruiken doe dan gewoon onmouseout className='mouseoverbutton' en onmouseover className='mouseoverbutton_over'

en zet dan in je stylesheet

Cascading Stylesheet:

mouseoverbutton, mouseroverbutton_over {...... alles wat ze gemeenschappelijk hebben ...}

mouseoverbutton_over{ alles wat alleen moet bij onmouseover }

maar André heeft wel gelijk dat direct style manipuleren sneller is, maar of je dat hier echt nodig hebt...

edit:
bovenstaande is beetje overbodig nu... aangezien je 't zelf ook al gezien had ondertussen

[ Voor 9% gewijzigd door Bluestorm op 27-01-2004 18:54 ]

[Puck]

Ok ik heb het opgelost, door alles achter de eerste spatie te verwijderen

code:

    c1 = getObject(obj).className;
    c2 = c1.indexOf(" ");
    if (c2 == -1) {
    c3 = c1;
    } else {
    c3 = c1.substr(0,c2);
    }
    c4 = c3 + "_over";
    getObject(obj).className = c3 + " " + c4;

Dank u voor de hulp!

[Verwijderd]

Een kleine tip: geef het object zélf door, niet een ID.

JavaScript:

<input onmouseover="colorize(this)" />
function colorize(obj) {
    class1 = obj.className;
    obj.className = class1+" "+class1+"_over";
}

[crisp]

leuk alternatief voor de substring:

JavaScript:

var s = 'tralala hoihoi';
var t = s.split(' ')[0];
alert(t); // 'tralala'

[Puck]

Verwijderd schreef op 27 januari 2004 @ 21:40:
Een kleine tip: geef het object zélf door, niet een ID.

JavaScript:

<input onmouseover="colorize(this)" />
function colorize(obj) {
    class1 = obj.className;
    obj.className = class1+" "+class1+"_over";
}

Dit kan toch niet goed gaan als ik dezelfde classname meerdere keren gebruik?