Alles in einem!

Teil 2: Webauftritt in einer Datei

31.8.2007 von Redaktion pcmagazin

ca. 3:50 Min
Ratgeber
  1. Webauftritt in einer Datei
  2. Teil 2: Webauftritt in einer Datei

Zunächst benötigt das Skript einige globale Variablen, damit es sich den aktuellen Zustand der auf dem Bildschirm befindlichen Seiten merken kann. In der Variable "aktuellerframe" wird die ID des aktuell sichtbaren DIVs gespeichert. Zu Beginn ist das "finh1" - die Startseite. In "step" ist die Schrittweite des Seitentausches definiert. Je höher dieser Wert, desto schneller und unharmonischer ist der eigentliche Wechsel.

Webauftritt in einer Datei
© Archiv

"rein" und "raus" werden von den Wechselfunktionen benötigt, damit die korrekten DIVs auch ausgewechselt werden. Im Verlauf des Programms speichern die Funktionen die IDs der zu wechselnden DIVs. Die Logikvariable "wechselimgange" enthält den Zustand der Seite. Wird gerade ein Seitenaustausch vorgenommen, ist in dieser Variable der Wert TRUE gesichert, findet kein Seitenaustausch statt, ist der Wert FALSE.

Diese Zustände werden benötigt, damit das Skript nicht mehrere Seitenwechsel auf einmal durchführt. Die entsprechende Abfrage erkennen Sie in Zeile 11. Ein Seitenwechsel wird hier nur aktiviert, wenn einerseits kein anderer Wechsel aktiv ist und andererseits nicht die gleiche Seite aufgerufen wird, die bereits auf dem Bildschirm zu sehen ist.

Die Variablen "linksnachrechts" und "untennachoben" enthalten jeweils die beim Wechsel benötigten Positionen der DIV - für das entschwebende Fenster die Position des linken Randes und für das einschwebende Fenster die Position des oberen Randes. Schließlich benötigen wir noch eine Variable "schweben", die für das Intervall eingesetzt wird.

Die Funktion "wechsel()" übernimmt die Kontrolle und das Deklarieren der für die Bewegung notwendigen Variablen. Zunächst werden "rein" (neue Seite - Übergabevariable der Funktion) und "raus" (alte Seite - Wert aus "aktuellerframe") gefüttert. Es folgt die bereits beschriebene Abfrage, die entscheidet, ob ein Seitenwechsel überhaupt stattfinden darf.

In den Zeilen 13 und 14 wird das DIV, das die Daten der neuen Seite enthält, positioniert. Sein linker Rand wird auf den Standardwert, der sich aus dem Design ergibt, zurückgesetzt (in diesem Beispiel 180 Pixel). Der obere Rand kommt weit nach unten auf die Seite (1000px). Diese beiden Werte müssen Sie neu justieren, wenn Sie eine andere Anordnung der Seitenelemente generieren möchten. Der Schalter "wechselimgange" muss auf TRUE gesetzt werden. In Zeile 16 speichert die Funktion die Startwerte für die Bewegung und danach kann der Seitenaustausch beginnen.

Das Intervall in Zeile 17 ist auf eine Zehntelsekunde eingestellt. Die Funktion "move()" bearbeitet die neuen Positionen der beiden rein- und rausschwebenden DIVs. Die Position des linken Randes des alten DIVs wird um den Wert "step" erhöht, die des oberen Randes des neuen DIVs um "step" reduziert. In den Zeilen 23 und 24 kontrolliert die Funktion die Endpositionen der beiden DIVs. Der Einfachheit halber werden beide DIVs - sollten die Endpositionen erreicht sein - immer wieder auf diese Position gesetzt. Das erspart weitere detaillierte Abfragen und der Besucher der Seite bekommt davon nichts mit.

Erst wenn beide Endpositionen erreicht sind (Zeile 29), stoppt die Funktion die Bewegungen der DIVs und setzt das Intervall zurück. Zusätzlich wird die Variable "wechselimage" wieder auf FALSE gesetzt, damit die nächsten Seitenwechsel durchgeführt werden können. Die Funktion speichert den Namen des jetzt sichtbaren DIVs ("rein") in der Variablen "aktuellerframe".

Anpassungen

Das Beispielskript arbeitet mit einem Dachrahmen (900x50 Pixel), einem Navigationsrahmen (150x600 Pixel) und dem wechselnden Inhaltsbereich (740x600 Pixel). Zwischen den Rahmen ist ein wenig Raum, der für grafische Extras genutzt werden kann. Aus den Abständen ergibt sich eine Positionierung des Inhaltsrahmens von 70 Pixeln vom oberen Rand und 180 Pixeln vom linken Rand. Wenn Sie eine eigene Positionierung der Frames generieren, müssen Sie im Skript den oberen Rand und den linken Rand der neuen Positionen als Kontrollen für die Endposition im Skript anpassen (Zeilen 6, 14, 16, 23 und 29).

Webauftritt in einer Datei
© Archiv

Das Tempo des Wechsels beeinflussen Sie entweder durch den Intervallaufruf in Zeile 17 oder die Schrittzahl in Zeile 3. Wenn Sie die Inhalte der Seiten in einer separaten Datei aufbauen, achten Sie darauf, dass Sie diese Schablonendatei auch mit den benötigten Formatierungs- Klassen aus CSS versehen, damit die Positionierung der einzelnen Seiten vor dem Einkopieren in die Hauptdatei perfekt stimmt. Sollten Sie mehr Raum für Ihre Inhalte benötigen als der Inhaltsframe zur Verfügung stellt, versehen Sie diesen mit dem CSS-Parameter "overflow : auto;". Bei Bedarf werden die Rollbalken am rechten Rand des DIVs eingeblendet.

DAS BEISPIEL-LAYOUT

01 var aktuellerframe = "finh1";
02 var wechselimgange = false;
03 var step = 10;
04 var rein = "";
05 var raus = "";
06 var linksnachrechts = 180;
07 var untennachoben = 1100;
08 var schweben;
09 function wechsel(frame) {
10 raus = aktuellerframe; rein = frame;
11 if (!wechselimgange && raus!=rein)
12 {
13 document.getElementById(rein).style.top = "1000px";
14 document.getElementById(rein).style.left = "180px";
15 wechselimgange = true;
16 linksnachrechts = 180; untennachoben = 1000;
17 schweben = setInterval(‘move()‘,10);
18 }
19 }
20 function move() {
21 linksnachrechts = linksnachrechts + step;
22 untennachoben = untennachoben - step;
23 if (untennachoben<70){untennachoben=70;}
24 if (linksnachrechts>1100){linksnachrechts=1100;}
25 wert1 = untennachoben + "px";
26 wert2 = linksnachrechts + "px";
27 document.getElementById(rein).style.top = wert1;
28 document.getElementById(raus).style.left = wert2;
29 if (linksnachrechts==1100 && untennachoben==70){
30 clearInterval(schweben);
31 wechselimgange = false;
32 aktuellerframe = rein;}
33 }

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.