Animierter Layer

[Malan]

Hallo

ich suche einwenig Hilfe bei einem Javascript.

Ich habe einen Auftrag angenommen und nun möchte der Kunde etwas haben wo meine Javascript kenntnisse versagen!

Undzwar geht es dadrum einen Layer der am unteren Rand an eines anderen Layer sitzt und der untere Layer soll per klick oder auch nach einer Zeiteinstellung ausfahren!

Ich habe da auch mal 2 kleine Bilder gemach das man das sieht!

http://code-malan.com/div1.jpg
http://code-malan.com/div2.jpg

Bin für jede Antwort Dankbar Vielen Dank

Malan

[wucher wichtel]

Hallo!

ich suche einwenig Hilfe bei einem Javascript.

Ok.

Ich habe einen Auftrag angenommen und nun möchte der Kunde etwas haben wo meine Javascript kenntnisse versagen!

Das ist nicht so gut. Man sollte keinen Auftrag annehmen, den man nicht erfüllen kann.

Undzwar geht es dadrum einen Layer der am unteren Rand an eines anderen Layer sitzt und der untere Layer soll per klick oder auch nach einer Zeiteinstellung ausfahren!

Das ist ja einfach.

Ich habe da auch mal 2 kleine Bilder gemach das man das sieht!

http://code-malan.com/div1.jpg

Not Found
The requested URL /div1.jpg was not found on this server.

http://code-malan.com/div2.jpg

Not Found
The requested URL /div2.jpg was not found on this server.

Bin für jede Antwort Dankbar Vielen Dank

http://forum.de.selfhtml.org/hilfe/charta.htm#tipps-fuer-fragende

Wo liegen die Probleme? Könntest du vielleicht genauer beschreiben, wo du nicht weiter kommst? Welche Fehlermeldungen gibt die JavaScript-Konsole aus?

ciao, ww

[Malan]

Hallo

sry für die Links mache den Server grad neu ^^

http://mf-musicfan.de/div1.jpg
http://mf-musicfan.de/div2.jpg

Das mit den Aufträgen annehmen stimme ich zu aber einige Kunden lassen sich sowas sehr spät einfallen :)

Wieweit ich bin? Naja wiegesagt bin nicht so der Javascript Prof und weiss leider garnicht wo ich anfangen soll!

lG Malan

[wucher wichtel]

Hallo!

http://mf-musicfan.de/div1.jpg
http://mf-musicfan.de/div2.jpg

http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden ;-)

Wieweit ich bin? Naja wiegesagt bin nicht so der Javascript Prof und weiss leider garnicht wo ich anfangen soll!

Du hast z.B. ein <div>. Diesem gibst du eine ID. Auf diese greifst du per document.getElementById() zu. Dann veränderst du mit dem style-Objekt die entsprechenden Werte für height, und padding bzw. margin.

Diese Änderungen rufst du in einer Funktion auf, die per setInterval() startest. Dabei zählst du bei jedem Aufruf der Funktion eine Variable hoch, die z.B. die Pixelanzahl der Höhe angibt. Per if-Bedingung überprüfst du, ob der Wert für die Variable zu hoch wird. Wenn dies der Fall ist, dann unterbrichst du den Interval mit clearInterval().

So in etwa müsste das dann aussehen:

  
var pixel = 0;  
  
function test() {  
 var elem = document.getElementById("bereich").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 5;  
  
 if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...  
  clearInterval(neu);  
 }  
}  
window.onload = function() { neu = window.setInterval("test()", 20) };  

ciao, ww

[Malan]

hmm ich verstehe nicht ganz wo ich nun die breite,höhe und Position der hochfahrenden Box definieren im CSS über die ID oder auch im javascript?

Und was ist mit dem Inhalt?

