Div per klick ausfahren/einfahren

C

chaosente

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
 
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:
Code: 
<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
 
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?
 
Hi,

versuch mal, die width-Werte über die Methoden getComputedStyle bzw. currentStyle auszulesen.
Code: 
<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
 
Hey danke für deine Antwort ;) ...un welche werte wären das...versteh nur bahnhof -.-
 
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?
 
@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
 
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.
Code: 
var blnBig   = true;
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück