JavaScript DIV Beispiel 6: JavaScript resize DIV

<a href="javascript:init_div_size ('d', '200px', '4em')" title="">initialize DIV size (200px, 4em)</a><br>
<a href="javascript:resize_div ('d', 20, 400, 8, '200px', '4em')" title="">resize DIV (200px,4em)->(400px,8em)</a><br>
<a href="javascript:resize_div ('d', 20, 400, 4)" title="">resize DIV (400, 4)</a><br>
<a href="javascript:resize_div ('d', 20, 200, 4)" title="">resize DIV (200, 4)</a><br>
<a href="javascript:resize_div ('d', 20, 400, 2)" title="">resize DIV (400, 2)</a><br>
<a href="javascript:resize_div ('d', 20, 400, 8)" title="">resize DIV (400, 8)</a>

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zur Vergrößerung oder Verkleinerung eines HTML-Elements über die Style-Angaben
// width und height. Der Vorgang wird in einer Timeout-Schleife durchgeführt, wodurch der
// Eindruck einer dynamisch animierten Vergrößerung bzw. Verkleinerung entsteht.
// Autor: Alexander Müller
// Internet: http://www.EvoComp.de
function resize_div (element_id, timeout, size_x, size_y, start_size_x, start_size_y) {
  // Verweis auf das Element über seine ID ermitteln.
  var element = document.getElementById (element_id);
  // Wurde die Funktion resize_div bereits aufgerufen (der Interval schon gestartet)?
  if (!proc) {
    // Wenn nicht, dann werden zunächst die Startwerte für Breite und Höhe des Elements ermittelt.
    // Wurden Angaben zur Startgröße des Elements gemacht, so werden diese sicherheitshalber
    // im Style des Elements gespeichert. Die Werte müssen hier samt Einheit angegeben werden,
    // damit bei der weiteren Verarbeitung klar ist, in welcher Einheit die Ausdehnung der Zielgröße
    // angegeben ist.
    if (start_size_x)
      element.style.width = start_size_x;
    if (start_size_y)
      element.style.height = start_size_y;
    // Stehen noch keine Werte in den Style-Angaben des Elements?
    if (!element.style.width ¦¦ !element.style.height)
      // Existiert die Methode getComputedStyle, so kann der Style über diese Methode ermittelt werden.
      // Bei modernen Browsern existiert diese Methode bereits seit längerem.
      // Unterstützt wird die Methode z.B. von allen Mozilla-Abkömmlingen (Firefox und andere Geckos),
      // Netscape ab Version 6, Opera ab 7.2 und Safari. Der IE kennt diese Methode bis Version 7
      // allerdings noch nicht!
      // ACHTUNG: Man beachte, dass der hierüber ermittelte Wert stets in Pixel angegeben ist!
      // Ist bei den Zielgrößen size_x oder size_y ein anderes Maß gemeint, so führt dies dazu, dass
      // dieser Wert als px-Angabe interpretiert wird! Der gewünschte Effekt wird dann nicht erreicht.
      if (window.getComputedStyle) {
        var style = document.defaultView.getComputedStyle (element, null);
        element.style.width = style.getPropertyValue ('width');
        element.style.height = style.getPropertyValue ('height');
      }
      // Position bei IE mit currentStyle ermitteln.
      else if (element.currentStyle) {
        element.style.width = element.currentStyle.width;
        element.style.height = element.currentStyle.height;
      }
      // Ansonsten kann nur von einer Standardgröße ausgegangen werden (hier 0x0 Pixel)
      else {
        element.style.width = '0px';
        element.style.height = '0px';
      }
    // Nummerischen Anteil der Startwerte für die Größe des HTML-ELements ermitteln
    start_size_x = parseFloat (element.style.width);
    start_size_y = parseFloat (element.style.height);
    // Zyklischer Aufruf dieser Funktion mit den Start- und Endwerten starten...
    proc = window.setInterval ('resize_div (\'' + element_id + '\', ' + timeout + ', ' + size_x + ', ' + size_y + ', ' + start_size_x + ', ' + start_size_y + ')');
    // und Beenden der Funktion. Sie wird mit dem angegebenen Timeout per Intervallverarbeitung
    // erneut aufgerufen so oft dies nötig ist um die eigentliche Arbeit zu erledigen.
    return;
  }

  // Der Folgende Teil wird erst ausgeführt, wenn der erste Zyklus des von setInterval gestarteten
  // Prozesses erreicht ist.
  // Einheit für die Breite ermitteln
  element.style.width.match (/[0-9.]+(.+)/);
  var ex = RegExp.$1 ¦¦ 'px';
  // Gleiches für die Höhe
  element.style.height.match (/[0-9.]+(.+)/);
  var ey = RegExp.$1 ¦¦ 'px';
  // Variablen zur Speicherung der Schrittweiten für die Breite und Höhe.
  var delta_x, delta_y;
  // Ist in der Breite überhaupt was zu tun?
  if (start_size_x != size_x) {
    // Änderung in der Breite bei Angaben in px oder pt um 3 Einheiten, ansonsten um 0.03 Einheiten
    delta_x = (ex == 'px' ¦¦ ex == 'pt') ? 5 : 0.05;
    // Anzahl der Schritte, die mit dem Änderungsschritt durchgeführt werden müssen.
    // Aufgrund der Anzahl der Schritte wird dann die Y-Schrittweite berechnet.
    var steps = (start_size_x < size_x ? size_x - start_size_x : start_size_x - size_x) / delta_x;
    // Größe der Änderungsschritte in der Höhe berechnen.
    delta_y = (start_size_y < size_y ? size_y - start_size_y : start_size_y - size_y) / steps;
  }
  else {
    // Breite benötigt keine Anpassung...
    delta_x = 0;
    // und die Höhe wird von der Schrittweite wie oben die Breite behandelt
    delta_y = (ey == 'px' ¦¦ ey == 'pt') ? 15 : 0.15;
  }

  // Ist die Endgröße noch nicht erreicht?
  if (parseFloat (element.style.width) != size_x ¦¦
      parseFloat (element.style.height) != size_y) {
    // Wenn ja, muss die Ausdehnung um die Delta-Werte geändert werden.
    // Breite um einen Schritt vergrößern bzw. verkleinern, indem die X-Ausdehnung des HTML-Elements
    // durch Addition des X-Deltas (negierter Wert, wenn verkleinert werden muss) zur bisherigen Größe neu berechnet wird.
    var width = parseFloat (element.style.width) + (start_size_x < size_x ? delta_x : -delta_x);
    // Ist die Differenz zur Zielgröße kleiner als der Änderungswert, so sind wir an der
    // gewünschten Größe angekommen und setzen die Breite des HTML-Elements auf die Zielgröße.
    // Ansonsten wird nichts geändert und der berechnete Wert wird so belassen.
    width = (width > size_x ? width - size_x : size_x - width) < delta_x ? size_x : width;
    // Neue Breite des Elements inklusive Einheit der CSS-Eigenschaft für die Breite zuweisen.
    element.style.width = width + ex;
    // Gleiches geschieht für die Y-Ausdehnung mit dem Y-Delta des HTML-Elements
    var height = parseFloat (element.style.height) + (start_size_y < size_y ? delta_y : -delta_y);
    height = (height > size_y ? height - size_y : size_y - height) < delta_y ? size_y : height;
    element.style.height = height + ey;
  }
  else {
    // Endgrößen wurden bereits erreicht und ein weiterer Aufruf der Funktion ist nicht mehr nötig.
    // Intervall beenden, damit die Funktion nicht mehr zyklisch aufgerufen wird...
    window.clearInterval (proc);
    // und die Variable zur Speicherung der Intervall-ID zurücksetzen, damit weitere Aufrufe möglich sind.
    proc = null;
  }
}

// Variable zur Speicherung einer Intervall-ID, die zum
// Abbrechen einer zyklischen Verarbeitung benötigt wird.
var proc;

// Style-Angaben für das DIV-Element im JavaScript-Style-Objekt speichern.
// Die Funktion dient der Initialisierung eines Elements mit Werten zur
// Breite und Höhe.
// Als Parameter werden die Element-ID, sowie die Breite und Höhe
// des Elements angegeben.
function init_div_size (element_id, width, height) {
  var element = document.getElementById (element_id);
  if (element) {
    element.style.width = width;
    element.style.height = height;
  }
}
// -->
</script>