Ok, ik heb hier nog even langer dan goed voor mij is naar gekeken en heb het nu aan de praat.
Allereerst wat observaties:
- firstChild.data retourneert "undefined", dit kun je oplossen door voorkomens (2x) van firstChild.data te vervangen door firstChild.innerHTML
- de regenboog functionaliteit verwacht een element met een id om het element wat de regenboog functionaliteit moet hebben heen anders wordt de "span" (nogal misleidende naam) niet gevonden
- omdat je nu potentieel meerdere regenbogen hebt is het handig om alle voorkomens op te slaan in een array, te meer omdat deze ook allemaal aparte timers hebben
Om dit aan de praat te krijgen moet je het volgende doen:
- Zoals aangegeven, vervang de voorkomens (2x) van firstChild.data door firstChild.innerHTML
- Schrijf wat extra code die het gebruik van meerdere regenbogen mogelijk maakt, bijvoorbeeld als volgt (met gebruikmaking van jQuery):
JavaScript
$().ready(function() {
var rainbows = [];
function createRainbow(element, id) {
$(element).wrap('<div id="'+id+'"></div>');
rainbows[id] = new RainbowSpan(document.getElementById(id), 0, 360, 255, 50, 18);
rainbows[id].timer = window.setInterval(function() {
rainbows[id].moveRainbow();
}, rainbows[id].speed);
}
$('.rainbow').each(function(index, element) {
createRainbow(element, 'r'+index);
});
});Het bovenstaande is getest en werkt in FireFox, Chrome en IE Edge.
Bovenstaande oplossing kan ik gebruiken maar zit nu al aan 7k users dus dat wordt wel een flinke load.
Zie niet helemaal hoe dit relevant is want JavaScript = clientside, of ik moet je verkeerd begrijpen.
