Slideup

Demo öffnen

Autor: Ich

www.friedels-home.de

IE 5 IE 6 IE 7
Opa 8 Opa 9
NN 2 NN 3 NN 4 NN 6 NN 7
Moz 1 FF 0 FF 1 FF 2 FF 3

Beschreibung

Dieses Script kann leider nicht einfach in eine Seite eingebaut werden. Die ganze Seite muss angepasst werden. Das Slideup ist im Gegensatz zu einem Popupfenster kein eigenes Fenster sondern Bestandteil der Seite. Das hat natürlich den Vorteil, dass man keine Probleme mit Popupblockern hat.

Bei diesem Script legt man 2 Bereiche mit Seiteninhalt an, die zunächst hintereinander liegen. Der eine Bereich verdeckt den anderen also. Wenn man einen Link anklickt, wird der vordere Bereich um eine vorher festgelegte Strecke nach unten verschoben wodurch der hintere, bisher verdeckte Bereich sichtbar wird. Bei erneutem Anklicken des Links verschwindet das Slideup wieder hinter dem anderen Bereich.

Der Einbau

Die Scriptdatei

Ich habe das eigentliche Script so angelegt, dass es als externe Scriptdatei eingebaut werden kann. Dadurch braucht man in die Seite keinen Scriptbereich ein zu bauen, was zumindest für JavaScript-Laien die Sache etwas erleichtert. Nebenbei hat man so eine Datei, die man für verschiedene Seiten verwenden kann. Diese Scriptdatei kannst du dir downloaden indem du den folgenden Link mit der rechten Maustaste anklickst und im Kontextmenü "Ziel speichern unter…" wählst. Je nach verwendetem Browser kann die Option auch anders heißen. Wenn du das Script nur für eine Seite verwenden willst, speicherst du die Scriptdatei am besten im selben Ordner ab, wie die Seite zu der sie gehört. Wenn du das Script für mehrere Seiten verwenden willst, kannst du die Scriptdatei auch an anderer Stelle, z.B. im Ordner "Scripte" abspeichern. Die Datei solltest du unter dem Namen slideup.js abspeichern. Und hier ist der Link: slideup.js.

Die Seite

Wenn du eine neue Seite mit dem Script schreibst, kannst du nach dieser Anleitung vorgehen. Wenn du das Script in eine bestehende Seite einbauen willst, erzeugst du am besten nach dieser Anleitung eine neue Seute und kopierst dann die Inhalte der alten Seite in die neue Seite.

Zuerst mal machst du eine leere Standardseite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
</head>

<body>
</body>
</html>

Natürlich kannst du auch die Variante Strict verwenden. Wie das geht wirst du ja wissen. Wenn nicht, empfehle ich dir, sie nicht zu verwenden.

Einbinden der Scriptdatei

Jetzt wird die Scriptdatei eingebunden. Dazu fügst du die Zeile <script type="text/javascript" src="slideup.js"></script> in den Head ein. Eigentlich ist es egal, wo im Head diese Zeile steht, sie darf nur nicht innerhalb von einem Script-, Style oder Kommentarbereich stehen. Aber bei anderen Zeilen ist es nicht egal. So sollten die Zeilen, die für Suchmaschinen relevant sind, möglichst am Anfang stehen. Deshalb baust du diese Zeile am besten als letzte Zeile innerhalb des Heads ein. Falls deine "slideup.js" nicht im selben Ordner wie die Htmlseite ist, musst du den Pfad hier eintragen. Dabei kannst du eine absolute oder eine relative Pfadangabe verwenden. Eine absolute Angabe hat den Vorteil, dass sie für alle Seiten gleich ist in denen du das Script verwenden willst. Die relative Angabe hat den Vorteil, dass sie auch Offline funktioniert. Wie solche Pfadangaben funktionieren kannst du im Kapitel Bilder einbinden in meinem Htmlkurs nachlesen.

Die Bereiche

Jetzt musst du in deine Seite die beiden Bereiche für den Vordergrund und das Slideup anlegen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="slideup.js"></script>
</head>

