DIVs ausblenden @ tutorials.de: Tutorials, Forum & Hilfe

Stelo · 19.05.10 14:40

Hallo,

und zwar lasse ich einige Bilder in verschiedene DIVs ausgeben (http://www.tutorials.de/forum/php/36...fsplitten.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.

Maik · 19.05.10 14:50

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

Stelo · 19.05.10 15:13

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?!

Ich bitte herzlichst um Aufklärung?!

Maik · 19.05.10 15:20

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-Code:

<div class="gallery"></div>

Code css:

1	.gallery { display:none; }

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

mfg Maik

Stelo · 19.05.10 16:37

Achso. Natürlich, jetzt wo du es sagst.

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 :

1	.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.

**ComFreek** · 19.05.10 17:06

Im Skript-Tag fehlt:

HTML-Code:

<script type="text/javascript">

Und man muss Zeichenketten in Anführungsstrichen übergeben:

Code javascript:

1	var obj = document.getElementById("1").style.display = "";

***einfach nur crack*** · 19.05.10 17:10

Mir ist - rein von der Syntax her - noch etwas aufgefallen: eine ID oder Klasse darf als erstes Zeichen keine Ziffer haben.

Stelo · 19.05.10 17:26

Zitat von einfach nur crack

Mir ist - rein von der Syntax her - noch etwas aufgefallen: eine ID oder Klasse darf als erstes Zeichen keine Ziffer haben.

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.

**ComFreek** · 19.05.10 17:29

Poste mal den ausgegebenen Quelltext

Stelo · 19.05.10 17:35

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>

**ComFreek** · 19.05.10 17:39

Und wo genau übergibst den Parameter div bzw. ist sein Inhalt richtig?

Stelo · 19.05.10 17:42

Na ja, mir geht es im Moment hauptsächlich um die alles_aus() funktion, damit zu Beginn erst mal das erste DIV angezeigt wird, aber der Parameter div kommt hier her:

Code :

1
2
3

<div class="panel">
<a OnClick="javascript:umschalten(id1)" href="#">1</a></div>
<div class="panel"><a OnClick="javascript:umschalten(id2)" href="#">2</a></div>

Chef_De_Loup · 20.05.10 12:54

Dir fehlen die ID Zuweisungen in deinem Ausschnitt. Hast Du die auch im richtigen Code drin? Und auch bei der Uebergabe ist es notwendig die ID als Text zu uebergeben.

Code :

1 2	<div id="id1" class="panel"><a OnClick="javascript:umschalten('id1')" href="#">1</a></div> <div id="id2" class="panel"><a OnClick="javascript:umschalten('id2')" href="#">2</a></div>

Edit:
Solltest Du mehr als nur zwei Divs verarbeiten wollen empfehle ich Dir eher den Umbau der Funktion zu einer Schleife und die Arbeit mit Namen fuer die Divs. Damit kannst Du die Funktion fuer alle Deine Aktionen verwenden und brauchst keine zusaetzlich AllesAus Funktion.

Beispiel:

Code :

<div name="specialone" class="panel"><a OnClick="javascript:showPanel(1)" href="#">1</a></div> // panel 1
<div name="specialone" class="panel"><a OnClick="javascript:showPanel(2)" href="#">2</a></div> // panel 2
// usw.
 
function showPanel(index){
  var tags = document.GetElementsByName("specialone");
  for (var i=0;i<tags.length;i++){
    if (i == (index-1))
      tags[i].display = "inline";
    else
      tags[i].display = "none";
  }
}

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

OnClick - 2 Divs ausblenden, 1 Div einblenden

DIVs via JS ausblenden

divs ein-/ausblenden

Spalte ausblenden (Toggle) mit DIVs simulieren

Mehrere Text-divs ausblenden...

E-Mail:

Abonnieren Abbestellen