zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Boxen beim Seitenladen zuklappen (ohne "Flackern")

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.01.2010, 12:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.02.2008
Beiträge: 52
Plasm befindet sich auf einem aufstrebenden Ast
Standard Boxen beim Seitenladen zuklappen (ohne "Flackern")

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 ?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.01.2010, 12:51
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.01.2010, 12:57
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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'
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #4 (permalink)  
Alt 08.01.2010, 13:01
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 08.01.2010, 13:06
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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 Beitrag anzeigen
Oder ohne jquery:
HTML-Code:
<!doctype html>[...]
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Geändert von Thielo (08.01.2010 um 13:17 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.01.2010, 16:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.02.2008
Beiträge: 52
Plasm befindet sich auf einem aufstrebenden Ast
Standard

@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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:14 Uhr.