Toon posts:

[JS] Bgcolor cel met vertraging

Pagina: 1

Acties:

39 views sinds 30-01-2008
Reageer

maandag 18 maart 2002 21:14

Acties:

unitzero

Topicstarter

Ik probeer hier een effectje in een menu te maken dat de achtergrond van de cel waarin dat menu-item staat van kleur veranderd bij onMouseover en bij onMouseout na een kleine vertraging weer terugveranderd van kleur. Nu zou je denken dat je met:

code:

1	onMouseout = setTimeout('this.style.backgroundColor = "#123456"', 500)

een heel eind komt, maar niets is minder waar aangezien 'this' de focus verliest zodra de Timeout is ingegaan. IRT wist me te adviseren dat je 'this' dan maar als global variabele moest definieren. Ook dat werkt niet!

Iemand wel een idee hoe dit op te lossen?

Ik heb momenteel:

code:

<script language="Javascript1.2">
var celletje = this;

function colorChange() {
celletje.style.backgroundColor = '#6699cc';
}

</script>

en in de body gevolgd door:

code:

1	onMouseOut="setTimeout('colorChange()', 1000)"

Of ben ik hier gewoon een stom leestekentje vergeten?

Klik hier voor een voorbeeld.

maandag 18 maart 2002 21:30

Acties:

El Martino

Zo niet, dan toch.

Stop het huidige element als argument in je functie-aanroep, dan moet 't lukken. Dus iets van

code:

1	onMouseOut="setTimeout('colorChange(this)', 1000)"

En vervolgens

code:

1
2
3

function colorChange(celletje) {
celletje.style.backgroundColor = '#6699cc';
}

Oh ja, check m'n site voor een voorbeeld

"To make a bad day worse, spend it wishing for the impossible", Calvin (Calvin & Hobbes)

maandag 18 maart 2002 21:49

Acties:

unitzero

Topicstarter

Ik zal even dieper in jou code gaan kijken, jij doet het nog ietsje uitgebreider. Probleem is dat jou schijnbaar simpele oplossing nog steeds niet werkte...

Nog steeds:

Regel: 1
Teken: 1
Fout: Object wordt verwacht
Code: 0

Nog een andere mogelijkheid of heb ik een '-tje vergeten...

maandag 18 maart 2002 21:51

Acties:

crisp

Devver

Pixelated

Ik denk dat je een probleem gaat krijgen als je op deze manier meerdere cellen wilt gaan manipuleren met een timeout. De beste methode is dan om je cellen een id te geven, en dat als argument mee te geven aan de functie.
Ik had zelf de volgende oplossing bedacht:

code:

<html>
<head>
<title>Cellen</title>
<script language="JavaScript">

var celletje = new Array();

function restoreCell(cell, color) {

  celletje[cell] = setTimeout('changeCell(\''+cell+'\', \''+color+'\')', 1000);

}

function changeCell(cell, color) {

  if (celletje[cell]) {
    clearTimeout(celletje[cell]);
    celletje[cell] = null;
  }
  document.getElementById(cell).style.backgroundColor = color;

}

</script>
</head>
<body>
<table>
  <tr>
    <td id="cell1" onMouseOver="changeCell('cell1', '#0000ff')" onMouseOut="restoreCell('cell1', '#ffffff')">Cell 1</td>
  </tr>
  <tr>
    <td id="cell2" onMouseOver="changeCell('cell2', '#0000ff')" onMouseOut="restoreCell('cell2', '#ffffff')">Cell 2</td>
  </tr>
  <tr>
    <td id="cell3" onMouseOver="changeCell('cell3', '#0000ff')" onMouseOut="restoreCell('cell3', '#ffffff')">Cell 3</td>
  </tr>
  <tr>
    <td id="cell4" onMouseOver="changeCell('cell4', '#0000ff')" onMouseOut="restoreCell('cell4', '#ffffff')">Cell 4</td>
  </tr>
  <tr>
    <td id="cell5" onMouseOver="changeCell('cell5', '#0000ff')" onMouseOut="restoreCell('cell5', '#ffffff')">Cell 5</td>
  </tr>
