JavaScript
Scroll script
smooth
Als je hele lange pagina`s hebt en je wilt geen scrollbare vensters op jouw pagina, is het voor jouw bezoekers prettig als ze makkelijk jouw pagina kunnen scrollen. Het prettigste voor de bezoekers is als er rekening gehouden wordt met de hoogte van hun viewport. De pagina behoort een paar millimeter minder te scrollen dan de hoogte van de viewpoort, ongeacht de afmetingen van het browser-scherm. Het wordt ook erg gewaardeerd als de scroll-up knop in 1 keer vloeiend naar de top van de pagina gaat: niets is zo vervelend als je net zo veel keer op de 'naarboven-knop' moet drukken als je op de 'naarbeneden-knop' deed. En het is altijd slim om een beetje animatie aan de scroll toe te voegen. Op deze pagina start de omhoogscroll procedure met volle snelheid en wordt er aan de top zichtbaar afgeremd. De laatste paar millimeter van de aktie wordt heel soepel uitgevoerd.
De procedure voor deze pagina staat in deze file. In dit voorbeeld wordt de hoogte van een div uitgelezen (in dit geval de middenkolom van deze dns4-pagina). Voor ik verder ga; als je een procedure wilt hebben die gewoon de hele pagina scrollt (zonder naar een div te kijken) kan je die hier vinden. Als je nog een extra functie wil hebben om toch 'per viewport' weer omhoog te gaan (scherm voor scherm) plak je dit stukje code aan het eind van het (java)script. De link geef je de naam van de functie: kijk even hoe de andere links in het voorbeeld gemaakt zijn. Vergeet alleen niet om de '0' (nul) tussen de haakjes van de fuctie toe te voegen: zonder dit getalletje kan de functie niet initialiseren.
Dus even recapituleren:
De javascript zet je zo laag mogelijk op
de pagina. De <body> breid je uit met
<body onload="init();"> en de linkjes
kan je plaatsen waar je maar wilt.
In het voorbeeld staat een klein stukje 'style'. Dit dient er alleen maar voor om de grote knoppen op het scherm te zetten voor de omhoog- en omlaag-functies. Op jouw site kan je de linkjes plaatsen waar je wilt natuurlijk. Je hoeft nooit alles van mijn procedures te gebruiken. Vrijheid, blijheid... Maar als je de grote knoppen wilt gebruiken op jouw site, geen probleem. Copy/Paste de plaatjes van "het scherm" naar jouw PC en dan is dat ook weer gebeurd... Ondertussen zal je jezelf wel eens gaan afvragen waarom ik zo langdradig en uitgebreid zo'n simpel functie'tje als dit loop te beschrijven. Maar ik denk dat je al door hebt dat ik een heleboel tekst nodig heb om de scroller een beetje te laten werken. Ondertussen ben ik aan het denken wat voor nuttigs ik kan verzinnen om hier neer te zetten. Het is misschien slim om wat tekst neer te zetten die met dit onderwerp te maken heeft.
Hierna volgt nuttige tekst om de pagina te vullen voor de scroller. Het is voor de procedure dus echt niet nodig om dit allemaal te gaan lezen.
Een paar regeltjes over javascript. Javascript is een scripttaal (object georienteerd) speciaal gericht op het gebruik op ons aller www (World Wide Web). Voor wat de taalelementen aangaat, vertoont JavaScript een 'redelijke overeenkomst' met de programmeertaal Java. Dat is dan ook gelijk de enige overeenkomst, want inhoudelijk is JavaScript geheel anders dan Java. De eerste versie van JavaScript werd ontwikkeld door Brendan Eich (1995). In die tijd werkte Brendan voor Netscape aan de (later beroemd geworden) Netscape Navigator. De eerste benaming van JS was "Mocha". Maar niemand had daar voeling mee. Later werd de naam veranderd in "LiveScript" en de laatste naam is tot op de dag van vandaag: JavaScript. Met de introductie van JavaScript ontstonden de eerste mogelijkheden om de pagina's van de sites interactief te maken. In gebruik (gecombineerd) met DHTML (Dynamic HTML) geeft dit echt enorm veel mogelijkheden. Netscape heeft geprobeerd om javascript voor zichzelf te behouden en toch de 'wereldstandaard neer te zetten'. Ze hebben de "taal" officieel laten keuren door ECMA (overkoepelende organisatie van computer/bouwers/ontwikkelaars etc.) Mede hierdoor zie je soms dat de naam ECMA-script gebruikt wordt. Onze grote vriend Bill Gates van Microsoft heeft ook een versie ontwikkeld, die naar de naam JScript luistert.
Op deze site, heel erg ruim toegepaste, CSS (Cascading Style Sheets) is een techniek voor de vormgeving van webpagina`s. De code voor de opmaak aangaande de vormgeving kan bijna overal in het htmldocument staan (meestal in een apart stukje in de head-sectie van een pagina), maar ook in een extern bestand. De verzamelnaam voor alle stijlregeltjes wordt "style-sheet" genoemd. Alles zou prachtig en leuk zijn, ware het niet dat verschillende browsers op een verschillende manier ongaan met de code. Het is uitermate lastig dat als een bepaalde procedure prima werkt in browser A, dat browser B er een hele grote troep van kan maken (of simpelweg de instructies negeert). Het W3C heeft keurig netjes een standaard neergezet (voor alle browsers) om het de website-ontwikkelaars wat makkelijker te maken. Maar om andere belangen (b.v. geld...) zijn de browser "bakkers" niet erg genegen om alles compatible met elkaar te maken. Op dit moment is er eigenlijk geeneen browser die zich 100% aan de standaard houdt. Over de kwaliteit van de browsers zelf is weinig af te dingen. Allemaal hebben ze sterke punten en dat ze niet gelijkluidend op de code reageren is meer een probleem voor de ontwikkelaars van websites dan voor de gebruikers thuis. Het zal iemand "worst zijn" of jij problemen met diverse browsers hebt. Er wordt gewoon verwacht dat alles werkt... Klaar! Om toch nog wat zinnigs op deze pagina te zeggen, wil ik nog kwijt dat het echt mogelijk is om een website in alle (GOEDE) moderne browsers geheel cross-browser te ontwikkelen met alle functionaliteit die nodig is om een attractief geheel in elkaar te sleutelen.
Ik wijk wel aardig van het hoofdthema van deze pagina af. Het ging om een manier om makkelijk en soepel een pagina te laten scrollen. Ik raad je aan om eens goed naar de code te kijken van deze pagina. Als je het script ziet stelt het eigenlijk niets voor. Als ik het niet belangrijk zou vinden dat de code correct geschreven wordt zou ik nog een derde van de code weg kunnen gooien zonder aan functionaliteit ook maar iets in te boeten. Als ik b.v. alle VAR 's niet vooraf definieer zal een browser dat geen probleem vinden. Maar ik houd er niet van om als ik de code check met JSlint dat ik foutmeldingen zie. 0 (lees nul..) fout is precies wat het moet zijn (en tot mijn schande moet ik bekennen dat als ik een pagina wijzig het wel een gebeurt dat ik een foutje produceer wat niet de bedoeling was). Ook voor mijzelf geldt: check check en double check. Als een stuk javascript foutloos door JSlint is gekomen zou het het verstandigste zijn om het script in een extern bestand te stoppen en aan te roepen vanuit de pagina met een <script type="text/javascript" src="descroll.js"></script> of iets in die strekking. Toch stop ik het script in de pagina zelf. De reden hiervoor is dat ik jou in de gelegenheid wil stellen om de broncode goed te bestuderen. En als je steeds externe files moet gaan bekijken kan je het overzicht kwijtraken. Het enige nadeel voor de dns4.nl is dat de W3C validator dit niet zo'n succes vindt. Maar dat zal mij verder een zorg zijn.
Nu ik toch bezig ben om mijn hart te luchten, kan ik nog wel eens benadrukken dat het belangrijk is dat de code die je schrijft/gebruikt foutloos is en geheel conform de W3C-norm is samengesteld. Het kost net zoveel tijd om rotzooi in elkaar te zetten als om correct geschreven code te gebruiken. Eigenlijk kost het minder tijd om goede code te maken dan de "troep". Het beetje extra tijd wat het kost om research te doen en een goed plan te maken wordt ruimschoots gecompenseerd door de werkelijk rampzalig hoevelheid tijd die je kwijt bent als je website opeens niet meer functioneert omdat je van server (php-versie etc.) verandert en geen notie hebt van hoe jou website in elkaar steekt qua code of dat een webhostingsbedrijf een paar kleine beveiligingszaken op z'n servers regelt waar brakke PHP-code direct van "in de stress raakt", en er spontaan mee stopt... Strakke goede code heeft buiten dit ook nog het voordeel dat de pagina's stukken sneller parsen. Zonder op mijn borst te rammen kan ik rustig zeggen dat ondanks dat de dns4 op een "shared hosting" staat (met heel veel andere sites op 1 server) van 3(!) euro per maand en ondanks dat de site een boven-gemiddeld bezoekersaantal trekt (kijk rustig naar de data) de pagina's er heel erg snel "staan". Ik heb een klein module'tje wat dat laat zien. Als de pagina's naar binnen'strompelen' op jouw pc wil dat alleen maar zeggen dat de server niet genoeg 'spierballen' heeft om alle websites (tegelijkertijd) te bedienen. Zo, ik denk dat er nu wel genoeg tekst staat om een paar scrolls te maken. Als toegift zet ik nog een plaatje neer van de "kast" waar de dns4.nl zijn werk staat te doen op dit ogenblik. Het ziet er indrukwekkend uit, en in feite is het dat ook. Je staat er niet altijd bij stil hoe alles technisch in elkaar zit als je met jouw pc op internet een beetje aan het surfen bent of aan jouw website zit te sleutelen...
De titel van deze pagina is: smooth scroll script xhtml validerend.
De sleutelwoorden zijn : smooth en scroll.
De omschrijving is: "smooth scroll script wat xhtml valideert".