Hallo,
ich verwende klappbare Boxen. Diese Boxen sollen beim Laden der Seite zugeklappt sein - allerdings nur wenn JavaScript aktiviert ist (da sie sich ohne JavaScript ja nur durch ein Neuladen der Seite öffnen lassen würden). Falls JS deaktiviert ist, sollen die Boxen immer offen sein.
Wenn die Boxen nun erst bei onload zugeklappt werden, sieht man ein "flackern", da die Boxen beim Laden der Seite noch offen sind und erst danach zugeklappt werden.
Mir fallen dazu nur 2 Szenarien ein:
- entweder ich erstelle die kompletten Boxen erst zur Laufzeit und habe sie zusätzlich noch einmal statisch in einem <noscript>-Bereich. =>
Relativ aufwendig für so einen kleinen Effekt, außerdem aufgeblähter HTML-Code
- oder ich erstelle die CSS-Regel: .closed { } (ohne Eigenschaften) und weise ihr per JS im head die Eigenschaft display: none; zu (über document.styleSheets). =>
Browserabhängig
Alle anderen Methoden die ich bisher ausprobiert habe, führten zum Verlust der Standardkonformität der Seite. So auch z.B. diese (einfache) Variante hier:
HTML-Code:
<script type="text/javascript">
document.write( '<div class="closed">' );
</script>
<noscript>
<div>
</noscript>
</div>
Habe ich da irgendeine total offensichtliche Lösung übersehen ?