Twitter-carrousel javascript
Hoi Cyroq,
- Je wilt dus een Twitterbox als dia-voorstelling, zonder die lelijke scrollbar.
- Als player met een stop/play knop, en ook knoppen voor vooruit en achteruit.
Dat kan niet met html en css alleen, daar moet javascript aan te pas komen, want het gaat hier om toegevoegde functionaliteit.
Maar het hoeft niet moeilijk te zijn: er is een kant-en-klaar javascript
twitter-carrousel.js.
Dit hoeft alleen maar aan de pagina gehangen te worden.
Om te kijken of het zou werken op de eerder aangehaalde voorbeeld-pagina
[url]www.pcg-gorinchem.nl/[/URL] *), heb ik daar het script aan vast gehangen:
- Test: twitter-carrousel-pcg.htm
Kon het niet laten om een klein blauw randje om de twitterbox heen te zetten.
Verder is alleen de script-link toegevoegd in de <head> en is de pagina volledig identiek aan het origineel.
Toelichting
In principe is het vrij eenvoudig om met javascript een player te maken die met een setTimeout() een serie <div>'s om de beurt de revue laat passeren. Het is even wat puzzelen om de buttons "Vorige", "Stop/Play" en "Volgende" in werking te krijgen (alles moet onthouden worden), maar ook dat is te doen.
De complicaties zitten in de Twitter-widget die de Tweets ophaalt:
- Het javascript van de Twitter-widget maakt eerst allerlei extra <div>'s en andere elementen aan, die in de bestaande html-code worden opgenomen. Er worden bv. zo'n 8 container-div's bijgemaakt, en per Tweet nog eens 5 <div>'s en 9 elementen daarbinnen. Bij een opgegeven aantal van 6 tweets komt dat neer op maar liefst 94 elementen die aan de html worden toegevoegd (!). Ook wordt er een eigen stylesheet widget.css in de pagina ingepompt, en ook nog wat losse style-regels in de <head> van de pagina. Het duurt uiteraard even (1/10 sec. of daaromtrent) voordat de browser van de bezoeker dat allemaal in elkaar geknutseld heeft.
- De tweets worden opgehaald uit de Twitter-database, en dat gaat niet altijd even vlot: het duurt even (tot een paar minuten) totdat de gevraagde tweets beschikbaar zijn.
- Maar .. het carrousel kan pas met de Tweets aan de slag, als die allemaal binnen zijn. Daarom moet er een "Tweet-verklikker" ingebouwd worden, die detecteert of er binnenstromende Tweets zijn, en zo ja, of alle Tweets aan boord zijn.
Dit speelt ook als je andere eigen vormgeving wilt toepassen op de Twitterbox, en dat kan puur lastig worden (zie bv. hier en de 13 daarop volgende constructie-pagina's).
- Andere complicatie is de structuur van de door het Twitterwidget-javascript aangemaakte Tweet-elementen. Alles wordt met classes i.p.v. id's gedaan en classes zijn lastig met javascript te vangen. De functie getElementsByClassName() zou de aangewezen methode zijn, maar die werkt niet in Internet Explorer 8 (en eerder; zie hier); dat betekent dat je alle <div>'s van de hele pagina moet laten doorvlooien op de aanwezigheid van een bepaalde className. Als je die dan een volgnummer geeft en in een array() (verzamel-lijstje) zet, zijn ze voor het vervolg traceerbaar en bruikbaar.
Voor verdere toelichting:
Met vriendelijke groet,
CSShunter
_______
*) @Haaren201: Leuk, Ron, de dwarrelende sneeuwvlokjes van het
sneeuwscript hebben intussen plaatsgemaakt voor neerdalende oliebollen. :d
- O, als je er
body #container {margin: 0 auto;} van maakt, staat de pagina bij hogere resoluties altijd mooi in het midden.
=======
PS: Eerst deed het script het prima in de demo, maar niet op de pcg-testpagina: daar werd de volgorde aangetast en werkten de
Volgende/Vorige knopen niet goed. Wat blijkt? Ik had een variabele
number in het script staan om de nummering bij te houden. Bij toeval zit er op de pcg-pagina in één van de andere aanwezige scripts kennelijk óók een variabele met die naam. Dan gaan die vrolijk door elkaar heen wapperen! Met omdoping van m'n
number in
twNumber was er geen vuiltje meer in de lucht.
Tip aldus: geef variabelen in een toe te voegen eigen script altijd een unieke variabele-naam, die niet gauw in een ander script gebruikt zal worden: dan is interferentie uitgesloten.
