JavaScript DIV Beispiel 5: JavaScript scroll DIV

Testelement zur Demonstration von scroll_div

Demonstration der Funktion scroll_div

Im Script-Abschnitt unterhalb dieses Absatzes werden die Funktionen ini_div_position und scroll_div, welche im JavaScript-Code weiter unten implementiert werden, demonstriert. Mit Hilfe des A-Tag-Attributes href wird die entsprechende Funktion nach Anklicken des Links unter Verwendung des Pseudoprotokolls javascript: aufgerufen. Neben dieser Art die Funktion scroll_div zu nutzen können Sie auch automatisch nach dem Laden eines HTML-Dokuments eine solche Operation ausführen lassen. Dazu bietet sich das Event onLoad an. Dieses Event wird automatisch nach Laden der HTML-Datei durch den Browser ausgelöst. Beachten Sie hierzu die Seite onLoad, wo anhand eines Beispiels die Nutzung des onLoad-Events demonstriert wird.

<a href="javascript:init_div_position ('d', '0px', '0px')" title="">initialize DIV position (0px, 0px)</a><br>
<a href="javascript:scroll_div ('d', 20, 240, 13, '120px', '33em')" title="">scroll DIV (120px, 33em) -> (240px, 13em)</a><br>
<a href="javascript:scroll_div ('d', 20, 540, 540)" title="">scroll DIV (540, 540)</a><br>
<a href="javascript:scroll_div ('d', 20, 420, 540)" title="">scroll DIV (420, 540)</a><br>
<a href="javascript:scroll_div ('d', 20, 420, 420)" title="">scroll DIV (420, 420)</a><br>
<a href="javascript:scroll_div ('d', 20, 540, 420)" title="">scroll DIV (540, 420)</a>

initialize DIV position (0px, 0px)
scroll DIV (120px, 33em) -> (240px, 13em)
scroll DIV (540, 540)
scroll DIV (420, 540)
scroll DIV (420, 420)
scroll DIV (540, 420)

Beim ersten Link wird als Reaktion auf das Anklicken die Funktion init_div_position aufgerufen. Diese Funktion dient der Initialisierung des DIV-Elements. Der darauf folgende Aufruf bewegt das DIV von einem Startpunkt aus zur ebenfalls angegebenen Zielposition. Auch hier wird das Element durch die Angabe der Startposition initialisiert, da das DIV-Element zu Anfang an die Startposition gesetzt wird, von wo aus das animierte Scrolling beginnt. Der Browser stellt dies, wenn die angegebene Startposition ungleich der aktuellen Position des DIVs ist, dabei umgehend dar, so dass das HTML-Element an die Startposition springt. Bei allen darauf folgenden Operationen werden relative Bewegungen durchgeführt. Die angegebenen Zielkoordinaten werden in der Einheit interpretiert, in welcher die aktuelle Position des Elements gespeichert ist.

Das zu verschiebende DIV-Element sollte stets – unter Verwendung von JavaScript über die Style-Angaben im HTML-Elementobjekt – initialisiert sein, damit keine unerwünschten Effekte auftreten. Die Auswirkung einer Mischung von Angaben verschiedener Einheiten können Sie beobachten, wenn Sie nach dem Anklicken des zweiten Links auf einen der darauf folgenden Klicken ohne zuvor die erneute Initialisierung mit der Funktion init_div_position durchzuführen. In diesem Fall steht die vertikale Positionskomponente noch auf em und die Zielpositionen werden deshalb auch als em-Angaben gewertet – das DIV-Element verschwindet nach unten. Auch sollten Sie darauf achten, dass nicht mehrere Bewegungsabläufe zur gleichen Zeit durchgeführt werden, da diese sich sonst in die Quere kommen und laufende Intervalle nicht beendet werden.

Eine JavaScript-Funktion zur animierten Verschiebung eines HTML-Elements

Die im nächsten Code-Abschnitt folgende Funktion scroll_div soll einen DIV-Layer in animierter Form Schritt für Schritt an einen definierten Zielpunkt bewegen. Zur Manipulation des Position des DIV werden auch hier wieder Änderungen im Style-Objekt des DIVs – genauer gesagt in den Attributen left und top – durchgeführt. Über die CSS-Attribute left und top wird die Postion der oberen, linken Ecke des HTML-Elements festgelegt.