Sry das überfordert mich grad :(

[wucher wichtel]

Hallo!

hmm ich verstehe nicht ganz wo ich nun die breite,höhe und Position der hochfahrenden Box definieren im CSS über die ID oder auch im javascript?

Du definierst am besten die Breite, Höhe und Position der Box im CSS. Gib der Box die Eigenschaft overflow:hidden und die Höhe 0px. Dieser Box gibst du dann eine ID und greifst per JS auf diese zu. Siehe letztes Posting.

Und was ist mit dem Inhalt?

Der Inhalt des Bereiches? Der steht in deinem HTML-Element (z.B. <div> oder <p>).

ciao, ww

[Gernot Back]

Hallo ww, hallo Malan,

Dieser Box gibst du dann eine ID und greifst per JS auf diese zu.

... oder, wenn es mehrere dieser dynamich aufklappbaren Bereiche geben soll einen Klassennamen; IDs braucht es da nicht unbedingt.

Ich habe da vor einiger Zeit mal eine kleine Studie zu gemacht, bei der es um dynamisch ein- und ausfahrende Tabellen geht. Natürlich funktioniert das aber auch mit anderen Elementen, die ein- und ausfahren sollen, wenn man den Code entsprechend anpasst.

http://www.lernspielwiese.de/klapptabelle/klapp.html

Gruß Gernot

[wucher wichtel]

Hallo!

Dieser Box gibst du dann eine ID und greifst per JS auf diese zu.

... oder, wenn es mehrere dieser dynamich aufklappbaren Bereiche geben soll einen Klassennamen; IDs braucht es da nicht unbedingt.

Ich weiß, aber dem OP ging es nur um einen Bereich. Deswegen die ID :-)

ciao, ww

[Malan]

Hallo

Das hat ja mal super geklappt. :) Vielen Dank. Was aber noch interssant wäre eine Zeit verzögerung? Sagen wir das der Layer erst nach 20-30 sek aus fährt per klick bekomme ich alleine hin .

lG Malan

http://code-malan.com/test/

[Malan]

Hallo

Das hat ja mal super geklappt. :) Vielen Dank. Was aber noch interssant wäre eine Zeit verzögerung? Sagen wir das der Layer erst nach 20-30 sek aus fährt per klick bekomme ich alleine hin .

lG Malan

http://code-malan.com/test/

[wucher wichtel]

Hallo!

Das hat ja mal super geklappt. :) Vielen Dank. Was aber noch interssant wäre eine Zeit verzögerung?

http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout :-)

ciao, ww

[Malan]

Hmm habe es versucht einzusetzten aber leider klappt sich jetzt der Layer nach 10 sek zu ?

<script language="JavaScript" type="text/javascript">
 var pixel = 0;

function animation() {
 var elem = document.getElementById("ani").style;
 elem.height = pixel + "px";
 pixel = pixel + 5;

if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...
  clearInterval(neu);
 }
}
window.onload = function() { neu = window.setTimeout("animation()", 10000) };
</script>

Lg Malan

[wucher wichtel]

Hallo!

Hmm habe es versucht einzusetzten aber leider klappt sich jetzt der Layer nach 10 sek zu ?

Hast du im CSS angegeben, dass die Box die Höhe 0px hat?

<script language="JavaScript" type="text/javascript">
var pixel = 0;

function animation() {
var elem = document.getElementById("ani").style;
elem.height = pixel + "px";
pixel = pixel + 5;

if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...
  clearInterval(neu);
}
}
window.onload = function() { neu = window.setTimeout("animation()", 10000) };
</script>

Du musst eine Funktion per setTimeout aufrufen. Diese Funktion ruft dann per setInterval die andere auf.

  
function startAnimation() {  
 starte = window.setInterval("animation()", 20);  
}  
  
function animation() {  
 var elem = document.getElementById("ani").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 5;  
  
 if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...  
  clearInterval(starte);  
 }  
}  
  
window.onload = function() { neu = window.setTimeout("startAnimation()", 10000) };  

So müsste es funktionieren.

ciao, ww

[Malan]

Hallo

So nun klappt alles wie es sein soll. Konnte ja nicht bei der Höhe komplett 0px nehmen, weil der Layer schon so 20px zusehen sein sollte bervor er ausfährt. Habe jetzt aber var=20px gegeben nun geht es so wie es soll!

Vielen Dank für die schnelle Hilfe

lG Malan

[Fabian]

Ich habe da auch mal 2 kleine Bilder gemach das man das sieht!

http://code-malan.com/div1.jpg
http://code-malan.com/div2.jpg

Man sieht leider die Bilder nicht. Nochmal hochlanden?

Gruß
Fabian