anoniem Geplaatst: 22 april 2004 Delen Geplaatst: 22 april 2004 Grensgevalletje design/programmeren? Beetje academische vraag (synoniem voor nutteloos?) over de volgorde waarin browsers CSS en JavaScript afhandelen, maar vanwege een onverwacht resultaat ben ik nieuwsgierig geworden. Vandaar... Situatie: ik heb een stylesheet waarin ik gebruik maak van deze selectors: [code:1:cd60c4f049] img { display: none } /* afbeeldingen worden niet weergegeven */ img[alt] { display: inline } /* behalve als attribuut alt bestaat */ [/code:1:cd60c4f049] Internet Explorer snapt hier niks van en daarom heb ik een scriptje toegevoegd dat mbv getElementsByTagName() ongeveer hetzelfde doet. De functie wordt aangeroepen met body onload. Het verschil tussen de CSS en het script is dat img[alt] het al voldoende vindt als alt bestaat en het script wil dat alt ook echt een waarde heeft. Het script is toegankelijk voor elke browser, dus voeren ze het ook allemaal uit. Het vreemde is nu dat Mozilla en Opera geen afbeeldingen met een leeg alt-attribuut tonen en Internet Explorer wél. En nu komt het raadsel: blijkbaar wordt de CSS gelezen/uitgevoerd nadat het script is uitgevoerd, maar dat kan niet, want onload treedt pas op als de hele pagina geladen is, dus ook de CSS. Of niet dus... :o Iemand enig idee hoe dit zit? Pyrrus Quote Link naar reactie
anoniem Geplaatst: 22 april 2004 Auteur Delen Geplaatst: 22 april 2004 [url=http://dean.edwards.name/IE7/]Misschien is dit wat?[/url] Quote Link naar reactie
anoniem Geplaatst: 22 april 2004 Auteur Delen Geplaatst: 22 april 2004 Dat is zeker wat. Erg boeiende site en het script wordt overbodig. Ik moet nog wel even goed kijken naar dat onderliggende .htc-bestand, want hierin ben ik niet zo thuis (maw ik snap er weinig van). Ik zag dat conditioneel commentaar vooral als een debug-tool en dit is wel het ultieme voorbeeld! Maar...... het antwoord op mijn oorspronkelijke vraag vind ik er niet. :D Pyrrus Quote Link naar reactie
anoniem Geplaatst: 22 april 2004 Auteur Delen Geplaatst: 22 april 2004 O sorry, als ik het me goed herinner gaat het bij een 'pagina-load' alleen om het HTML bestand, dus zonder alle externe bestanden, plaatjes en dergelijke. Quote Link naar reactie
anoniem Geplaatst: 22 april 2004 Auteur Delen Geplaatst: 22 april 2004 Beste Anne, soms zijn dingen zo ontluisterend eenvoudig. Nu je het zegt begint mij ook iets te dagen. Maar ik ben toch blij dat ik de vraag heb gesteld, want het heeft een boeiend webadres opgeleverd. Dank, dus. Pyrrus Quote Link naar reactie
anoniem Geplaatst: 25 april 2004 Auteur Delen Geplaatst: 25 april 2004 [quote:77c1566edd="Anne"]O sorry, als ik het me goed herinner gaat het bij een 'pagina-load' alleen om het HTML bestand, dus zonder alle externe bestanden, plaatjes en dergelijke.[/quote:77c1566edd] Het onload event treedt afaik op nadat alle onderdelen van een pagina zijn ingeladen, dus ook plaatjes en externe scripts. Om terug te komen op het probleem [quote:77c1566edd="Pyrrus"]En nu komt het raadsel: blijkbaar wordt de CSS gelezen/uitgevoerd nadat het script is uitgevoerd, maar dat kan niet, want onload treedt pas op als de hele pagina geladen is, dus ook de CSS. [/quote:77c1566edd] Misschien mis ik wat fundamentele kennis over de situatie (of het is gewoon te laat en kan ik niet meer helder denken), maar hoezo kom je tot deze conclusie? Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 Ik heb mijn testdocumentje even niet bij de hand, maar ik kom erop terug. Pyrrus Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 Hallo, daar zijn we weer! Eerst maar even een volledige bron voor de duidelijkheid: [code:1:4803166ae0] <html><head><title>Script of CSS?</title> <style type="text/css"> img { display: none } /* afbeeldingen worden niet weergegeven */ img[alt] { display: inline } /* alleen weergeven als alt bestaat */ </style> <script language="JavaScript" type="text/javascript"> function helpIE(){ var picto = document.getElementsByTagName("img"); for (var x = 0; picto[x]; x++) if (picto[x].getAttribute("alt") != ""){ picto[x].style.display = "inline"; } } </script> </head> <body onLoad="helpIE()"> <img src="doemaarwat.gif" alt=""> </body> </html> [/code:1:4803166ae0] Op basis van deze code verwacht ik dat geen enkele browser de afbeelding weergeeft, omdat het onload-script ervoor zorgt dat alléén <img> met alt-attribuut wordt weergegeven. (En alt is leeg dus false.) Je verwacht namelijk dat onload pas wordt uitgevoerd als alle code incl. CSS is geladen en uitgevoerd. IE6 toont inderdaad geen plaatje, maar Firefox wél. En dat klopt weer met de CSS, die zegt: toon elk plaatje waarvan alt is gezet (ongeacht de waarde). IE6 kent de selector img[alt] niet, en toont dus nog steeds geen plaatje. Hierdoor kom ik tot de conclusie dat de CSS blijkbaar wordt uitgevoerd nadat het script is uitgevoerd. En dat vind ik vreemd, als de redenatie tenminste klopt. (Maar als dat zo is, zou je er misschien CSS-probleempjes mee kunnen omzeilen.) Pyrrus Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 CSS wordt als het ware "constant" uitgevoerd. En idd later dan het script. Je kunt uiteraard wel CSS aanpassen vanuit een script. (Annie, weet je misschien waar dat staat over 'onload'?) Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 [quote:3ea0f24b10="Pyrrus"][code:1:3ea0f24b10] for (var x = 0; picto[x]; x++)[/code:1:3ea0f24b10][/quote:3ea0f24b10]Dit klopt niet. In een for-lus moet de tweede parameter een voorwaarde zijn, dus iets als [code:1:3ea0f24b10] for (var x = 0; x < picto.length; x++)[/code:1:3ea0f24b10]Niet getest, maar zoiets... - Bas Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 Zoiets: for (var x = 0; 3==3; x++){ } werkt wel hoor, alleen krijg je een oneindige loop, maar daar is break; dan ook voor uitgevonden. Alleen als je dat nodig hebt kun je sowieso denk ik beter een while loop gebruiken. Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 O ja, om op dat onload probleem terug te komen. Volgens mij wacht de browser inderdaad met de onload-event als alle scripts en stylesheets zijn ingeladen (en zichzelf natuurlijk). Maar ik geloof dat er niet wordt gewacht op plaatjes en andere documenten in (i)frames. Het is wel eenvoudig te testen geloof ik. Trouwens, interessant om te weten misschien is dat IE ook zoiets als een defer attribuut voor scripts heeft. Die zou ook best invloed kunnen hebben op de onload gebeurtenis van een document. Hoe, dat zou ik niet weten. Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 Bas heeft natuurlijk gelijk :oops: Het zou zoiets moeten zijn: [code:1:7033327969] function helpIE(){ var picto = document.getElementsByTagName("img"); var aantal = picto.length; for (var x = 0; x<aantal; x++) if (picto[x].getAttribute("alt") != ""){ picto[x].style.display = "inline"; } } [/code:1:7033327969] Maar het resultaat verandert er niet door. En Anne: natuurlijk kun je CSS met scripts dynamisch maken, maar blijkbaar is de grap dat je browserproblemen kunt omzeilen door 'misbruik' te maken van het feit dat CSS 'constant' wordt uitgevoerd. Nu heb ik 123 geen praktisch voorbeeld, alhoewel deze img[alt] wel in de buurt komt... Pyrrus Waarom blijf ik toch het gevoel houden dat ik ergens een enorme denkfout maak :o Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 [code:1:6aabe5ea70]function helpIE(){ var picto = document.getElementsByTagName("img"); var aantal = picto.length; for(var x=0; x<aantal; x++){ if(picto[x].getAttribute("alt") != ""){ picto[x].style.display = "inline"; } } }[/code:1:6aabe5ea70]Eigenlijk zou het niet uit mogen maken, maar misschien moet je simpelweg een extra set accolades toevoegen zoals hierboven. Trouwens: heb je het wel eens in Mozilla getest? En wat was het resultaat? Ook graag de eventuele foutmeldingen uit de JavaScript Console svp... Probeer anders even te debuggen om het probleem via eliminatie te vinden. Dus vervang tijdelijk [i:6aabe5ea70]picto[x].style.display = "inline";[/i:6aabe5ea70] door [i:6aabe5ea70]echo x;[/i:6aabe5ea70] en bekijk het resultaat. Misschien wordt de lus wel netjes doorlopen en klopt een ander deel van het script gewoon niet. - Bas Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 Even vooraf voor de goede orde: dit is nog steeds géén vraag over javascript, maar over de laadvolgorde van een onload-script en css-regels en welke mogelijkheden dat zou kunnen bieden. Aan Bas: Ik test met IE6, Mozilla en Opera. Ik was even bang dat mijn hele veronderstelling was gebaseerd op domme javascriptfouten, maar ik heb de code echt supersimpel gemaakt om fouten uit te sluiten, en het resultaat blijft (gelukkig?) hetzelfde. [code:1:4acc4c3928]function helpIE(){ if (document.images[0].getAttribute("alt") != ""){ alert("picto1") document.images[0].style.display="inline"; } if (document.images[1].getAttribute("alt") != ""){ alert("picto2") document.images[1].style.display="inline"; }[/code:1:4acc4c3928] En in de html en extra img: [code:1:4acc4c3928]<body onLoad="helpIE()"> <img src="doemaarwat.gif" alt=""> <img src="doemaarwat.gif" alt="alttekst"> </body>[/code:1:4acc4c3928] En dan ook nog maar even de css: [code:1:4acc4c3928]img { display: none } img[alt] { display: inline }[/code:1:4acc4c3928] 1. IE6 toont niet de eerste en wel de tweede afbeelding, blijkbaar alleen als gevolg van het script. 2. Mozilla toont beide plaatjes, wat alleen maar kan als na het script de css-regel img[alt] wordt uitgevoerd. Rara... (niet die ex-actiegroep, maar het raadsel) Pyrrus Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 CSS wordt altijd uitgevoerd, tenzij het uitgeschakeld wordt. Quote Link naar reactie
anoniem Geplaatst: 28 april 2004 Auteur Delen Geplaatst: 28 april 2004 Volgens mij worden hier conclusies getrokken die niet door de feiten ondersteund worden. Ten eerste wordt CSS niet continu "uitgevoerd", het wordt tijdens het HTML geladen of daarna, maar vóórdat het JavaScript wordt uitgevoerd. Hiervoor zorgt het onload-event. Ten tweede werkt je script prima. IE is hier het bewijs van. Volgens de CSS moeten beide plaatjes onzichtbaar zijn aangezien IE de tweede CSS-regel niet snapt. Het script toont vervolgens de tweede afbeelding, precies zoals je zou verwachten. Dat Mozilla beide afbeeldingen toont is logisch, want Mozilla begrijpt de tweede CSS-regel wél! Daarin staat dat alle afbeeldingen met een alt-attribuut inline getoond moeten worden, Mozilla gehoorzaamd prima. Vervolgens ga je met het script nogmaals het tweede plaatje tonen, maar dat is al zichtbaar, dus het resultaat klopt en is logisch. Om dit te bevestigen zou je in je script ipv "inline" de style op "none" moeten zetten. De CSS laat je hetzelfde. In theorie zou IE geen afbeeldingen moeten laten zien, Mozilla alleen de eerste. Volgens mij moet dit alles kloppen, maar het is laat. Laat me even weten of het klopt wat ik zeg... - Bas Quote Link naar reactie
anoniem Geplaatst: 29 april 2004 Auteur Delen Geplaatst: 29 april 2004 Wat Bas zegt klopt. Als in het javascript "inline" wordt vervangen door "none" en je laadt de pagina in Mozilla, dan worden in eerste instantie beide plaatjes getoond. Dat klopt, want volgens de CSS is het voldoende als het alt-attribuut bestaat, wat *waar* is voor beide plaatjes. Vervolgens verschijnt de javascript-alert picto2. Dat klopt ook, want van plaatje 2 is het alt-attribuut *niet* leeg. Klik je vervolgens de alert weg, dan verdwijnt geheel volgens de regels van het script plaatje 2. Immers: display=none. Conclusie: de aanname dat CSS wordt uitgevoerd *nadat* het onload-javascript is uitgevoerd blijkt onjuist :(. Kom ik toch terug op mijn allereerste opmerking: [quote:dfc0eb477a]Beetje academische vraag (synoniem voor nutteloos?)[/quote:dfc0eb477a] Maar het was wel leuk! Pyrrus Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen