IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Javascript: interaktive PopUps



Javascript: interaktive PopUps

Interaktive Webseiten mit viele Funktionen sind schön und gut, erfordern aber eine neue Anfrage am Server und der Besucher muss wieder warten. Dieser möchte zeigen wie man dies auch mit kleine PopUps hinbekommt (funktioniert auch bei aktivem PopUp-Blocker).


Autor: Patrick Faes (dreamer)
Datum: 18-07-2004, 19:11:17
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 8107x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Einige Webmaster bauen für jedes einzelne Element ihrer Seite (Kontaktformular, Suchfunktion usw.) eine ganz eigene Seite, welche dann wieder jedesmal einzeln geladen werden müssen. Für die Internet-Benutzer mit Breitbandverbindungen ist das ja meist kein Problem, für die anderen jedoch ziemlich umständlich. Diesen Leuten kann man mittels JavaScript helfen.

Es handelt sich hierbei um "interaktive Boxen" die mittels JavaScript über die Seite schweben. Dieses Script wurde erfolgreich getestet mit Wenn Sie einen dieser Browser haben, dann klicken Sie mal auf diese Links:

Google Box | Navigation | Kontakt

Für Besucher mit anderen Browsern oder ohne JavaScript gibt es natürlich noch alternative Links. Sie können das Script nachher noch ändern, sodass es auch in anderen Browsern funktioniert. Dafür fragen Sie erst beim Hersteller nach wie sich dieser identifiziert (der Name) und welches HTML, CSS und JavaScript er versteht. Dazu werde ich zur rechten Zeit nochmal auch zurück kommen. Ich möchte aber schon mal darauf hinweisen, dass im Browser Opera der Nutzer auswählen kann wie er sich identifiziert, was zu Kompatibilitätsproblemen führen kann.

Die Theorie

Die verschiedene Boxen werden in einer Variable vom Typ Array aufgenommen. Diese werden dann alle zum Schirm geschrieben. Anfangs sind sie alle unsichtbar. Beim betätigen eines Links wird eines sichtbar gemacht. Dabei werden alle andere nochmal unsichtbar gemacht, sodass mit Sicherheit nur eine Box sichtbar ist. Die Boxen können durch den Besucher auch einzeln weggeklickt werden.
Das Script braucht:
  • eine Variabele, die die HTML-Codes für die Boxen enthält
  • eine Schleife die diese zum Schirm schreibt
  • eine Funktion die eine Box sichtbar macht beim Betätigen eines Links. Diese Funktion besteht aus:
    • einer Schleife die alle Boxen erneut unsichtbar macht
    • einem Teil, dass die gefragte Box sichtbar macht
    • einer Funktion, der ein alternativer Link folgt, wenn der Besucher einen anderen Browser hat
  • eine Funktion, die eine einzelne Box wieder unsichtbar macht
Das Script

Das Script steht unten. Hier wird schrittweise erklärt wie das Script funktioniert. Es wird jedesmal referenziert wo die Codeteile stehen (die Codeteile haben die selbe Nummerierung wie die Erklärungen).
Als erstes muss ich nochmal erklären wie die Links funktionieren. Es werden immer zwei Variablen mitgegeben: eine für die ID der Box die angezeigt werden soll (immer nur ein Buchstabe, später mehr dazu) und eine die den alternativen Link andeutet (eine Zahl, später mehr dazu). Der Link hat auch selbst ein Link, für den Fall, dass der Besucher überhaupt kein JavaScript hat. Um zu verhindern, dass dieser Link gefolgt wird wenn der Besucher doch JavaScript hat, wird der deklarierung return false mitgegeben (mehr zu return false). Ein Link sieht dann so aus:

<a href="link" onClick="boxen('a',0);return false;">
In den Boxen sind auch Links enthalten um eine Box wieder verschwinden zu lassen. Hierbei muss nur ein Variable mitgegeben werden, nämlich die ID der Box die unsichtbar gemacht werden soll.

<a onClick="unsichtbar('a');">
Beachten Sie bitte die Schreibweise: Buchstaben kommen zwischen einfachen Anführungszeichen, Zahlen ohne.

