[JS] Kleur tabelitem laten veranderen - Softwareontwikkeling

vrijdag 21 maart 2003 11:15

Acties:

Verwijderd

Topicstarter

Ik probeer een soort van tabs-bar te bouwen in JavaScript/HTML. Ik kom er geen wijs uit wat ik fout doe. Wellicht dat iemand me kan helpen...

code:

<html>
<head><title>Tab test</title>

<script type="text/javascript" language="JavaScript">

function tabchange(input)
{
   var i=0;
      
   for (i; i==5; i++)
   {
      if (i!=input) {i.bgColor='black';};
      alert(i);
   }   
}

</script></head>

<body link='#000000' vlink='#000000'>

<table border=1 bgColor='#6699FF'><tr>
    <td id="1" onMouseOver="this.bgColor='red'" onMouseOut="this.bgColor='#6699FF'" onMouseDown="tabchange(1)";><a href="linkje" target="eform">Linkje!</a></td> 
    <td id="2" onMouseOver="this.bgColor='red'" onMouseOut="this.bgColor='#6699FF'" onMouseDown="tabchange(2)";><a href="linkje2" target="eform">Linkje 2</a></td>
        </tr></table>
</center>
</body></html>

Het vreemde is dat de over en out events prima werken, maar ik het scriptje voor mousedown (dit zorgt ervoor dat een tab die aangeklikt is een andere kleur krijgt) niet aan de gang krijg.

Enig idee wat ik fout doe? Krijg er zo langzamerhand grijze haren van

vrijdag 21 maart 2003 11:17

Acties:

ACM

Software Architect

Werkt hier

Wat staat er in de FAQ over Javascript?

precies, dat het in W&G moet...
P&W -> W&G

vrijdag 21 maart 2003 11:18

Acties:

Verwijderd

Topicstarter

Sorry AGM...

vrijdag 21 maart 2003 11:23

Acties:

SchizoDuckie

Kwaak

Dit is een heel simpel logica probleem. Na een mousedown krijg je namelijk weer een mouseout, die je kleur weer terug veranderd

Oplossing: hou een clicked var bij voor elke tab

Stop uploading passwords to Github!

vrijdag 21 maart 2003 11:27

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

id's mogen niet met een getal beginnen, maak dus id="tdElement1"

en roep hem niet op naam aan (document.all-syndroom) maar via document.getElementById('tdElement01')

td onmouseover="tabChange(this)" wil misschien ook werken:
(en dan functie tabchange:

code:

function tabChange(elm)
{
   elm.style.backgroundColor = "#FFCC00"
}

, is wat eenvoudiger)

[ Voor 41% gewijzigd door RM-rf op 21-03-2003 11:28 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 21 maart 2003 11:27

Acties:

Verwijderd

Het is niet echt antwoord op je vraag, maar je kan dit ook zonder JS doen. Ik heb toevallig nog een voorbeeldje online staan. HTML & CSS only.

vrijdag 21 maart 2003 11:37

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Verwijderd schreef op 21 maart 2003 @ 11:27:
Het is niet echt antwoord op je vraag, maar je kan dit ook zonder JS doen. Ik heb toevallig nog een voorbeeldje online staan. HTML & CSS only.

CSS2 ondersteunt ook :pseudoclasses voor alle elementen, aldus kun je :hover (onmouseover) en :active al definieren voor je TD en niet de grootte van je A te faken, dit levert je problemen op met andere links en moet je alsnog met specifieke classes werken.
enkel msie ondersteunt pseudoclasses voor andere elementen dan A nog niet.

verder kun je kijken naar de mogelijkheden van behaviours (.HTC MSIE) en XBL-binding (mozilla) om dynamische effecten via CSS te binden aan elementen.

voor de topicstarter, om het gewenste effect te bereiken lijkt zoiets me beter te zijn (generieker):

code:

function tabChange(elm) 
{
   elmParent = elm.parentElement
   for (i=0; elm2 = parentElement.children[i], i++)
       elm2.style.backgroundColor = (elm.id == elm2.id) ? "#FFCC00" : "#CC0000"
}

[ Voor 11% gewijzigd door RM-rf op 21-03-2003 11:38 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 21 maart 2003 12:20

Acties:

Verwijderd

Topicstarter

Ik heb nu deze functie gemaakt:

code:

function tabchange(input)
{
   t1.style.bgColor='#6699FF';
   t2.style.bgColor='#6699FF';
   input.style.backgroundColor='green';
}

En dit werkt opzich, maar 1 nadeel: de achtergrond gemaakt met backgroundcolor is vast, deze is niet met met bgcolor bij te stellen...

Hoe los ik dit op... heeft style een "free" mogelijkheid?

vrijdag 21 maart 2003 12:34

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Verwijderd schreef op 21 maart 2003 @ 12:20:
Ik heb nu deze functie gemaakt:
code:
1
2
3
4
5
6
function tabchange(input)
{
   t1.style.bgColor='#6699FF';
   t2.style.bgColor='#6699FF';
   input.style.backgroundColor='green';
}
En dit werkt opzich, maar 1 nadeel: de achtergrond gemaakt met backgroundcolor is vast, deze is niet met met bgcolor bij te stellen...

Hoe los ik dit op... heeft style een "free" mogelijkheid?

code:

1	backgroundColor = 'transparent'

, maar dat maakt hem 'doorzichtig' ik meen dat je hem ook op null of false kan zetten in een script

style.bgColor is een foute en ongeldige propertie, mogelijk dat msie hem als shorthand erkent, maar beter is het hem niet toe te passen, is nogal verwarrend, aangezien elementObject.bgColor ook werkt, maar direct de html-tag attribute aanspreekt

verder dien je absoluut niet t1.style te gebruiken, dat is slordig, maar gebruik document.getElementById('t1') of eventueel een findObj functie voor backwards compatibiliteit met msie4 en ns4x.

een loopje, yoals in mn eerdere voorbeeld, met parentElement en children[] is nog beter, aangezien het generiek is, en niet afhankelijk van id-attributes met oplopende getallen e.d., zodra je meer TD's in een TR krijgt past de functie zich dan automatisch aan aan het aantal TD's.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 21 maart 2003 13:05

Acties:

Bosmonster

*zucht*

Eerlijk gezegd vind ik de methode om overal doorheen te loopen bij iedere event nogal omslachtig en overbodig.

Als je het al generiek wilt houden plak dan vaste event-functies aan de elementen als ze ingeladen zijn. Bijvoorbeeld (niet getest, maar het principe moet werken

):

code:

function hoverOver () {
   this.style.backgroundColor = "#FF0000";
}

function hoverOut () {
   this.style.backgroundColor = "#00FF00";
}

function addEvents () {
   var ele = document.getElementsByClassName ('hover');
   for (var i=0; i<ele.length; i++) {
       ele[i].onmouseover = hoverOver;
       ele[i].onmouseout = hoverOut;
   }
}

onload = addEvents;

en dan je hover td's gewoon classname "hover" geven bijvoorbeeld. Hoe je aan de elementen komt maakt niet zoveel uit, ik vind persoonlijk via ClassName erg netjes.

Enige jammere is dat je dit alleen aan de window of body onload kan koppelen en niet aan bijvoorbeeld een omsluitende DIV. Helaas kennen losse elementen nog geen onload-events.

[ Voor 15% gewijzigd door Bosmonster op 21-03-2003 13:11 ]