Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 21
Zur Übersicht

21. Vorhang auf! (06.02.2000)

Wie wäre es mit einem sich beim Laden einer neuen HTML-Seite öffnenden "Vorhang"? Die Realisierung eines derartigen Effekts ist relativ einfach. Die Grundidee besteht darin, über die zu ladende Seite zunächst zwei (farbige) DIVs zu legen, die den sichtbaren Fensterbereich vollständig abdecken, d. h. ihre Breite entspricht der halben Fensterbreite und ihre Höhe der Fensterhöhe. Beim Laden der darunter liegenden Seite wird dann eine JavaScript-Funktion gestartet, die die Breite der beiden DIVs um einen bestimmten Betrag – im Beispiel 5 Pixel – reduziert, bis von den DIVs praktisch nichts mehr übrig ist und die eigentliche Seite in voller Pracht vorliegt.

Das folgende Beispiel 21 wurde für den Internet Explorer sowie Netscape 6 / Mozilla realisiert, da diese der Größenveränderung von DIVs wesentlich freundlicher gesinnt ist als die Netscape 4.x-Browser. Letztere lassen keine auf eine bestimmte Höhe bzw. Breite festgelegten DIVs ohne Inhalt zu. Das ließe sich zwar mit transparenten Grafiken bzw. Layer-Background-Tricks kompensieren, wobei man allerdings schnell auf ein neues Problem stößt: Netscape 4.x verweigert die dynamische Veränderung der Breite bzw. Höhe eines Bildes und auch der sog. Resize-Bug dürfte den Spaß erheblich trüben.

In einem Initialisierungsschritt wird also zuerst die Fensterhöhe / -breite abgefragt: 
      // Abfrage der inneren Fenstergrößen

      // IE
      fbreite=document.body.clientWidth;
      fhoehe=document.body.clientHeight;

      // NN 6 / Mozilla
      fbreite=self.innerWidth;	
      fhoehe=self.innerHeight;

      // Variablendefinitionen
      // xlw: Breite des linken DIVs, xrw: Breite des rechten DIVs,
      // xr: x-Koordinate des rechten DIVs, step: Schrittweite in Pixel
      // Objektvariablen l und r

      step=5;
      xlw=fbreite/2;
      xrw=fbreite/2;
      xr=fbreite/2;

      // Setzen der DIV-Höhen / -Breiten

      // IE
      l=document.all["vorhangl"].style;
      r=document.all["vorhangr"].style;
      l.height=fhoehe;
      r.height=fhoehe;
      l.width=fbreite/2;
      r.width=fbreite/2;

      // NN 6 / Mozilla
      l=document.getElementById("vorhangl").style
      r=document.getElementById("vorhangr").style
      l.height=fhoehe;
      r.height=fhoehe;
      l.width=fbreite/2;
      r.width=fbreite/2;
Für den eigentlichen "Vorhangeffekt" ist die Funktion VorhangAuf() zuständig. Diese steuert die Verkleinerung der DIV-Breiten und sorgt dafür, dass die x-Koordinate der rechten Vorhanghälfte entsprechend der Verkleinerungs-Schrittweite (Variable step) nach rechts verschoben wird: 
      function VorhangAuf()
      {
        xlw=xlw-step;
        xrw=xrw-step;
        xr=xr+step;
      
        if (document.all)
        {
          l.width=xlw;
          r.width=xrw;
          r.left=xr;
      
          if ((xlw>step) || (xrw>step))
          {
            setTimeout("VorhangAuf()",100);
          }
      
          if (xlw<=step)
          {
            l.height=0;
            l.left=0;
            l.visibility="hidden";
          }
      
          if (xrw<=step)
          {
            r.height=0;
            r.left=0;
            r.visibility="hidden";
          }
        }
      
        if (document.getElementById && !document.all)
        {
          l.width=xlw;
          r.width=xrw;
          r.left=xr;
      
          if ((xlw>step) || (xrw>step))
          {
            setTimeout("VorhangAuf()",100);
          }
      
          if (xlw<=step)
          {
            l.height=0;
            l.left=0;
            l.visibility="hidden";
          }
      
          if (xrw<=step)
          {
            r.height=0;
            r.left=0;
            r.visibility="hidden";
          }
        }
      }
Damit nach dem Erreichen der maximalen Verkleinerung der DIVs keine sichtbaren Reste zurückbleiben, werden diese einfach auf unsichtbar gesetzt und somit ist nur noch die neue Seite zu sehen. Das dargestellte Prinzip bietet noch viel Spielraum für eigene Erweiterungen, z.B. die Einbindung von Grafiken in die DIV-Container.