DIVs ausblenden

S

Stelo

Erfahrenes Mitglied
Hallo,

und zwar lasse ich einige Bilder in verschiedene DIVs ausgeben (http://www.tutorials.de/forum/php/360256-mysql_fetch_assoc-ausgabe-aufsplitten.html).
Nun möchte ich alle, außer das erste DIV beim Laden der Seite ausblenden, dass mache ich wiefolgt:

Code: 
<body onload="javascript:alles_aus()">
<!-- ... hier werden die Bilder geladen -->
<script>
function alles_aus() {
<?php for($i=2;$i<=$panels;$i++) {

echo "document.getElementById(\"".$i."\").style.display='none'; \n";
}
?>
}
</script>
Nun werden aber kurz ALLE Bilder angezeigt und dann werden die unteren DIVs ausgeblendet. Das ist natürlich nicht so schön.

Gibt es eine Möglichkeit, dem irgendwie vorzubeugen? Ich bin leider nicht so der JS-Kenner. :)

Danke schon mal für eure Hilfe. ;)
 
Hi,

da das Script erstmal das Dokument durchläuft, um im zweiten Arbeitsschritt die ermittelten DIV-Blöcke auszublenden, sind sie für diesen Zeitraum auch sichtbar.

Wie wäre es, stattdessen einfach die Routine entgegengesetzt abzuwickeln? Alle DIV-Blöcke werden von Beginn an versteckt, und der Erste angezeigt ;)

mfg Maik
 
Ach herje, manchmal bin ich aber auch doof. ;)

Müsste ich dann das display='none' direkt in den <div> Tag einfügen? Denn ein OnLoad kann ich dort ja nicht einfügen?!
Hm ... da steh ich gerade mal wieder ein wenig auf dem Schlauch?! :confused:

Ich bitte herzlichst um Aufklärung?! :)
 
Die CSS-Eigenschaft kannst du mit dem style-Attribut im <div>-Tag notieren, oder du legst im zentralen Stylesheet deiner Seite (CSS-Datei) eine entsprechende Regel für diese DIVs an, die du beispielsweise über einen Klassennamen referenzieren kannst:

HTML: 
<div class="gallery"></div>
CSS: 
.gallery { display:none; }

Den onload-Event nutzt du dann stattdessen zum Anzeigen des ersten der versteckten Objekte.

mfg Maik
 
Achso. Natürlich, jetzt wo du es sagst. :D

Vielen lieben Dank.

Ok also ich versuchte nun das ganze umzusetzen, aber irgendetwas scheine ich wohl falsch zu machen, dass ganze sieht nun ungefähr so aus:

style.css
Code: 
.thumbs {display:none}
Das funktioniert auch erst mal, aber das anzeigen des ersten möchte irgendwie nicht.

Code: 
<body OnLoad="javascript:alles_aus()">
<div id="1" class="thumbs"></div>

<script>
function alles_aus() {
document.getElementById(1).style.display='';
}

Die Firefox Fehlerkonsole sagt mir leider nicht, was ich falsch mache, deshalb muss ich euch noch einmal damit stören.
 
Im Skript-Tag fehlt:
HTML: 
<script type="text/javascript">
Und man muss Zeichenketten in Anführungsstrichen übergeben:
Javascript: 
var obj = document.getElementById("1").style.display = "";
 
Mir ist - rein von der Syntax her - noch etwas aufgefallen: eine ID oder Klasse darf als erstes Zeichen keine Ziffer haben.
 
einfach nur crack hat gesagt.:
Mir ist - rein von der Syntax her - noch etwas aufgefallen: eine ID oder Klasse darf als erstes Zeichen keine Ziffer haben.
Zum Vergrößern anklicken....
Danke für den Hinweis, das habe ich mal abgeändert. :)

Mir ist aufgefallen, dass nun auch andere Funktionen nicht mehr tun was sie sollten. Und an denen hat sich nix geändert, der einzige Unterschied ist, dass ich eben vorher .display='none' per JS festgelegt habe und das nun in die CSS Datei geschrieben habe. Hier wäre noch die andere Funktion:
Code: 
function umschalten(div) {
<?php for($i=1;$i<=$panels;$i++) {

echo "document.getElementById(\"id".$i."\").style.display='none'; \n";
}
?>
document.getElementById(div).style.display='';
}
Diese sorgt im Prinzip dafür alle zu verstecken und nur das ausgewählte wieder anzuzeigen.
 
Code: 
<script type="text/javascript">
function alles_aus() {
document.getElementById("id1").style.display = "";
}

function umschalten(div) {
document.getElementById("id1").style.display='none'; 
document.getElementById("id2").style.display='none'; 
document.getElementById(div).style.display='';
}

</script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück