JavaScript DIV Beispiel 6: JavaScript resize DIV

Testelement zur Demonstration von resize_div

Demonstration der Funktion resize_div

Der untere Scriptteil dient der Demonstration der zuvor implementierten JavaScript-Funktion resize_div. Durch Anklicken der unten definierten Links wird die angegebene Operation ausgeführt. Im href-Attribut der A-Tags wird mit dem entsprechenden Funktionsaufruf das Ändern der Größe des DIVs eingeleitet.

Initialisiert wird das DIV-Element durch Aufruf der Funktion init_div_size. Aber auch mit dem ersten Aufruf der Funktion resize_div, welche die Startgröße des DIV-Elements samt Einheiten (px und em) als Parameter erhält, wird das DIV-Element initialisiert, da die Startgröße direkt zu Anfang gesetzt wird.

Welche Auswirkungen eine fehlende Initialisierung des DIV-Elements hat ist ersichtlich, wenn Sie eine der vier unteren Funktionen durch Anklicken des jeweiligen Links direkt zu Anfang starten. Aufgrund der Tatsache, dass die Einheit bei einer Vergrößerung von Bedeutung ist wird nicht der erwünschte Effekt erreicht. Beachten Sie bitte, dass die gleichzeitige Vergrößerung unterschiedlicher Elemente nicht möglich ist, da sich sonst die durch setInterval gestarteten zyklischen Prozesse in die Quere kommen würden.

<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>

initialize DIV size (200px, 4em)
resize DIV (200px,4em)->(400px,8em)
resize DIV (400, 4)
resize DIV (200, 4)
resize DIV (400, 2)
resize DIV (400, 8)

Eine JavaScript-Funktion zur animierten Änderung der Größe eines HTML-Elements

Auch in diesem Beispiel wird wieder das DIV-Element aus den vorherigen Beispielen verwendet. Das Vergrößern und Verkleinern des DIV-Elements wird auch hier wieder mit den CSS-Eigenschaften des DIVs ermöglicht. Hierzu werden die Attribute width und height benötigt, die in einem vorherigen Beispiel bereits genutzt wurden. Verwendung findet eine solche Operation beispielsweise, um PopUp-Fenster bei Verwendung eines PopUp-Blockers einzublenden.

Zur Realisierung einer animierten Vergrößerung bzw. Verkleinerung eines HTML-Elements bietet das Window-Objekt einige Methoden, die bei der animierten Größenanpassung des DIV-Elements benötigt werden. Da die Änderung der Ausdehnung des DIV-Fensters möglichst gleichförmig erfolgen soll, muss diese Operation in einem Zeitintervall Schritt für Schritt ausgeführt werden. JavaScript kennt hierzu die Methode setInterval, mit der es möglich ist, eine JavaScript-Funktion zyklisch in gewissen zeitlichen Abständen auszuführen. Nachdem die Zielgröße erreicht ist muss die noch laufende Intervallverarbeitung abgebrochen werden. Hierfür gibt es die Methode clearInterval, die dazu dient, einen zuvor gestarteten zyklischen Prozess wieder zu beenden.

Neben diesen Methoden zur zyklischen Verarbeitung von JavaScript-Code gibt es in JavaScript auch Methoden, die eine JavaScript-Anweisung nach Ablauf eines Timeouts einmalig ausführen. Gestartet wird solch ein verzögerter JavaScript-Aufruf mit der Methode setTimeout, die ebenfalls zum Window-Objekt gehört. Hier heißt das Gegenstück zum Beenden des verzögerten Aufrufs clearTimeout.

Im folgenden Script-Abschnitt wird die Funktion resize_div implementiert. Diese Funktion dient dazu, ein DIV-Element auf eine bestimmte per Parameter angegebene Größe zu verändern. Aber auch andere HTML-Elemente – beispielsweise ein SPAN-Element – lassen sich mit dieser Funktion in ihrer Größe ändern.

Dies liegt daran, dass das Element, welches in seiner Ausdehnung geändert werden soll, über seine Element-ID adressiert wird – es wird also das Element mit der angegebenen ID im ID-Attribut angepasst. Das entsprechende HTML-Element wird mit Hilfe der Methode getElementById ermittelt, welche einen Verweis auf das HTML-Elementobjekt liefert. GetElementById ist eine von vielen Methoden, die im vordefinierten JavaScript-Objekt Document implementiert sind.

Als erster Parameter der Funktion wird eine Zeichenkette übergeben, welche den ID-Wert des anzupassenden DIV-Elements enthält. Mit Hilfe dieser ID wird das Element über die Hierarchie des HTML-Elementenbaumes auf Basis des Document Object Model (DOM) angesprochen. Der zweite Parameter gibt an, in welchen zeitlichen Abständen die Vergrößerungs- bzw. Verkleinerungsschritte durchgeführt werden sollen – hierdurch wird im Grunde die Geschwindigkeit der Größenänderung festgelegt.

Parameter drei und vier enthalten die Ausdehnung (Breite und Höhe) des DIV-Elements am Ende des Vergrößerungsvorgangs – Auf diese Werte werden die CSS-Eigenschaften width und height des DIV-Elements Schritt für Schritt angeglichen. Hier müssen keine Einheiten angegeben werden, da für beide Komponenten (width und height) angenommen wird, dass es sich um die selben Einheiten handelt, die auch in den Element-Eigenschaften stehen. Dies setzt voraus, dass die Eigenschaften width und height des DIV-Elements bereits mit Werten vorbelegt sind, das Element also schon initialisiert wurde.

Beachten Sie bitte, dass die bloße Angabe der Größe im StyleSheet – nicht im Style-Objekt des JavaScript-Events – die Eigenschaften des JavaScript-Style-Objekts nicht initialisiert. Zum Zweck der Initialisierung des DIVs wird unten auch die Funktion init_div_size definiert. Mit getComputedStyle kann zwar unter Umständen die Größe des Elements ermittelt werden, allerdings funktioniert das nicht bei allen Browsern. Darüber hinaus kann es zu Problemen führen, wenn die Angabe der Zielgrößen (width und height) nicht als px-Angabe gemeint sind. Also sollte das Element stets initialisiert werden, bevor es in der Größe geändert wird, wenn andere Einheiten, wie beispielsweise em verwendet werden sollen.

Die Parameter start_size_x und start_size_y – Breite (width) und Höhe (height) des DIV-Elements beim Start der Größenänderung – sind optional und werden als String an die Funktion übergeben, da hier neben den Positionswerten auch die Einheit (px, em...) mit angegeben wird. Somit wird das zu vergrößernde bzw. verkleinernde DIV-Element auch direkt initialisiert und es steht auch fest, in welcher Einheit die Komponenten der Zielgröße angegeben ist. Werden diese Parameter nicht mit angegeben, so übernimmt die Funktion die Einheiten aus den CSS-Eigenschaften des jeweiligen HTML-Elements.

<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>

Fatal error: Uncaught Error: Call to undefined function ereg() in /homepages/26/d102044405/htdocs/_WEB_FORUM_EVO_/forum_last.php:6 Stack trace: #0 {main} thrown in /homepages/26/d102044405/htdocs/_WEB_FORUM_EVO_/forum_last.php on line 6


¬ Insolvenzrecht