JS: Div per Klick vergrößern

TheRocco85

Aktives Mitglied
Thread Starter
Dabei seit
12.08.2007
Beiträge
1.041
Reaktionspunkte
27
Nachdem ich bis jetzt leider nichts hinbekommen habe, das funktioniert, muss ich mal das Ganze posten.

Was ich will ist ganz einfach: Per Klick die Höhe eines Divs von 10px auf 200px vergrößern. Das an sich klappt. Allerdings wäre eine Animation, wie man es mittlerweile häufig sieht, nett.

Dazu bin ich nach einem Tipp in einem anderen Forum vorgegangen (Div-Container einfaden mittels Javascript - Entwickler-Forum , braucht ihr euch aber nicht anzusehen).

Leider klappt das bei mir garnicht. Hier was ich gemacht hab:

In den Head-Bereich:
Code:
<script language="javascript" type="text/javascript">
var i=10;
function popup() {

if(i < 200){
	i=++;
	
	tvar = i + "px";
	
	document.getElementById("Optionen").style.height = tvar;
	setTimeout("popup()", 100);
}
else {
	i = 10;
}


}
</script>

Im Body:
Code:
<div id="Optionen" style="width: 100%; height: 10px; background-color: black; position:fixed; top:0; display:block;">

</div>
<a href="#" onClick="popup()">Vergr&ouml;&szlig;ern</a>

Nun, wenn ich draufklicke geschieht garnichts.

Ich hoffe jemand kann mir hierbei helfen!

Vielen Dank im Voraus!
 
Moin,

diese Zeile
Code:
i=++;

muss so aussehen
Code:
i++;

Dann sollte es klappen.
 
  • Gefällt mir
Reaktionen: TheRocco85
Die Lösung von lindic funktioniert zwar, allerdings finde ich den Lösungsansatz an sich nicht sehr gelungen: Zumindest bei mir ist dieser Animations-Effekt kriechend langsam.

Ich selbst würde da eher auf jQuery zurückgreifen, eine mögliche Lösung sieht da so aus:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jsklickerklacker</title>
    <script src="jquerystuff/jquery.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $(".gross").bind("click", function() {
          $("#Optionen").animate({height: "200px"}, "slow");
        });
        $(".klein").bind("click", function() {
          $("#Optionen").animate({height: "10px"}, "slow");
        });
    });
    </script>
</head>
<body>
    <div id="Optionen" style="width: 100%; height: 10px; background-color: black; position:fixed; top:0; display:block;">
    </div>
    <div style="margin-top:220px;">
        <a href="javascript:void(0);" class="gross">Vergrößern</a>
        <a href="javascript:void(0);" class="klein">Verkleinern</a>
    </div>
</body>
</html>

Demo dieser Lösung

Da ich selbst nicht so der JS-Kenner bin, gibt es vermutlich noch elegantere Lösungen…
 
Danke, das mit dem i++ hab ich vollkommen übersehen! Danke!

Deine Lösung, Atarimaster, benötigt eine eigene Library, die ich wegen dem einmal vorkommenden Effekt nicht verwenden möchte.

Konnte außerdem die Geschwindigkeit durch ein geringeres Timeout und durch eine größere Schrittweite erhöhen.

Dank euch nochmal!
 
Zurück
Oben Unten