Genutzt werden kann die Funktion scroll_div zu vielen Gelegenheiten. Neben der dynamischen Verschiebung von Anzeigebereichen, die Teil einer Internetseite sind, ist auch eine Nutzung als PopUp-Fenster zum Einblenden von Werbeinformationen zur Umgehung von PopUp-Blockern möglich. Hier kann das DIV-Element mit der Werbebotschaft schrittweise ins Browserfenster gescrollt werden. So kann das onLoad-Event den Prozess zum Einblenden des PopUp-Fensters einleiten, während das Anklicken eines Schließen-Links im PopUp-Fenster das Ausblenden initiiert – quasi ein Event-Gesteuertes DIV move in / DIV move out.

Der Eindruck einer animierten Bewegung des DIV-Elements wird mittels zyklischer Verarbeitung von Anweisungen in einem Intervall umgesetzt. Alle dazu nötigen Werkzeuge bringt das vordefinierte JavaScript-Objekt Window gleich mit. Beim ersten Aufruf der Funktion wird allerdings zunächst einmal nur die Startposition des DIV-Elements ermittelt und gegebenenfalls das Element auf eine im Funktionsaufruf angegebene Startposition gesetzt. Mit der Methode setInterval wird das schrittweise Scrolling gestartet. Ist das Element an der Zielposition angekommen, so wird die Intervallverarbeitung abgebrochen. Dies geschieht durch Aufruf der Methode clearInterval.

Zum Thema Verzögerung von JavaScript-Funktionsaufrufen beachten Sie bitte die Methode setTimeout, mit deren Hilfe ein JavaScript-Aufruf nach Ablauf eines Timeouts einmalig durchgeführt wird. Auch hier existiert eine Methode zur Beendigung eines laufenden Timeouts, die Methode clearTimeout.

Das zu verändernde DIV – im Grunde können aber auch andere Elemente, wie SPAN- oder P-Tags verwendet werden – wird über den JavaScript HTML-Elementenbaum unter Verwendung des Document Object Model (DOM) angesprochen. Die ersten beiden Parameter der Funktion scroll_div enthalten die HTML-Element-ID des zu bewegenden Elements und das Timeout, welches zwischen zwei Bewegungsschritten verstreichen soll (quasi die Geschwindigkeit, mit der die Animation laufen soll). Adressiert wird das zu bewegende HTML-Element über dessen Element-ID mit Hilfe der JavaScript-Methode getElementById. Sie ist Teil der Objekt-Schnittstelle des JavaScript-Objekts Document, einem der zentralen JavaScript-Objekte, die im Zuge des DOM eingeführt wurden. Nach jeder schrittweisen Neuberechnung der Positionskomponenten stellt das Browserfenster das DIV an der neu eingestellten Position dar.

