bij:
verfding, deel 2
alle problemen lijken nu opgelost
Maar dat is wonderbaar! :thumb:
carrousel ... ie6 ... javascript ...
hoe ben jij daar eigenlijk achter gekomen dat ie daarin problemen had?
Stom testen in IE6.
in hoeverre is die draaiend te krijgen? wat moet ik daarvoor doen of laten?
ik wil een <marquee></marquee> tag eigenlijk vermijden
Mm, zou niet uit m'n blote hoofd weten wat te doen of te laten. Maar ik roep mijn voetnootje van eerder (
nummertje #12) weer even op:
*) Langzamerhand (nu binnenkort ook IE9 uit het ei gaat komen) wordt het trouwens wel erg de vraag of we met veel kunst- & vliegwerk nog rekening moeten blijven houden met IE6.
En er zijn nog maar een paar % stugge volhouders met IE6:
Grote jongens/meisjes als Google hebben intussen het geschikt maken van hun sites voor IE6 al opgegeven.
Dan mogen wij het ook wel doen.
Bovendien lieten we IE6 niet vallen als een baksteen, maar krijgt dat een schermbeeld dat er ook nog mooi uitziet (hoewel stilstaand). Ze mogen blij zijn, die IE6-ridders en jonkvrouwen, die niets om de veiligheid van hun pc geven!
Als je een goeie bui en tijd over hebt, zou je het voor IE6 inderdaad nog met een <marquee> kunnen oplossen (via een CC, zie hieronder, dan blijft het valid html), en kan de rest van de browsers gewoon het script gebruiken.
<!--[if lte IE 6]>
...
<![endif]-->
van de ene kant staat er : niks doen. dat verklaart een hoop wellicht, misschien heb je in de voorafgaande regel daartoe opdracht gegeven. van de andere kant: dit IF - END IF deel is commentaar, dat heeft toch geen effect?
Awel, het "niks doen" betekent hier: vervang de elders (in het javascript) genoemde opdracht voor de
onload-functie (namelijk de javascript functie
panoramize() in werking zetten) door een
lege onload-functie voor IE6 en eerdere IE-versies.
Want het is volgens de normale html-regels wel commentaar, maar met op deze manier die [vierkante haken] is het een speciaal commentaar, dat
wel door IE gelezen wordt, en ook gewoon uitgevoerd wordt alsof het géén commentaar was.
Daarom heet dit ook een CC = "Conditional Comment" (een "voorwaardelijk commentaar"): de voorwaarde is, dat het hier géén IE6 of eerder is, dan is het
wel commentaar.
if ( startXpos >-bgImgWidth ) { startXpos = startXpos-1 }; // moving to the left
if ( startXpos == -bgImgWidth )
dit is javascript, voor mij haast arabisch.
maar toch een vraag: dit: >-bgImgWidth
groter of kleiner dan ? staat dat er? nee, want dan zou er >< staan.
maar wat is die min dan voor bgImgWidth?
want bij het definieren vd functie zie ik m niet. (var bgImgWidth; ik zie geen -)
(en hier ook trouwens: startXpos == -bgImgWidth)
Even tolken, dan.
Het is inderdaad: groter dan (min bgImgWidth). Was duidelijke geweest met een (niet verplichte) spatie tussen de > en de -!
De bgImgWidth is de breedte van de te bewegen strook: var bgImgWidth = 1602.
En de variabele startXpos is in den beginne vastgesteld op var startXpos = 0.
Nu gaan we kijken wat er moet gebeuren.
"Zolang de strook er is, moet de strook telkens na een pauze 1 pixel naar links opschuiven."
Dat is het gedeelte tussen de accolades:
als ... dan { startXpos = startXpos-1 }.
Oftewel dan is de nieuwe startpositie voor de volgende ronde: de oude startpositie minus 1 pixeltje.
We hadden ook kunnen zeggen: de nieuwe horizontale positie moet 1px méér zijn dan de oude; dan gaat de strook naar rechts bewegen.
Maar we gaan dus achteruit op de X-as, de min-kant op (= steeds meer min).
Hoe lang moeten we dat volhouden? Nou tot de hele strook op is, natuurlijk!
Hoe breed is ie dan? De bgImgWidth.
Dus: als de negatieve X net zo groot is als de breedte van de strook, mag de strook stoppen met bewegen - eh, nee: dan moet de strook weer van voren af aan beginnen! Dan komen we zo op.
Goed:
helemaal naar links geschoven staat de X op -bgImgWidth.
Zolang dat niet zo is, en dus
de X groter is (meer naar rechts staat, ook al is ie negatief), moet ie blijven schuiven.
Dus: als ( startXpos > -bgImgWidth ) ... dan weer een px naar links trekken.
In het javascript-jargon:
[JS]if ( startXpos > -bgImgWidth ) { startXpos = startXpos-1 };[/JS]
Bent u daar nog?
Dan gaan we verder met wat er moet gebeuren als de strook helemaal op is (compleet naar links is geschoven). Wat moet er gebeuren? Dat moet ie weer gewoon opnieuw beginnen, dus met de X op nul. Kan ie weer achteruit gaan lopen.
Dus: "als startXpos dezelfde waarde heeft als de -bgImgWidth, moet de startXpos gereset worden op 0".
In het javascript-jargon:
[JS]if ( startXpos == -bgImgWidth ) { startXpos = 0 }[/JS]
("gelijk aan" wordt in js aangegeven met het dubbele teken ==)
Blijft over de vraag: als de strook naar links schuift, en hij bijna op zijn eindje is, komt er dan niet aan de rechterkant (na het laatste plaatje in de strook) een gat dat steeds groter wordt?
Nee! Want het is een achtergrond-afbeelding, en als we niet heel duidelijk bevolen hebben "no-repeat", dan herhaalt een bg-img zich automatisch als het img op is: naadloos aansluitend.
Eigenlijk gebruiken we het bg-img dus twee keer: het hele plaatje schuift
achter de patrijspoort voorbij, en van het tweede plaatje wordt alleen het eerste gedeelte gebruikt. Totdat het laatste 1px brede strookje van de eerste afbeelding achter de linkerrand van de strook-<div> verdwenen is, dan is de rest van het herhaalplaatje niet meer nodig.
Op dat moment floepen de twee stuks samen weer als de wiedeweerga naar rechts (dat gaat zo vlug, dat je dat niet ziet): de startXpos wordt weer 0, en het feestje begint opnieuw.
Leuk hè, zo'n javascript-partijtje!
CSShunter