<body style="margin:0px;">
<div id="Hbereich" style="position:absolute; top:0px; left:0px;
    border:solid 10px #fa4; z-index:10; background-color:#fc6; width:100%;">
</div>

<div id="slideup" style="position:absolute; top:0px; left:0px; border:solid 10px #4af;
    z-index:1; height:250px; overflow:auto; background-color:#aaa; width:100%;">
</div>

</body>
</html>

Hier siehst du die Zeile im Head, wo die Scriptdatei referenziert wird in grüner Schrift dargestellt.

Die nächste Änderung ist im Bodytag in roter Schrift dargestellt. Hier wird die Breite des Randes im Body auf 0 festgelegt. Normalerweise lassen die Browser oft einen Rand im Body frei, damit die Schrift nicht unmittelbar am Rahmen des Fensters klebt. Diese Seite enthält aber nur 2 Bereiche, die genau so breit wie die Seite sein sollen. Ein entsprechender Rand muss auf dieser Seite statt im Body in die beiden Bereiche eingebaut werden. Wenn der Rand der Seite nicht auf 0 festgelegt wird, werden natürlich die beiden Bereiche verkleinert, was nicht beabsichtigt ist.

Im Body sind die beiden Bereiche. Den Hbereich habe ich gelb hinterlegt, das Slideup cian. So einen Bereich beginnt man mit <div> und beendet ihn mit </div>. Dabei enthält das einleitende Tag die Eigenschaften des Bereichs. id="Hbereich" bzw.id="slideup" legt Ids für die Bereiche fest. Id steht für identity oder Identität. Unter dieser Id kann das betreffende Div durch das Script angesprochen werden. In der Eigenschaft style= wird festgelegt, wie der Bereich dargestellt werden soll. position:absolute; legt fest, dass des Bereich absolut poitioniert werden soll. Das bedeutet, bei der Positionierung wird keine Rücksicht auf andere Elemente genommen und die anderen Elemente werden unabhängig von diesem positioniert. Dadurch werden die beiden Bereiche nicht nacheinander dargestellt, sondern sie verdecken sich. Bei absoluter Positionierung kann man das Element natürlich an beliebiger Stelle positionieren. Wir wollen die Bereiche beide ganz oben beginnen lassen. Wir legen deshalb ,mit top:0px; den Abstand von oben auf 0 Pixel fest. Analog dazu wird der Abstand von Links mit left:0px; auf 0 Pixel festgelegt. Beide Bereiche beginnen also ganz oben links. border:solid 10px #fa4; erzeugt einen Rahmen um den Bereich. Der Rahmen hat die Eigenschaften solid, 10px und #fa4. Hier kannst du auch andree Eigenschaften festlegen. solid erzeugt eine durchgezogene Rahmenlinie. Du kannst auch dotted für einen gepunkteten Rahmen, dashed für gestrichelt oder double für eine doppelte Rahmenlinie verwenden. Es gibt noch mehr Möglichkeiten, aber die werden nicht von allen Browsern gleich interpretiert. Danach kommt die Rahmendicke in Pixel. Das brauche ich wohl nicht zu erklären. Dann kommt die Rahmenfarbe. Dafür kannst du Farbnamen verwenden, wie sie unten auf der Seite www.- friedels-- home.- com/- index.- htm?/- Kur- se/- HTML/- 05zeichen1.- htm erklärt werden, verwenden. Du kannst auch hexadezimale Farbangaben verwenden, wie ich sie auf www.- friedels-- home.- com/- index.- htm?/- hinter- grund/- hex- code.- htm beschreibe, verwenden. Dabei kann man Farbwerte, die sich aus 3 (2-stelligen) Schapszahlen zusammensetzen, als 3-stellige Werte angeben. Dabei lässt man jeweils eine der beiden doppelten Ziffern weg. #123 ist also das selbe wie #112233. Ich empfehle dir für die Bereiche Rahmen zu verwenden oder den beiden Bereichen unbtreschiedliche Hintergrundfarben zu geben (oder beides). z-index:10; legt die Ebene fest in der der Bereich liegt. Du kannst dir vorstellen, dass die Bereiche in Schichten übereinander liegen. Höhere Schichten verdecken die Schichten darunter. Hier kannst du beliebige positive ganze Zahlen eintragen. Der Bereich, der den anderen verdecken soll, muss einen höheren z-index haben. background-color:#fc6; legt die Hintergrundfarbe fest. Da die Seite hier von den beiden Bereichen verdeckt wird, ist ein eventuell vorhandenes Hintergrundbild und die Hintergrundfarbe der Seite nicht zusehen. Zumindest der vordere Bereich muss unbedingt eine Hintergrundfarbe bekommen weil sonst der verdeckte Bereich eben nicht verdeckt ist. Sonst hast du die Schriften der beiden Bereiche hintereinander sichtbar wie in diesem Beispiel:

