while schleife langsam öffnen

[paminia]

Hallo, möchte meine div´s langsam öffnen. Allerdings reagiert meine while schleife nicht. Was ist denn daran falsch? könnte mir jemand weiterhelfen?

<script type="text/javascript">


function elementfader(das) {

 if (document.getElementById(das).style.display=='none') 
 {document.getElementById(das).style.display='block';}
 else {
  document.getElementById(das).style.display='none';
  
var breite=0;
var hoehe=0;
var maxbreite=200;
var maxhoehe=200;  
  
while (breite >='maxbreite') {
  getElementById().style.width='breite';
  getElementById().style.height='hoehe';
  
  breite=breite +1;
  hoehe=hoehe +1;
}  
  
 }

}

</script>

<a href="javascript:elementfader('eins')">Home</a>
<div style="display: none;background-color:#b6b6b6;width:68px; height:60px;" align="center" id="eins" >
 
  <ul>
    <li><a href="#">hallo</a></li>
    <li>hallo</li>
    <li>hallo</li>
  </ul>
</div>

 

[Gweb]

AW: while schleife langsam öffnen

wahrscheinlich soll es heissen
while (breite <='maxbreite') {

 

[sokie]

AW: while schleife langsam öffnen

bei darstellungen "animationen" mit Zeitverzögerung kommt man mit den Methoden setInterval() oder detTimeout() zum Ergebnis:

in der while-schleife muss der rechner zwar sie schritte durchgehen, aber dargestellt wird nur das Ergebnis.

um das browserübergreifend sicher zu machen, würde ich aber auf ein Framework zurückgreifen, wie zB jquery, dass solche Funktionalitäten bereitstellt.

zB UI/Effects/Scale - jQuery JavaScript Library

 

[paminia]

AW: while schleife langsam öffnen

wahrscheinlich soll es heissen
while (breite <='maxbreite') {

Also das habe ich eben auch schon versucht, aber er will nicht.

 

[paminia]

AW: while schleife langsam öffnen

bei darstellungen "animationen" mit Zeitverzögerung kommt man mit den Methoden setInterval() oder detTimeout() zum Ergebnis:

in der while-schleife muss der rechner zwar sie schritte durchgehen, aber dargestellt wird nur das Ergebnis.

um das browserübergreifend sicher zu machen, würde ich aber auf ein Framework zurückgreifen, wie zB jquery, dass solche Funktionalitäten bereitstellt.

zB UI/Effects/Scale - jQuery JavaScript Library

Ich schau mir die Seite mal an. Danke dir.

 

[paminia]

AW: while schleife langsam öffnen

DIe SelfHtml seite zeigt nur an wie es mit den Farben funktioniert. Ich komm damit leider nicht weiter. Google ist leider auch keine große hilfe, es sei den ich suche zwei wochen nach

 

[netbandit]

AW: while schleife langsam öffnen

Wozu maxbreite in Hochkommas?

 

[paminia]

AW: while schleife langsam öffnen

also ich habe es in ' in " oder ohne versucht. Keins von allem geht. Ich weiß nun leider nicht ob ich es komplett falsch geschrieben habe

 

[sbehrendt]

AW: while schleife langsam öffnen

Hast du schon zweimal hintereinander auf Home geklickt?
Deinem Code nach sollte die while-Schleife / der else-Zweig erst beim 2ten Aufruf ausgeführt werden.

Was es auch noch zu beachten gillt: JavaScript wird Client-seitig ausgeführt --> die Verarbeitungszeit ist von Client zu Client unterschiedlich

 

[cebito]

AW: while schleife langsam öffnen

Was mir auffällt, du (gerade als Anfänger - aber auch für später) solltest dir unbedingt angewöhnen Struktur in deinen code zu bringen um die Übersicht zu behalten. Deine While-Schleife bspw. befindet sich im else-Zweig - selbst wenn sie funktionieren würde, würde es keiner sehen, da der div auf display:none; steht. Auch wird dort kein Element angesprochen: getElementById().style.width='breite'; richtig wäre: document.getElementById(das).style.width in der Klammer die ID des angesprochenen Elements sonst weiß JS garnicht, wo es deine Anweisungen ausführen soll. Nach der else folgen drei schließende "}" eine für den else-Zweig, eine für die function, wofür ist die dritte? Wenn du ordentlich einrückst und die Klammern nicht so wie oben vorn und hinten dranklatschst sondern auf Höhe deiner Einrückung in eine eigene Zeile machst, ist sowas leichter zu vermeiden. Vor allem wenn du mal was größeres machen willst.

Und jetzt noch ein Beispiel wie es geht - ordentlich und übersichtlich :

<script type="text/javascript">
var breite=0;
var hoehe=0;
var maxbreite=200;

function elementfader(das) {
    breite += 1;
    hoehe += 2;
    if (breite < maxbreite) {
        document.getElementById(das).style.width = breite + 'px';
        document.getElementById(das).style.height = hoehe + 'px';
        window.setTimeout(function(){elementfader(das)}, 10);
        }
}
</script>

Für den div notierst du:

<div id="eins" style="display:block; background-color:#b6b6b6;[COLOR=Black][COLOR=#000080][COLOR=#0000FF][/COLOR][/COLOR][/COLOR] width:0; height:0; overflow:hidden;">

overflow:hidden, damit die List mit dem div "mitwächst", kannst du ja mal versuchsweise weglassen. Ansonsten nimm den code und versuch dich mal dran, lass den div wieder einfahren usw. etc. pp.