✔ Div animiert verkleinern mit Javascript

[ms92]

Hi,

Folgendes Problem:
Ich will so ein Pop-Under (ich glaube so heißt das; jedenfalls so ein Opo-Up, der nicht ein neues Fenster öffnet, sondern einfach über den anderen Sachen drüber liegt...) mit Text anzeigen lassen, wenn man auf einen Link klickt. Das sollte am besten auch so schick animiert sein und dann (wenn möglich), aber damit hab ich mich noch nicht beschäftigt an der Stelle des Links.
Etwa so wie Highslide (Link) nur eben nicht so aufwändig. Es soll außderm kommerziell genutzt werden und deshlab will ich es selber programmieren. Einfach den Code klauen ist ja nicht so gut und ich brauch auch das Verschieben und so nicht...
Der Code ist bisher noch nur die Test-Datei. Also hier der Code (das drumherum hab ich weggelassen mit html etc.):

<script type="text/javascript">
function resizeDivTo(div_id, div_height, div_width, div_size)
{
 var div = document.getElementById(div_id);
 div.style.display = 'block';
 if(div_size == 'xl'){
  var hw = div.offsetWidth + 1;
  var hh = div.offsetHeight + 1;
  div.style.width = hw+'px';
  div.style.height = hh+'px';
  if(div.offsetHeight < div_height){
   window.setTimeout("resizeDivTo('" + div_id +"'," + div_height + "," + div_width + ",'" + div_size + "');", 20);
  }
 }else if(div_size == 's'){
  var hw = div.offsetWidth - 1;
  var hh = div.offsetHeight - 1;
  div.style.width = hw+'px';
  div.style.height = hh+'px';
  if(div.offsetHeight < div_height){
   window.setTimeout("resizeDivTo('" + div_id +"'," + div_height + "," + div_width + ",'" + div_size + "');", 20);
  }else if(div_height == 0 && div_width == 0){
   div.style.display = 'none';
  }
 }
}
         //-->
        </script>
<style type="text/css">
<!--
#bigger{
position:absolute;
display:none;
top: 200px;
left:130px;
overflow:hidden;
padding:10px;
border:1px solid #000;
}
//-->
</style>
<a href="javascript:resizeDivTo('bigger',160,230,'xl');">Einblenden</a>
<br>
<a href="javascript:resizeDivTo('bigger',0,0,'s');">Ausblenden</a>
<div id="bigger">
Blablabla<br>Blablabla<br>Blablabla
</div>

Immerhin funktioniert schon das Einblenden. Beim Ausblenden werden aber die Werte für Länge und Breite nur noch größer...

 

[Sven Mintel]

du müsstest eigentlich beim Ausblenden nur den Vergleichsoperator umdreheh, würde ich mal sagen:

if(div.offsetHeight > div_height)

 

[ms92]

Wenn ich das mache, dann vergrößert es sich ins unendliche...
Es ist so, dass, wenn ich die Variable hw bzw. hh ausgebe, dann ist diese auch kleiner als die offsetHeight. (siehe Quelltext)

var hw = div.offsetWidth - 1;
  var hh = div.offsetHeight - 1;
alert('Neue Höhe (errechnet):'+hh+'Alte Höhe:'+div.offsetHeight);
  div.style.width = hw+'px';
  div.style.height = hh+'px';
alert('Jetzt die neue Höhe:'+div.offsetHeight+'Obwohl die neue eigentlich das sein müsste:'+hh);
  if(div.offsetHeight > div_height){
   window.setTimeout("resizeDivTo('" + div_id +"'," + div_height + "," + div_width + ",'" + div_size + "');", 20);
  }else if(div_height == 0 && div_width == 0){
   div.style.display = 'none';
  }

Ich versteh es einfach nicht
Kann mir jemand helfen? Probiert es mal bitte bei euch aus und sagt, ob ihr das gleiche Problem habt! Bitte!

 

[ms92]

Warum weiß denn da niemand ne Lösung :'(

 

[Quaese]

Hi,

versuch mal, die Breite und Höhe aus den jeweils aktuellen Style-Werten (width und height) zu ermitteln.

var hTimer;         // Variable für Timer-Objekt
var intStep  = 2;   // Schrittweite
var intDelay = 10;  // Verzögerung in Millisekunden

function resizeDivTo(div_id, div_height, div_width, div_size)
{
 var div = document.getElementById(div_id);
 div.style.display = 'block';
 if(div_size == 'xl'){
  div.style.width = ((isNaN(parseInt(div.style.width)))? 0 : (parseInt(div.style.width)+intStep)) + 'px';
  div.style.height = ((isNaN(parseInt(div.style.height)))? 0 : (parseInt(div.style.height)+intStep)) + 'px';
  if(parseInt(div.style.height) < div_height){
   hTimer = window.setTimeout("resizeDivTo('" + div_id +"'," + div_height + "," + div_width + ",'" + div_size + "');", intDelay);
  }
 }else if(div_size == 's'){
  div.style.width = ((isNaN(parseInt(div.style.width)))? 0 : (parseInt(div.style.width)-intStep)) + 'px';
  div.style.height = ((isNaN(parseInt(div.style.height)))? 0 : (parseInt(div.style.height)-intStep)) + 'px';
  if(parseInt(div.style.height) > div_height){
   hTimer = window.setTimeout("resizeDivTo('" + div_id +"'," + div_height + "," + div_width + ",'" + div_size + "');", intDelay);
  }else if(div_height == 0 && div_width == 0){
   div.style.display = 'none';
  }
 }
}

Ciao
Quaese

 

[ms92]

Danke! Hat geklappt! Super!