# Div per klick ausfahren/einfahren



## chaosente (10. August 2007)

Ich denke mal ich bin hier richtig,

ich möchte die Größe eines Div Layers per Mausklick manipulieren, und zwar so, dass er in einem bestimmten Zeitlichen Abstand ausfährt/einfährt.

Weis jemand wie man so etwas realiesieren kann?

mfg.Chaosente


----------



## Quaese (10. August 2007)

Hi,

das zeitliche Ausfahren lässt sich zum Beispiel mit Hilfe der Methode *setTimeout* realisieren.

Zum Vergrössern/Verkleinern könntest Du beispielsweise die *width*-Eigenschaft des *style*-Objektes ändern.

Beispiel:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
body{ background: #fff;}
 //-->
</style>
<script type="text/javascript">
  <!--
var intMin   = 100; // Min. Breite des DIVs
var intMax   = 400; // Max. Breite des DIVs
var intStep  = 2;   // Schrittweite, um die das DIV in seiner Grösse geändert wird
var intDelay = 5;   // Verzögerung in Millisekunden

var blnBig   = false;
var hTimer   = null;

function initResize(){
  blnBig = (blnBig)? false : true;  // false => verkleinern, true => vergrössern

  // Falls noch ein Timer läuft -> beenden
  if(hTimer != null) window.clearTimeout(hTimer);
  // Resize-Funktion verzögert aufrufen
  hTimer = window.setTimeout("resizeDiv()", intDelay);
}

function resizeDiv(){
  // Vorzeichen zum Vergrössern (1)/Verkleinern (-1) bestimmen
  var intSgn = (blnBig)? 1 : -1;

  // Element ermitteln, das in der Grösser verändert werden soll
  var objDiv = document.getElementById("divID");
  // Neue Grösse zuweisen
  objDiv.style.width = (parseInt(objDiv.style.width) + intSgn*intStep) + "px";
  // Falls die neue Grösse noch innerhalb der Grenzen liegt -> Resize-Funktion erneut aufrufen
  if((parseInt(objDiv.style.width) >= intMin) && (parseInt(objDiv.style.width) <= intMax)){
    hTimer = window.setTimeout("resizeDiv()", intDelay);
  }
}
 //-->
</script>
</head>
<button onclick="window.clearTimeout(hTimer);">stopp</button>
<div onclick="initResize();" style="border: 1px solid #ccc; background: #f7f7f7; width: 200px; height: 200px;" id="divID">
  <p>Zum Starten hier klicken.</p>
  <p>Richtungsänderung durch erneutes Klicken</p>
</div>
</body>
</html>
```
Ciao
Quaese


----------



## chaosente (13. August 2007)

Mir ist aufgefallen das das Ganze nur funktioniert, wenn ich meine style deklarationen *nicht* in meinem Css file mache... das würde ich allerdings ganz gerne machen... Wie muss ich das dann umbauen?


----------



## Quaese (13. August 2007)

Hi,

versuch mal, die *width*-Werte über die Methoden *getComputedStyle* bzw. *currentStyle* auszulesen.

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
body{ background: #fff;}
#divID{ border: 1px solid #ccc;
				background: #f7f7f7;
        width: 200px;
        height: 200px;}
 //-->
</style>
<script type="text/javascript">
  <!--
var intMin   = 100; // Min. Breite des DIVs
var intMax   = 400; // Max. Breite des DIVs
var intStep  = 2;   // Schrittweite, um die das DIV in seiner Grösse geändert wird
var intDelay = 5;   // Verzögerung in Millisekunden

var blnBig   = false;
var hTimer   = null;

function initResize(){
  blnBig = (blnBig)? false : true;  // false => verkleinern, true => vergrössern

  // Falls noch ein Timer läuft -> beenden
  if(hTimer != null) window.clearTimeout(hTimer);
  // Resize-Funktion verzögert aufrufen
  hTimer = window.setTimeout("resizeDiv()", intDelay);
}

function resizeDiv(){
  // Vorzeichen zum Vergrössern (1)/Verkleinern (-1) bestimmen
  var intSgn = (blnBig)? 1 : -1;

  // Element ermitteln, das in der Grösser verändert werden soll
  var objDiv = document.getElementById("divID");

  //  Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
  if(window.getComputedStyle){
    var strWidth = window.getComputedStyle(document.getElementById("divID"), null).getPropertyValue("width");
  //  Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
  }else if(document.getElementById("divID").currentStyle){
    var strWidth = document.getElementById("divID").currentStyle["width"];
  }

  // Neue Grösse zuweisen
  objDiv.style.width = (parseInt(strWidth) + intSgn*intStep) + "px";
  // Falls die neue Grösse noch innerhalb der Grenzen liegt -> Resize-Funktion erneut aufrufen
  if((parseInt(objDiv.style.width) >= intMin) && (parseInt(objDiv.style.width) <= intMax)){
    hTimer = window.setTimeout("resizeDiv()", intDelay);
  }
}
 //-->
</script>
</head>
<button onclick="window.clearTimeout(hTimer);">stopp</button>
<div id="divID" onclick="initResize();">
  <p>Zum Starten hier klicken.</p>
  <p>Richtungsänderung durch erneutes Klicken</p>
</div>
</body>
</html>
```
Ciao
Quaese


----------



## Guest (13. Januar 2011)

geht das auch von rechts nach links****?


----------



## timestamp (13. Januar 2011)

Natürlich geht das. Du kannst es auch kreisen lassen. Du musst die entsprechenden Werte nur anpassen


----------



## Guest (13. Januar 2011)

Hey danke für deine Antwort  ...un welche werte wären das...versteh nur bahnhof -.-


----------



## AlexXxXxXxXx (13. Januar 2011)

schließe mich dem an.

oder wie muss man das umschreiben des es erst groß ist (700px) un beim klicken kleiner wird, also genau umgekehrt?


----------



## MeySolution (14. Januar 2011)

@Guest:

die Werte sind folgende:

Div-Größe am Anfang steht in den Zeilen 11-12.
Sämtliche Werte die nach dem Resize erreicht werden sind in Zeilen 17-20 deklariert.

@AlexXxXxXxXx:

Wenn du den Effekt genau andersrum haben möchtest änderst du folgendes:
Zeile 11: width: 700px;
Zeile 17: var intMin = <Kleinerer Wert>;
Zeile 18: var intMax = 700;
Zeile 36:  var intSgn = (blnBig)? -1 : 1; 

Gruß
MeySolution


----------



## Quaese (17. Januar 2011)

Hi,

@Guest
Du könntest das DIV absolut positionieren und mit einer *right*-Definition ausrichten. Dann sollte sich das Element nach links neu dimensionieren.

@AlexXxXxXxXx
Statt Zeile 36 umzuschreiben, kannst du auch *blnBig* einfach den Wert *true* zuweisen. Dann beginnt das Script mit dem Verkleinern des Elements.

```
var blnBig   = true;
```
Ciao
Quaese


----------