</table>
</body>
</html>

Intentionally left blank

maandag 18 maart 2002 21:56

Acties:

SWINX

hmmm.... volgens mij gaat dit

code:

1	setTimeout('changeCell(\''+cell+'\', \''+color+'\')', 1000);

niet echt werken omdat je meerdere keren de ' wilt gebruiken

probeer eens:

code:

1	setTimeout("changeCell(\'"+cell+"\', \'"+color+"\')", 1000);

Mannen komen van Mars Tweakers, vrouwen van Venus Bokt

maandag 18 maart 2002 21:59

Acties:

crisp

Devver

Pixelated

Op maandag 18 maart 2002 21:56 schreef SWINX het volgende:
hmmm.... volgens mij gaat dit
code:
1
setTimeout('changeCell(\''+cell+'\', \''+color+'\')', 1000);
niet echt werken omdat je meerdere keren de ' wilt gebruiken

probeer eens:
code:
1
setTimeout("changeCell(\'"+cell+"\', \'"+color+"\')", 1000);

Dat werkt dus echt wel, aangezien ik er een aantal escape.
Jouw manier werkt ook wel, maar ik ben een freak als het gaat om eenduidigheid: single quotes in JS en doublequotes in HTML

Intentionally left blank

maandag 18 maart 2002 22:15

Acties:

unitzero

Topicstarter

Ik ben niet zo'n held in Javascript, maar toch krijg ik het met jullie stukje code niet werkend. Ik begrijp op zich wel wat jullie doen. Hij is inmiddles in de regel

code:

1	<td id="cell1" width=60 align=center onMouseOver="changeCell('cell1', '#6699cc')" onMouseOut="restoreCell('cell1', '#10187F')">

op zoek naar een object wat er niet is. Ik ben het dus echt even kwijt.

maandag 18 maart 2002 22:36

Acties:

crisp

Devver

Pixelated

Op maandag 18 maart 2002 22:15 schreef UltiemeLeek het volgende:

...
op zoek naar een object wat er niet is. Ik ben het dus echt even kwijt.

Misschien even handig als je meldt met welke browser je werkt, en voor welke browser(s) het geschikt moet zijn. Mijn voorbeeldje is DOM-compliant, dat wil zeggen dat het o.a. zou moeten werken in IE5+, NS6+ en Mozilla.

Intentionally left blank

maandag 18 maart 2002 22:44

Acties:

unitzero

Topicstarter

Ok, ik heb hier IE6, en ik wil ook graag dat het een beetje NS-compatibel is.

Op deze manier gaat het echter een beetje op een verknipte script-request lijken, en dat was niet echt mijn bedoeling (hoewel het wel makkelijk is

)

Ik heb dus de code uit de head gekopieerd en ook de code uit de td-regel. (Zoals die te zien is in mijn vorige post)

Hij geeft (in IE6 dus) een fout dat hij in regel 1 teken 1 een object verwacht.

maandag 18 maart 2002 22:47

Acties:

crisp

Devver

Pixelated

Ik weet niet in hoeverre je online voorbeeld nog gebruikt kan worden als leidraad, maar daarin zie ik dat je je <script> sectie al begint voordat je <style> sectie is afgesloten. Kijk daar eens naar, want je hebt daar dezelfde error namelijk...

Intentionally left blank

maandag 18 maart 2002 22:56

Acties:

unitzero

Topicstarter

... hmmmmmmm. Shame on me. Dat is alweer 1 fout minder...

Ik ga het nog eens proberen, maar nu wél goed!

maandag 18 maart 2002 23:11

Acties:

unitzero

Topicstarter

Jep, het werkt. Omdat het dus stiekem toch een script-request is geworen: bedankt (ookal overtreed ik daarme alle regels van dit forum)

maandag 29 april 2002 19:37

Acties:

Verwijderd

ik heb een soortgelijke functie als deze (ook mouseover met vertraging) echter ik wil bij mouseout dat de mousover functie gestopt wordt ... anders wordt (in dit geval) de achtergrondkleur verandert terwijl de cursor al buiten de cell is ...

iemand een id ?

Pagina: 1

Reageer