Div-Container einfaden mittels Javascript

[jay-alai]

Hi,

Ich bin neu im Forum und hoffe ich bin richtig.

Ich würde gerne einen Div-Container mittels Javascript einfaden lassen.
Der Container befindet sich ganz rechts am rand und soll auf onclick auffaden. Da soll dann mein Menü rein.

Der Container hat die Eigenschaften:

Width: 20px;
Height: 500px;

So, wenn ich jetzt draufklicke soll width auf 200px gesetzt werden.
Das hab ich auch schon gemacht und geht auch. Jetzt will ich aber das er
auffadet.
Ich will aber kein Scriptacoulus nutzen oder ähnliche Frameworks, da ich sowas lieber selber schreiben will.

Hier mein bisheriger Code:

function right(){
var rechts = document.getElementById("menu_right");
var bild = document.getElementsByTagName("img")[1];

((rechts.style.width == "200px") && (bild.src.search("img/right.png")>0)) ?
((rechts.style.width = "20px") && (bild.src = "img/left.png")) :
((rechts.style.width = "200px") && (bild.src = "img/right.png"));
}

Danke schon mal im Voraus...

[Falk Prüfer]

Hallo,

da du gern selber codest, hier nur eine "Prinzipanleitung".
Du benötigst eine Parameterlose function, die deinen Container jeweils ein paar Pixel breiter und höher macht. Nach dem Erweitern des div prüft diese Funtkion ob schon Enbreite und -höhe erreicht sind, ansonsten startet sie sich über windows.setTimeOut() (bitte schreibweise prüfen!) neu.
Bei deinem ursprünglichen Ereignis rufst du jetzt einmal diese Funktion auf. In Abhängigkeit der Schrittweite und Anzahl der Millisekunden bei setTimeOut() bekommst du einen ruckeligen ... smarten Sizing-Effekt (Fading ist eher Überblenden und keine Größenänderung).

Gruß Falk

[jay-alai]

Hi,

Danke schon mal für die schnelle Antwort.

Also ich habs hinbekommen. Jedoch ist die Größenänderung recht lahm.
Hab nur ein Problem mit dem schließen. Will ja auch dass er zurück fadet.

var i = 20;
function left(id){

if(i < 200){
document.getElementById(id).style.width = i++;
setTimeout("left('" + id + "')", 1);
}
else {
i = 20;
}
}


und im html....

<div id="menu_left" onclick="left('menu_left')"></div>


gibts da nicht noch andere Möglichkeiten, bzw. wie kann ich machen, dass er wieder zurückfadet.

[Falk Prüfer]

Hallo,

...Jedoch ist die Größenänderung recht lahm. ...

Na ja, alle Millisekunde das Teil aufzurufen ist auch ganz schön hart - das sind 1000 Änderungen pro Sekunde, Kino kommt mit 24 aus. Hier solltes du etwas großzügiger sein und den Timer z.B. mit 50 statt mit 1 aufrufen und dafür die Schrittweite von 1 auf z.B. 4 ändern.

...Hab nur ein Problem mit dem schließen. Will ja auch dass er zurück fadet. ...

Funktioniert eigentlich genauso, nur das der Container bei jedem Schritt nicht größer sondern kleiner gemacht wird.

Gruß Falk