Die HTML-Codes für die Boxen kommen alle in eine Variable vom Typ Array. Mehr dazu sehen Sie unter Punkt 2 vom Script.
Hier möchte ich nur kurz erklären wie die HTML-Codes für die Boxen aus zu sehen haben. Ich benutze hierfür Tabellen (mehr zu Tabellen). Diese sollten anfangs unsichtbar sein und bekommen deshalb die Deklaration visibility:hidden;. Des Weiteren sollten sie über den eigentlichen Seiten-Inhalt schweben, was man mit z-index:2; bewirkt. Hierbei muss allerdings verhindert werden, dass sich der Seiten-Inhalt verschiebt, deshalb müssen die Boxen absolut positioniert werden mit position:absolute;.

Diese drei sind die minimale Voraussetzungen für die Tabellen, ansonsten kann man sie formatieren wie man es selber möchte. Aber noch mal kurz die minimale Formatierung zeigen:

<table style="visibility:hidden;z-index:2;position:absolute;">
(mehr zu visibility, z-index und position).

Sie sollten auch unbedingt beachten, dass Sie die einfachen Anführungszeichen die in einer Tabellendefinition vorkommen, maskiert werden müssen mit einem Rückstrich/Backslash ( \ ). Dies verhindert, dass der Browser denkt, die Variable endet dort.

Die Tags, die darin vorkommen, sollten auch maskiert werden. Ein < am Anfang einer Tags ersetzt man durch -->. Das ist ein Referenzcode, wodurch der Browser die Tabellendefinition nicht als Tabelle anzeigt (mehr zu Referenzcodes).