Die beiden letzten Parameter der Funktion scroll_div können angegeben werden, sind aber nicht zwingend erforderlich. Als Strings werden hier die left- und top-Position des DIVs vor Beginn des verschiebens angegeben. Diese müssen dann nicht nur die Position, sondern auch die Einheiten (px, em...) enthalten, in denen die Startposition angegeben ist – hierdurch wird die Position des DIVs zugleich initialisiert.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Verschieben eines HTML-Elements über seine Style-Angaben left und top.
// Mit einer Timeout-Schleife wird ein schrittweises Scrollen durchgeführt, wodurch der
// Eindruck eines dynamisch animierten scrollings entsteht.
// Autor: Alexander Müller
// Internet: http://www.EvoComp.de
function scroll_div (element_id, timeout, left_end, top_end, left_start, top_start) {
  // Verweis auf das Element über seine ID ermitteln.
  var element = document.getElementById (element_id);
  // Wurde die Funktion scroll_div bereits aufgerufen (der Interval schon gestartet)?
  if (!proc) {
    // Ist dies nicht der Fall, so werden die Startwerte für left und top des Elements ermittelt.
    // Wurden Angaben zur Startposition des Elements gemacht, so werden diese umgehend
    // im Style des Elements gespeichert. Die Werte müssen hier mit Einheit angegeben werden,
    // damit bei der weiteren Verarbeitung klar ist, in welcher Einheit die Zielposition
    // angegeben ist.
    if (left_start)
      element.style.left = left_start;
    if (top_start)
      element.style.top = top_start;
    // Enthält der Style des Elements noch keine Angaben zur Position des DIV-Elements?
    if (!element.style.left ¦¦ !element.style.top)
      // Wenn der Browser die Methode getComputedStyle kennt, 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 Zielkoordinaten left_end oder top_end ein anderes Maß gemeint, so führt dies dazu, dass
      // dieser Wert als px-Angabe interpretiert wird!
      if (window.getComputedStyle) {
        var style = document.defaultView.getComputedStyle (element, null);
        element.style.left = style.getPropertyValue ('left');
        element.style.top = style.getPropertyValue ('top');
      }
      // Position bei IE mit currentStyle ermitteln.
      else if (element.currentStyle) {
        element.style.left = element.currentStyle.left;
        element.style.top = element.currentStyle.top;
      }
      // Konnten die Positionswerte nicht ermittelt werden, so wird als Ausgangsposition
      // die obere, linke Ecke des Fensters angenommen und als Einheit Pixel gewählt.
      else {
        element.style.left = '0px';
        element.style.top = '0px';
      }
    // Nummerischen Anteil der Startwerte für die Position des DIV-ELements ermitteln
    left_start = parseFloat (element.style.left);
    top_start = parseFloat (element.style.top);
    // Zyklischer Aufruf dieser Funktion mit den Start- und Endwerten starten...
    proc = window.setInterval ('scroll_div (\'' + element_id + '\', ' + timeout + ', ' + left_end + ', ' + top_end + ', ' + left_start + ', ' + top_start + ')');
    // 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 X-Achse ermitteln
  element.style.left.match (/[0-9.]+(.+)/);
  var ex = RegExp.$1 ¦¦ 'px';
  // Gleiches für die Y-Achse
  element.style.top.match (/[0-9.]+(.+)/);
  var ey = RegExp.$1 ¦¦ 'px';
  // Variablen zur Speicherung der Schrittweiten zur Änderung der Positionierung.
  var delta_x, delta_y;
  // Muss in der horizontalen bewegt werden?
  if (left_start != left_end) {
    // Schrittweite für die horizontale Positionierung wählen...
    delta_x = (ex == 'px' ¦¦ ex == 'pt') ? 2 : 0.02;
    // Anzahl der Schritte, die in der horizontalen gemacht werden müssen...
    var steps = (left_start < left_end ? left_end - left_start : left_start - left_end) / delta_x;
    // und aus diesen beiden Werten die Schrittweite in der Vertikalen berechnen.
    delta_y = (top_start < top_end ? top_end - top_start : top_start - top_end) / steps;
  }
  else {
    // In der horizontalen ist nichts zu tun...
    delta_x = 0;
    // und in der Vertikalen wird die Schrittweite festgelegt.
    delta_y = (ey == 'px' ¦¦ ey == 'pt') ? 2 : 0.02;
  }

  // Wenn die Zielposition noch nicht erreicht wurde...
  if (parseInt (element.style.left) != left_end ¦¦
      parseInt (element.style.top) != top_end) {
    // wird die neue Positionierung durch Addition der horizontalen Schrittweite berechnet.
    var left = parseFloat (element.style.left) + (left_start < left_end ? delta_x : -delta_x);
    // Ist das DIV-Element nicht weiter als eine Schrittweite von der horizontalen Zielposition entfernt,
    // so wird die Zielposition angenommen.
    left = (left > left_end ? left - left_end : left_end - left) < delta_x ? left_end : left;
    // DIV-Element an die neu berechnete horizontale Position setzen.
    element.style.left = left + ex;
    // Gleiches geschieht mit der Positionierung auf der vertikalen Achse.
    var top = parseFloat (element.style.top) + (top_start < top_end ? delta_y : -delta_y);
    top = (top > top_end ? top - top_end : top_end - top) < delta_y ? top_end : top;
    element.style.top = top + ey;
  }
  else {
    // Zielposition wurde 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;

// Folgende Funktion dient der Initialisierung des DIV-Elements mit Werten zur
// linken, oberen Position.
// Als Parameter werden die Element-ID, sowie die Position des Elements auf
// der horizontalen und vertikalen (left, top) angegeben.
function init_div_position (element_id, left, top) {
  var element = document.getElementById (element_id);
  if (element) {
    element.style.left = left;
    element.style.top = top;
  }
}
// -->
</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