Und hier steht ein belibiger Text in roter Schrift, der hinter einem anderen Text liegt.

Hier steht ein beliebiger Text in grüner Schrift, der vor einem anderen Text liegt.

Im Slideup-Bereich muss unbedingt die Höhe des Bereiches festgelegt werden. Um diesen Betrag wird der Hbereich nach unten verschoben wenn das Script ausgeführt wird. Das wird z.B. mit height:250px; gemacht. Statt 250px kannst du natülich auch einen anderen Betrag in Pixel angeben. Weniger als 50 Pixel solltest du hier nicht angeben. Du musst ja damit rechnen, dass der User ein recht schmales Browserfenster verwendet. Dann müssen ja wenigestens Scrollbars und eine Textzeile Platz haben. Mit overflow: legst du fest was passieren soll, wenn der Bereich mehr Inhalt hat, als eigentlich rein passt. Hier sind visible, hidden, scroll oder auto möglich. All diese Möglichkeiten haben im Slideup Vor- und Nachteile. Bei visible wird der Bereich soweit vergrößert, dass alles rein passt. Das nützt aber natürlich nichts, weil ja der Hbereich durch das Script ja nur um den festgelegten Betrag nach unten verschoben wird. Das Slideup wird also ausgedehnt, dass alles rein passt. Ein Teil davon wird aber vom Hbereich verdeckt und ist deshalb nicht sichtbar. Mit hidden wird das Slideup nicht ausgedehnt und der Inhalt, der nicht rein passt wird einfach abgeschnitten. Bei scroll werden Scrollbars eingeblendet. Das ist wohl am praktischsten, aber leider blenden viele Browser diese Scrollbars auch ein wenn sie gar nicht gebraucht werden. Das nimmt unnötig Platz weg und sieht nicht gut aus. Ich habe auto verwendet. Da entscheidet der Browser wie er reagieren soll. Zumindest der Internet Explorer entscheidet das so wie ich es gerne hätte. Solange alles passt, passiert nichts. Ansonsten wrden Scrollbars angezeigt. Es isr aber dekbar, dass es Browser gibt, die anders entscheiden. Dann ist auch hier ein Teil des Slideupinhalts nicht sichtbar. Außerdem wird noch width:100%; gebraucht. Damit wird festgelegt, dass der jeweilige Bereich so breit ist wie die Seite. Die Reienfolge dieser Eigenschaften innerhalb der Anführungszeichen bei style= ist egal.

Der Link

Jetzt fehlt nur noch der Link, der die Ausführung des Scripts auslöst.

<a href="javascript:fslide()" id="slideuplink">Demo öffnen</a> <script type="text/javascript">
<!- -
var slidetext2="Demo schließen";
//- ->
</script>

Das ist ein ganz normaler Link, der eine JavaScript-Funktion aufruft. Außerdem hat der Link eine Id, damit er durch das Script verändert werden kann. Der Text, der für den Link angezeigt wird, ist hier grün dargestellt. Du kannst den Text natürlich an deine Bedürfnisse anpassen. Allerdings darfst du dabei keine neuen Nodes erzeugen. Leider ist es nicht einfach, jemandem der keine Vorkenntnisse in DOM hat, zu erkläre was Nodes sind. Deshalb solltest du hier einfach nur Text ohne Tags einsetzen. Also nicht einen Text, der teilweise im Fettdruck oder kursiv ist oder sonst was.

