Horst: Funktion zum nacheinander abfolgenden Anzeigen von DIVs

SELF-Forum

Funktion zum nacheinander abfolgenden Anzeigen von DIVs

Horst
– Informationen zu den Bewertungsregeln

Erst einmal hallo alle miteinander,

ich hab gestern mit Javascript angefangen zu arbeiten und stehe schon vor einem Problem:

Bei einem Mouseover über einen Menu-Button sollen sich mehrere Untermenubuttons nacheinander öffnen (,dass heißt immer nach einer kurzen Verzögerung das nächste usw.) bis alle angezeigt werden.

Meine Idee war sofort, es mit einem window.setTimeout zu bewerkstelligen. Eine Funktion, in der alle Öffnungsvorgänge direkt unter einander stehen, brachte das Ergebnis, dass sofort das erste und nach der eigegebenen Verzögerung sich alle auf einmal öffneten.

Deshalb kam ich auf die Idee mit den Abfragen:

  
function PopUp () {  
var a = document.getElementById('band').style.display;  
var b = document.getElementById('videos').style.display;  
var c = document.getElementById('pics').style.display;  
var d = document.getElementById('links').style.display;  
var e = document.getElementById('sign_in').style.display;  
var f = document.getElementById('gigs').style.display;  
  
if (a == 'none')  
{  
document.getElementById('band').style.display='';  
}  
else  
{  
PopUp () ;  
}  
if (document.getElementById('band').style.display == '')  
{  
window.setTimeout("document.getElementById('videos').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (document.getElementById('videos').style.display == '')  
{  
window.setTimeout("document.getElementById('pics').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (c == '')  
{  
window.setTimeout("document.getElementById('links').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (d == '')  
{  
window.setTimeout("document.getElementById('sign_in').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (e == '')  
{  
window.setTimeout("document.getElementById('gigs').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
}

und der html code

  
<body>  
<div class="menu" onMouseover="PopUp();">  
<img src="menu.jpg"></img>  
</div>  
<div id="band"  style="display: none; width: 80; height: 80; top:0;  left: 0; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="gigs"  style="display: none; width: 80; height: 80; top:0;  left: 400; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="sign_in"  style="display: none; width: 80; height: 80; top:0;  left: 320; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="links"  style="display: none; width: 80; height: 80; top:0;  left: 240; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="pics"  style="display: none; width: 80; height: 80; top:0; left: 160; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="videos"  style="display: none; width: 80; height: 80; top:0; left: 80; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
</body>

In Firefox klappt diese Version, bis auf das erste Untermenu überhaupt nicht und der IE gibt mir nur Fehlermeldungen.

Wird wahrscheinlich nur ein formaler Fehler sein und hoffentlich leicht zu beheben.

Vielen Dank schon mal für eure Ideen.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Funktion zum nacheinander abfolgenden Anzeigen von DIVs

    Horst
    – Informationen zu den Bewertungsregeln

    zwei korrekturen:

    in firefox und IE werden zwei Kreise angezeigt...

    und zu meinem CSS Wirrwarr mit style-Angaben im body-Bereich und extern ausgelagert, das soll so und wird später behoben :P

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Funktion zum nacheinander abfolgenden Anzeigen von DIVs

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Meine Idee war sofort, es mit einem window.setTimeout zu bewerkstelligen. Eine Funktion, in der alle Öffnungsvorgänge direkt unter einander stehen, brachte das Ergebnis, dass sofort das erste und nach der eigegebenen Verzögerung sich alle auf einmal öffneten.

    Du musst die einzelnen "Öffnungs"-Vorgänge zeitverzögert auslösen.

    Deshalb kam ich auf die Idee mit den Abfragen:

    Furchtbarer Code.

    Sowas solltest du lösen, in dem du bspw. alle Elemente, mit denen etwas zu tun ist, in ein Array packst - und dann *eine* Funktion schreiben, die mit dem jeweils "nächsten" Arrayelement etwas macht, und sich so lange selber zeitverzögert wieder aufruft, wie es noch ein weiteres Element gibt.

    var a = document.getElementById('band').style.display;

    Auf diesem Wege kannst du nur Werte abfragen, die direkt am Element selber per style-Attribut oder zuvor bereits per JavaScript auf dem selben Wege gesetzt wurden.
    D.h., wenn du die Formatierungsangaben später mal auslagerst, wirst du damit nicht mehr das gewünschte Ergebnis bekommen.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln