Boxen beim Seitenladen zuklappen (ohne "Flackern")

Plasm · #1 (**permalink**) 08.01.2010, 12:38

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 ?

Thielo · #2 (**permalink**) 08.01.2010, 12:51

ich benutze für so etwas sehr gerne jquery, schau dir mal das hier an (ist zwar nur im FF grade getestet, aber sollte eigentlich auch überall laufen (kannst du ja testen

)

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.box { height: 200px; width: 200px; background: #0F6; }
.closed { display: none; }
</style>
</head>

<body>
<div class="box">
Ich bin Offen weil kein Javascript vorhanden ist.
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3");
</script>
<script type="text/javascript">
$(function() {
	$(".box").each(function() {
		$(this).addClass("closed");
	});
});	
</script>
</body>
</html>

kurze erklärung des Codes: ich schnappe mir alle div boxen die die klasse box haben und geben all diesen zusätzlich die klasse closed.

Ist das von nützen für dich?

Thielo · #3 (**permalink**) 08.01.2010, 12:57

Oder hier noch eine andere Lösung, die vielleicht sogar weniger Aufwand für das ganze wäre:
ändere das css:

HTML-Code:

<style type="text/css">
.closed { height: 200px; width: 200px; background: #0F6; }
</style>

ändere das div folgendermaßen ab:

HTML-Code:

<div class="closed">
Ich bin Offen weil kein Javascript vorhanden ist.
</div>

und zu guter letzt kommt noch ein anderes js:

HTML-Code:

<script type="text/javascript">
$(function() {
	$(".closed").each(function() {
		$(this).css("display","none");
	});
});	
</script>

Alle Elemente mit der Klasse closed bekommen zusätzlich das css Attribut 'display:none'

protonenbeschleuniger · #4 (**permalink**) 08.01.2010, 13:01

Oder ohne jquery:

HTML-Code:

<!doctype html>
<html>
<head>
<title></title>

<style type="text/css">
.box { height: 200px; width: 200px; background: #0F6; }
.script .box { display: none; }
</style>
</head>

<body>
<div class="box">
Ich bin Offen weil kein Javascript vorhanden ist.
</div>
<script type="text/javascript">
document.body.className += ' script';
</script>
</body>
</html>

Thielo · #5 (**permalink**) 08.01.2010, 13:06

hmpf wollt ich grade auch schreiben

hat mich sehr viel mühe gekostet das so zu schreiben (wieso kommt mir jquery eigentlich einfacher vor?)

P.S.
ist da wer auf html5 umgestiegen? :P

Zitat:

Zitat von protonenbeschleuniger

Oder ohne jquery:

HTML-Code:

<!doctype html>[...]

Plasm · #6 (**permalink**) 08.01.2010, 16:42

@Thielo:
Ich benutze (meistens) auch jquery.
Bei Deiner Variante wird leider das "flacker"-Problem nicht gelöst, da beim Laden der Seite die Box offen ist und erst im Nachhinein geschlossen wird.

Allerdings habt ihr mich auf eine andere Idee gebracht: Da fast alle meine Scripte erst bei onload laufen, habe ich wohl schon total vergessen, dass es auch anders geht (wie in protonenbeschleuniger´s Beispiel). Ich habe nun folgende Struktur ausprobiert (vereinfacht dargestellt)

.closed {}
<div class="closed">
</div>
<script>
$('.closed').css('display', 'none');
</script>
weiteres html

Das minimiert den Zeitabstand zwischen "erstellen der Box" und "komplettes Laden der Seite". Das Flackern ist damit normalerweise nicht mehr zu sehen - allerdings kann es theoretisch immer noch auftreten (z.b wenn man ein "lag" zwischen den Zeilen </div> und <script> hat).

Habe dann mal probiert das Element zu verstecken bevor es abgeschlossen ist, also so:
.closed {}
<div class="closed">
<script>
$('.closed').css('display', 'none');
</script>
</div>
weiteres html

Und siehe da - das funktioniert. Hätte eigentlich vermutet, dass man erst auf das Tag zugreifen kann, wenn es abgeschlossen ist (also nach </div>) - aber das war wohl ein Irrtum.

Das scheint mir nun also eine praktikable und vernünftige Lösung zu sein.
Danke für eure Hilfe!

Übrigens: Die each-Funktion kannst Du Dir sparen:
$(".box").addClass("closed");
Beschreibung zu addClass():
Adds the specified class(es) to each of the set of matched elements.

Funktioniert mit jeder jquery-Funktion. each verwende ich nur selten

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite!	Web4Live	CSS	2	13.07.2011 16:01
Mitwachsende Container: 4 Boxen	Cu Chullain	CSS	1	08.09.2010 18:57
Nebeneinanderliegende gleichhohe Boxen	mantiz	CSS	13	08.02.2010 00:13
Gleiche Abstände zwischen Boxen?	Shepstar	CSS	5	29.07.2006 03:37
Div Box scrollen, mit float boxen inhalt	SURE612	CSS	9	02.10.2005 19:09