Darunter ist ein Scriptbereich, der festlegt welcher Text für den Link zum Schließen des Slideup verwendet wird. Dieser Text ist hier rot dargestellt. Du kannst ihn nach den selben Regeln anpassen wie den grünen Text.

Anpassung

In der Seite

In der Seite gibt es natürlich einige Möglichkeiten etwas an zu passen, aber das wurde alles schon erwähnt.

In besonderen Fällen kann es natürlich Konflike mit den Ids geben. Ich verwende für das Script die Ids

Hbereich Das ist der Bereich, der normalerweise das Slideup verdeckt.
slideup Das ist das Slideup.
slideuplink Das ist der Link, der das Script startet.

Ids dürfen auf der Seite nicht mehrfach verwendet werden. Du darfst also sonst keine Elemente einbauen, die diese Ids verwenden. Wenn es sonst noch Elemente mit diesen Ids gibt, musst du diese andren Ids eben verändern. Falls das nicht möglich ist, musst du diese Ids ändern. Dann musst du sie aber auch in der Sriptdatei verändern. In den Ids darfst du nur Buchstaben des Alphabeths (also nicht Ä, ä, Ö, ö, Ü, ü oder ß) und Ziffern verwenden. Außerdem sind Bindestriche -, Unterstriche _, Doppelpunkte : und Punkte . erlaubt. Eine Id muss mit einem Buchstaben beginnen. Leerzeichen dürfen nicht verwendet werden.

Im Script

Ich habe das Script absichtlich so geschrieben, dass Anpassungen eigentlich fast nicht nötig sind. Zumindest im Normalfall. Aber natürlich kann es trotzdem sein, dass estwas verändert werden soll oder muss. In diesem Fall musst du die Datei slideup.js mit einem Texteditor öffnen, verändern und wieder abspeichern.

Ids

Wie schon erwähnt ist es denkbar, dass du in der Seite die Ids verändern musstest. Dann musst du die geänderten Ids natürlich auch in der Scriptdatei ändern. Hier siehst du den Quellcode der Scriptdatei. Die Ids sind in grüner Schrift hervorgehoben.

var varslide, slidei=0, slideoffen=0, slidevorher, slidetext;

function fslide() {
  slidevorher=document.getElementById("slideuplink").style.color;
  if(slideoffen==0) slidetext=document.getElementById("slideuplink").lastChild.data;
  document.getElementById("slideuplink").firstChild.data="Bitte warten";
  document.getElementById("slideuplink").href="#";
  document.getElementById("slideuplink").style.color="#888";
  if(slideoffen==0) {
    slideoffen=1;
    varslide = window.setInterval("fnslide(1)", 20);
  } else {
    slideoffen=0;
    varslide = window.setInterval("fnslide(-1)", 20);
  };
};

function fnslide(sliderichtung) {
  slidei=slidei+sliderichtung;
  document.getElementById("Hbereich").style.top = slidei+"px";
  if ((- slidei->= parseInt(- document.- getElementById("- slideup").- style.- height)- &&- sliderichtung- >0)||- ((slidei<=- 0)&&- sliderichtung- <0)) {
    window.clearInterval(varslide);
    document.getElementById("slideuplink").href="javascript:fslide()";
    document.getElementById("slideuplink").style.color=slidevorher;
    if(slideoffen!=0) {
      document.getElementById("slideuplink").lastChild.data=slidetext2;
    } else {
      document.getElementById("slideuplink").lastChild.data=slidetext;
    };
  };
};

Linktext

Natürlich kannst du auch den Text anpassen, der erscheint während sich der Hbereich bewegt. Er ist in violetter Schrift geschrieben. Du kannst auch die Farbe dieses Textes ändern. Die Farbangabe ist im Quellcode in Orange markiert.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url:

Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.