 JS interesse |
|
<<< edit: ik zat oudere posts te lezen, scroll naar beneden voor een beter antwoord >>>
Er is maar heel weinig dat klopt aan je code.
- 't is event = function() {...} (of een van de andere mogelijkheden, niet if (event) {...}
- document.body.onscroll wordt alleen ondersteunt door IE6+ en Opera 7+, zo'n beetje alles en iedereen ondersteunt window.onscroll
- je stopt de huidige src van het plaatje in de variabele x en vervolgens stop je een andere waarde (uit de array) in x, maar de src van het plaatje pas je nooit aan
- je if (i>2) is altijd false, maar als je een vierde element zou toevoegen aan de array waardoor het wel true kan worden, dan zorgt dit if statement ervoor dat je oneindig lang door je for blijft loopen
- zou alles binnen je for zo zijn als het moet, dan zou het script nog steeds niet doen wat je wilt, want dan zou zou het als er gescrollt wordt, dan zou het plaatje veranderen in de eerste mogelijheid, meteen daarna naar de volgende mogelijkheid en dat net zo lang totdat de laatste uiteindelijk blijft staan. Dit is dan dus ook het enige plaatje dat de gebruiker te zien krijgt
Let er daarnaast op dat onscroll afgaat als de positie van het document verandert, niet als de scrollwheel wordt gebruikt. Dus het event gaat niet af als de pagina niet lang genoeg is om het hele scherm te vullen (wat de gebruiker ook doet) en het gaat wel af als de inhoud langer is dan op het scherm past en de gebruiker scrollt met de scrollwheel, de scrollbar of met de pijltjes.
<<< reactie op de nieuwe code dan maar >>>
Je code is eng. Begin met het weghalen van al de 's en ze te vervangen door een css attribuut (wellicht text-align) en ga dan door je css niet in style attributen te zetten maar bovenin in je style-tag (liever nog in een apart css-bestand, maar in de header is in principe ook goed) en het wordt al een vrij lief beestje.
Het zelfde moet je ook echt doen met je javacript. In een event (zoals onclick) kun je een opdracht of een aantal (gescheiden door puntkomma's) weergeven, maar als het meer dan twee of drie word opdrachten wordt, dan zet je het voor de overzichtelijkheid bovenin de pagina in je script tag als een functie, en roep je de functie simpelweg aan in je event-attribuut.
Het is ook erg nuttig om ids te hebben waaruit je kunt opmaken waar je het oer hebt, in plaats van '1', '2' en '3'. Verder moet << << zijn en >> >> omdat < en > niet zomaar in html mogen voorkomen.
Dan hebben we een overzichtelijk stukje code en kunnen we gaan kijken wat er mis is. De buttons doen het prima (omdat er geen linebreaks mochten staan in je onclick-attribuut). Ik kom dan weer terug op wat ik meteen al zei (toen ik nog alleen het eerste stukje code had gegeven):
- document.body.onscroll wordt alleen ondersteunt door IE6+ en Opera 7+, zo'n beetje alles en iedereen ondersteunt window.onscroll
Let er daarnaast op dat onscroll afgaat als de positie van het document verandert, niet als de scrollwheel wordt gebruikt. Dus het event gaat niet af als de pagina niet lang genoeg is om het hele scherm te vullen (wat de gebruiker ook doet) en het gaat wel af als de inhoud langer is dan op het scherm past en de gebruiker scrollt met de scrollwheel, de scrollbar of met de pijltjes.
Na het veranderen van document.body.onscroll naar window.onscroll krijg ik dit, wat prima werkt (als je in je achterhoofd houdt wanneer onscroll afgaat). Er is hier natuurlijk nog een hoop aan te veranderen (je hebt nu drie functies, je hebt er echt niet meer dan 1 nodig, als je het scrolldivje om de buttons en foto heenplaatst heb je die lelijke left: 38 niet nodig, ... |
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