Um dieses Script nutzen zu können, müssen Sie nur Ihre Boxen definieren und diese in den Array einführen und Ihre Links gestalten. Hierfür müssen Sie beachten, dass die ID der Boxen immer nur ein einziger Buchstabe ist. Der Wert der ersten Variablen für die Funktionen boxen() und unsichtbar() ist die ID. Die zweite Variable für die Funktion boxen() ist eine Zahl. Diese ist die Nummer des Array-Elementes worin die Box enhalten ist. Dazu sehen Sie später mehr, jetzt müssen Sie nur wissen, dass die zwei Variablen-Werte immer Paare sind in der Art von ('a',0), ('b',1), ('c',2), usw.
  1. Zuerst kommt der Öffnungstag des Scripts (<script>). Hierin wird deklariert, dass es sich um JavaScript handelt. Früher wurde dies gemacht mit language="javascript", jetzt sollte man jedoch type="text/javascript" benutzen.
  2. Als nächstes müssen wir die Boxen deklarieren. Dafür schreiben wir die Codes in assoziative Arrays (mehr über assoziative Arrays). Wir brauchen hier zwei Inhalte für jede Box: den HTML-Code und einen alternativen Link für den Fall, dass der Besucher ein anderen Browser als Internet Explorer, Netscape oder Mozilla hat. Beachten Sie, dass im Code keine Zeilenumbrüche vorkommen, da dies Probleme macht mit JavaScript.
  3. Mit einer While-Schleife schreiben wir alle Boxen zur Seite mit der Funktion document.write(). (mehr zuWhile-Schleifen und document.write).
  4. Jetzt fangen wir die Funktion boxen() an. Sie benutzt zwei Variablen, die die Namen idd und nr haben. Woher die Variablen kommen, haben Sie schon weiter oben gelesen (mehr über Funktion-Deklarierung).
  5. Es wird abgefragt ob der Besucher den Internet Explorer benutzt. Dies geschieht mit navigator.appName. Wenn dies nicht der Fall ist, wird abgefragt ob der Besucher den Netscape Navigator oder den Mozilla verwendet. Wenn auch dies nicht der Fall ist, wird ein alternativer Link gefolgt, aber dazu später mehr.
  6. Dieser Teil wird nur ausgeführt wenn der Besucher den Internet Explorer benutzt. In älteren Versionen machte Microsoft Gebrauch von einem eigenen Dynamischen Objekt Model (DOM) und Objekte wurden angesprochen mit document.all. Jetzige Versionen von Internet Explorer benutzen das standardisierte document.getElementById.
    In einer IF-Abfrage testen wir einfach ob der Browser das ältere Model erkennt. Wenn dies der Fall ist, werden Punkt 7 und 8 ausgeführt, ansonsten geht es weiter bei Punkt 9.
  7. In Punkt 8 soll eine Box sichtbar gemacht werden. Um zu verhindern, dass zwei Boxen zu gleicher Zeit sichtbar sind, werden erst alle Boxen unsichtbar gemacht. Dies machen wir wie in Punkt 3, aber jetzt mit der Variable zaehler2.
    Wir brauchen allerdings die ID einer Box. Diese lesen wir aus mit der Funktion substr (mehr zur Funktion substr()). Deshalb darf die ID auch nur einen einzigen Buchstaben haben (wenn Sie mehr Boxen auf einer Seite haben wollen als das Alfabet Buchstaben hat, müssen Sie jede ID zwei Buchstaben geben und die Funktion dem entsprechend anpassen.
    Danach wird die Eigenschaft visibility auf hidden gestellt und die Variable wird um einen Zähler erhöht.
  8. Als nächstes wird die Box, die der User haben möchte, sichtbar gemacht. Hierbei positionieren wir die Box auch neu mit style.left und style.scrollTop. LEFT ist der Abstand in Pixeln vom linken Fensterrand. SCROLLTOP gehört zum Modell von Microsoft und bestimmt den Abstand vom oberen Fensterrand. Der Unterschied mit TOP ist, dass der Abstand zum Fensterrand gemessen wird und deshalb mitscrollt.
  9. Zweiter Teil der IF-Abfrage. Wenn der Internet Explorer des Besuchers das ältere Modell nicht erkennt, das neuere (getElementById) aber schon (sollte normalerweise der Fall sein), dann werden Punkt 10 und 11 ausgeführt.
  10. Das gleiche wie in Punkt 7, aber jetzt mit document.getElementById anstatt document.all.
  11. Das gleiche wie in Punkt 8, aber jetzt mit document.getElementById anstatt document.all.
  12. Wenn der Internet Explorer des Besuchers keine dieser beiden Modelle erkennt, wird ein alternativer Link gefolgt. Dies sollte nie der Fall sein, da alle Versionen von Internet Explorer ab der Version 3 wenigstens einen dieser beiden erkennt. Jedoch könnte sich dies vielleicht in der Zukunft ändern, und dann sind wir schon mal vorbereitet.
  13. Hier schließt sich der ganze Internet Explorer Teil ab.
  14. Hier wird abgefragt ob der Browser des Besuchers sich als "Netscape" identifiziert (das machen Netscape Navigator und Mozilla), genau wie in Punkt 5.
  15. Genau wie in Punkt 6, jedoch nennt sich das ältere Modell von Netscape document.layers.
  16. Genau wie in Punkt 7, aber mit dem älteren Netscape-Modell.
  17. Genau wie in Punkt 8, aber mit dem älteren Netscape Modell. Hier wird aber document.scrollTop ersetzt durch window.pageYOffset.
  18. Genau wie Punkt 9.
  19. Genau wie Punkt 10.
  20. Genau wie Punkt 11. Hier wird aber document.scrollTop ersetzt durch window.pageYOffset.
  21. Genau wie Punkt 13.
  22. Der letzte Teil der IF-Abfrage. Dieser wird nur ausgeführt wenn der Besucher keinen Internet Explorer, Netscape Navigator oder Mozilla benutzt. Hier wird nichts weiteres gemacht als das Öffnen von einem alternativen Link.
  23. Im Fall, dass der Browser des Besuchers ein anderer ist als Internet Explorer, Netscape Navigator und Mozilla, wird ein alternativer Link geöffnet.
  24. Hier schließen wir die Funktion boxen() die wir in Punkt 4 geöffnet hatten.
  25. Hier haben wir noch die Funktion unsichtbar(). Diese dient dazu eine einzelne Box manuell unsichtbar zu machen. Hierfür wird per Link die ID der Box mitgegeben. Danach wird, abhängig davon ob der Browser document.all, document.layers oder document.getElementById versteht, die Box unsichtbar gemacht.
  26. Zu guter letzt kommt noch der End-Tag jedes Scriptes.
Anmerkung:

Sie sehen an den Farben welche Teile zusammen gehören bzw. welche Klammern einselben Code-Teil umklammern. Schwarze Nummern zeigen ein eigenständiges Teil an.
  1. <script type="text/javascript">
  2. var box = new Array();

    box[0] = new Array();
    box[0]["code"] = '<table id="a" style="z-index:2;visibility:hidden;background-color:yellow;
    position:absolute;height:40px;width:30px;border:2px solid blue;">
    <tr><td><img src="http://toolbar.google.com/intl/de/toolbar2_logo.gif">
    </td></tr><tr><td><input type="text" size="15"></td></tr>
    <tr><td><input type="button" value="Suchen">
    <input type="button" value="Schließen" onClick="unsichtbar(\'a\');"></td>/tr></table>';
    box[0]["alternativ"] = 'http://www.google.de';

    box[1] = new Array();
    box[1]["code"] = '<table id="b" style="z-index:2;visibility:hidden;position:absolute;
    height:80px;width:74px;border:3px solid green;background-color:black;color:white;">
    <tr><td style="border-bottom:1px solid orange;">Navigation</td></tr>
    <tr><td>Kontakt</td></tr><tr><td>Bestellen</td></tr><
    tr><td><a onClick="unsichtbar(\'b\');">Schließen</a></td></tr></table>';
    box[1]["alternativ"] = 'http://www.lycos.de';

    box[2] = new Array();
    box[2]["code"] = '<table id="c" style="z-index:2;visibility:hidden;position:absolute;
    border:3px solid green;background-color:red;"><tr>
    <td style="text-align:center;">Kontakt <a onClick="unsichtbar(\'c\');
    " style="color:blue;">X</a>
    </td></tr><tr><td style="padding:3px;text-align:center;">
    <form><textarea cols="26" rows="8" style="color:yellow;background-color:blue;">
    </textarea></td></tr><tr><td style="text-align:center;">
    <input type="submit" onClick="unsichtbar(\'c\');"> <input type="reset"></form>
    </td></tr></table>'
    box[2]["alternativ"] = 'http://www.it-academy.cc';
  3. var zaehler = 0;
    while ( zaehler < box.length )
    {
    document.write(box[zaehler]["code"]);
    zaehler++;
    }
  4. function boxen(idd,nr)
    {
  5. if (navigator.appName == "Microsoft Internet Explorer")
    {
  6. if (document.all)
    {
  7. zaehler2 = 0;
    while (zaehler2 < box.length)
    {
    var weg = box[zaehler2]["code"].substr(11,1);
    document.all(weg).style.visibility = "hidden";
    zaehler2++;
    }
  8. document.all(idd).style.left = 50;
    document.all(idd).style.top = document.body.scrollTop + 20;
    document.all(idd).style.visibility = "visible";
    }
  9. else if (document.getElementById)
    {
  10. zaehler2 = 0;
    while (zaehler2 < box.length)
    {
    var weg = box[zaehler2]["code"].substr(11,1);
    document.getElementById(weg).style.visibility = "hidden";
    zaehler2++;
    }
  11. document.getElementById(idd).style.left = 50;
    document.getElementById(idd).style.top = document.body.scrollTop + 20;
    document.getElementById(idd).style.visibility = "visible";
    }
  12. else
    {
    window.open(box[nr]['alternativ'],'_self');
    }
  13. }
  14. else if (navigator.appName == "Netscape")
    {
  15. if (document.layers)
    {
  16. zaehler2 = 0;
    while (zaehler2 < box.length)
    {
    var weg = box[zaehler2]["code"].substr(11,1);
    document.layers(weg).style.visibility = "hidden";
    zaehler2++;
    }
  17. document.layers(idd).style.left = 50;
    document.layers(idd).style.top = window.pageYOffset + 20;
    document.layers(idd).style.visibility = "visible";
    }
  18. else if (document.getElementById)
    {
  19. zaehler2 = 0;
    while (zaehler2 < box.length)
    {
    var weg = box[zaehler2]["code"].substr(11,1);
    document.getElementById(weg).style.visibility = "hidden";
    zaehler2++;
    }
  20. document.getElementById(idd).style.left = 50;
    document.getElementById(idd).style.top = window.pageYOffset + 20;
    document.getElementById(idd).style.visibility = "visible";
    }
  21. else
    {
    window.open(box[nr]['alternativ'],'_self');
    }
  22. }
  23. else
    {
    window.open(box[nr]['alternativ'],'_self');
    }
  24. }
  25. function unsichtbar(idd2)
    {
    if (document.all) {document.all(idd2).style.visibility = "hidden";}
    else if (document.layers)
    {document.layers(idd2).style.visibility = "hidden";}
    else if (document.getElementById) {document.getElementById(idd2).style.visibility = "hidden";}
    }
  26. </script>


dreamer
Expert
Beitrag vom:
19-08-2004, 08:08:03

Natürlich können in die Boxen auch Iframes aufgenommen werden. Dies ist z.B. sehr nützlich um Emails zu verschicken.

-----------------------------------------------------


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04510
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06247
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1158
Comments: 0