Martin Jung: /HTML Verschachtelte Layer/DIVs

SELF-Forum

/HTML Verschachtelte Layer/DIVs

Martin Jung
– Informationen zu den Bewertungsregeln

Hi Folks,

im Archiv war ich schon ("layer", "DHTML") - vielleicht habe ich ja auch nur wieder die falschen Suchstrings benutzt:

Mein Code (sinngemäß - braucht nur mit MSIEP 5 zu funzen):

<div id ="Alles" style....>

<div id="1" style.....>..</div>
<div id="2" style.....>..</div>
<div id="3" style.....>..</div>
<div id="4" style.....>..</div>
<div id="5" style.....>..</div>
<div id="6" style.....>..</div>

</div>

Die "Layer" (id) 1 - 6 werden nacheinander eingeblendet. Zum Schluß will ich sie alle auf einmal ausblenden. Um mir 6 JS-Zeilen a la Hide('1') zu ersparen, habe ich einfach alle 6 "inneren" <div>'s in ein "äusseres" verschachtelt. Die 6 layer werden alle noch schön eingeblendet, leider kann ich sie aber mittels

document.all.Alles.style.visibility = "hidden"

nicht auf einmal verschwinden lassen.

Geht so eine Verschachtelung prinzipiell nicht?

Grüsse und Danke

Martin

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. /HTML Verschachtelte Layer/DIVs

    Jens menke
    – Informationen zu den Bewertungsregeln

    Die "Layer" (id) 1 - 6 werden nacheinander eingeblendet. Zum Schluß will ich sie alle auf einmal ausblenden. Um mir 6 JS-Zeilen a la Hide('1') zu ersparen, habe ich einfach alle 6 "inneren" <div>'s in ein "äusseres" verschachtelt. Die 6 layer werden alle noch schön eingeblendet, leider kann ich sie aber mittels

    Hi

    machs doch einfach mit ner kurzen schleife ,
    also for (n=1;n<=6;n++) Hide(n);

    gruss
    Jens

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. /HTML Verschachtelte Layer/DIVs

      Martin Jung
      – Informationen zu den Bewertungsregeln

      Hi Jens,
      das war flott!!

      machs doch einfach mit ner kurzen schleife ,
      also for (n=1;n<=6;n++) Hide(n);

      Dann hätte ich 4 Zeilen gespart;-))

      Im Ernst, das ist ja nicht das Problem. Ich dachte nur, daß man die Layer einfach ineineanderstecken könnte...

      Danke + Gruss

      Martin

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. /HTML Verschachtelte Layer/DIVs

        Jens menke
        – Informationen zu den Bewertungsregeln

        Hi

        so.. hab eben noch mal das Hirn eingeschaltet und dran
        gedacht das ich sowas eigentlich ja selbst benutze
        und es funktioniert eigentlich problemlos, also die
        eingebetteten Layer werden auch immer mit ausgeblendet.
        Und dein Bespiel funktioniert bei mir auch..also bei

        <div id ="Alles" style....>
        <div id="1" >..</div>
        <div id="2" >..</div>
        <div id="3" >..</div>
        <div id="4" >..</div>
        <div id="5" >..</div>
        <div id="6" >..</div>
        </div>

        <script>
        document.all.Alles.style.visibility = "hidden";
        </script>

        sehe ich zumindest nix

        gruss
        Jens

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. /HTML Verschachtelte Layer/DIVs

          Martin Jung
          – Informationen zu den Bewertungsregeln

          Hi Jens,

          jetzt kommt etwas, was ich noch nie gemacht habe - nämlich einen ellenlangen Code zu posten.
          Wundere Dich übrigens nicht über den teilweise anrüchigen Inhalt. Das wird eine kleiner Gag zum Geburtstag eines Kumpels.
          Also bei mir funzt es nicht:

          <html><head><title>HTMLmaker</title>
          <style type="text/css">
          <!--
          -----cut----
          //-->
          </style>

          <script language="Javascript1.2">
          u = "msg";
          v = "bar";
          w = "pro";

          function Show(Divname)
          {
          document.all[Divname].style.visibility = "visible";
          }

          function Hide(Divname)
          {
          document.all[Divname].style.visibility = "hidden";
          }

          function ShowAll(Divname)
          {
          for (n = 1; n < 9; n++)
          {
          Show(u+n);
          }
          for (n = 1; n < 8; n = n+2)
          {
          Show(v+n);
          Show(w+n);
          }
          }

          function HideAll(Divname)
          {
          for (n = 1; n < 9; n++)
          {
          Hide(u+n);
          }
          for (n = 1; n < 8; n = n+2)
          {
          Hide(v+n);
          Hide(w+n);
          }
          }

          function SetSize()
          {
          size = 0;
          }

          var porn= new Array();
          porn[0]="censored";
          porn[1]="censored";
          porn[2]="censored";
          porn[3]="censored";
          porn[4]="censored";
          porn[5]="censored";
          porn[6]="censored";
          porn[7]="censored";
          porn[8]="censored";
          porn[9]="censored";
          porn[10]="Schäme Er sich!!";
          count = 0;

          function Porn(Divname)  // hier werden ein paar "verfängliche" Dateinamen eingeblendet ;-)
          {
          a = Divname;
          if (count <= 10)
          {
          document.all[Divname].innerHTML=porn[count];
          count++;
          setTimeout ("Porn(a)", 250);
          }
          }

          function Resize(Divname) // hier werden wachsende Progressbars simuliert und dann die
          {                         // Ergebnisdialoge eingeblendet
          a = Divname;
          max = a.length;
          i = a.slice (max-1,max);
          if (i == 1 i == 3 i == 7) x = 5;
          else x = 0.5;
          if (size <= 100 && i != 6)
          {
          size = size + x;
          document.all[Divname].style.width = +size+"px";
          setTimeout ("Resize(a)", 0);
          }  
          b = w;
          b += i;
          i++;
          c = u;
          c += i;
          if (size == 100)
          {
          setTimeout ("Show(b)", 200);
          setTimeout ("Show(c)", 500);
          if (i == 6) setTimeout ("Porn('msg6')", 600);
          }
          }

          function Start()  // hier werden alle DIVs nacheinander eingeblendet
          {
          SetSize();
          setTimeout ("Show('msg1')", 500);
          setTimeout ("Resize('bar1')", 700);
          setTimeout ("SetSize();", 3000);
          setTimeout ("Show('msg3')", 3000);
          setTimeout ("Resize('bar3')", 3200);
          setTimeout ("SetSize();", 5500);
          setTimeout ("Show('msg5')", 5500);
          setTimeout ("Resize('bar5')", 5700);
          setTimeout ("SetSize();", 19800);
          setTimeout ("Show('msg7')", 21500);
          setTimeout ("Resize('bar7')", 21700);
          setTimeout ("Blink()", 24000);
          }

          function Blink()
          {
          zeit = 0;                           ####
          setTimeout ("Hide('Alles')", zeit); #HIER IST IRGENDWO DER
          zeit +=300;                         #HUND BEGRABEN!
          setTimeout ("Show('Alles')", zeit); ####
          etc.

          /*zeit = 0; ########so funktioniert's, es muss aber doch einfacher gehen!###########
          setTimeout ("HideAll()", zeit);
          zeit +=300;
          setTimeout ("ShowAll()", zeit);
          zeit +=300;
          setTimeout ("HideAll()", zeit);
          zeit +=300;
          setTimeout ("ShowAll()", zeit);
          zeit +=300;
          setTimeout ("HideAll()", zeit);
          zeit +=300;
          setTimeout ("ShowAll()", zeit);
          zeit +=300;
          setTimeout ("HideAll()", zeit);
          zeit +=300;
          setTimeout ("ShowAll()", zeit);
          zeit +=300;
          setTimeout ("HideAll()", zeit);
          zeit +=300;
          setTimeout ("ShowAll()", zeit);*/
          }
          </script></head>

          <body bgcolor="#C2B0F7" onLoad="Start()">
          <div id="msg" class="tit" style="position:absolute; left:100px; top:10px; width:500px; height:40px; z-index:1"><center><font size="+2">Gleich geht's los!<br><br>mit Martin's kleinem HTML-Maker<br><br>für Thorsten :-))<br><br>Benutze bitte  <font color="#FF0000">MS Internet Explorer 5.0 !!</font></font></center></div>

          <div id="Alles" style="position: absolute; visibility:visible; z-index:0">###### DAS SOLL DER "KLAMMER"-DIV sein!!##########

          <div id="msg1" style="position:absolute; left:110px; top:300px; width:170px; height:40px; padding:2pt; border:3.5px solid #AB54AB;background-color:lightyellow;layer-background-color:lightyellow; visibility:hidden; z-index:1">Prozessor initialisieren:</div>
          <div id="bar1" style="position:absolute; left:120px; top:326px; width:0px; height:0.1cm; background-color:#0000FF; clip:rect(0px auto 5px auto); visibility:visible; z-index:2"></div>
          <div id="pro1" class="pro" style="position:absolute; left:230px; top:322px; width:0px; height:0.1cm; visibility:hidden; z-index:2">100%</div>
          <div id="msg2" class="out" style="position:absolute; left:410px; top:300px; width:190px; height:40px; padding:2pt; border:3.5px solid #AB54AB;background-color:lightyellow;layer-background-color:lightyellow; visibility:hidden; z-index:1">P90 Prozessor - OK!</div>

          <div id="msg3" style="-- cut -->PCI-Bus durchspülen:</div>
          <div id="bar3" style="-- cut --></div>
          <div id="pro3" class="pro" style="-- cut -->100%</div>
          <div id="msg4" class="out" style="-- cut -->Zwei Kaulquappen entfernt!</div>

          <div id="msg5" style="-- cut -->Festplatte auf pornographische Inhalte untersuchen:<br></div>
          <div id="bar5" style="-- cut --></div>
          <div id="pro5" class="pro" style="-- cut -->100%</div>
          <div id="msg6" class="out" style="-- cut --></div>

          <div id="msg7" style="position:absolute; left:110px; top:460px; width:160px; height:40px; padding:2pt; border:3.5px solid #AB54AB;background-color:lightyellow;layer-background-color:lightyellow; visibility:hidden; z-index:1">Festplatte löschen...</div>
          <div id="bar7" style="position:absolute; left:120px; top:485px; width:0px; height:0.1cm; background-color:#0000FF; clip:rect(0px auto 5px auto); visibility:visible; z-index:2"></div>
          <div id="pro7" class="pro" style="position:absolute; left:230px; top:481px; width:0px; height:0.1cm; visibility:hidden; z-index:2">100%</div>
          <div id="msg8" class="out" style="position:absolute; left:410px; top:460px; width:100px; height:40px; padding:2pt; border:3.5px solid #AB54AB;background-color:lightyellow;layer-background-color:lightyellow; visibility:hidden; z-index:1">Fertig!!</div>

          </div>######ENDE DES KLAMMERDIVs
          </body></html>

          Vielleicht siehst Du ja den/die Fehler.

          Gruss und Gute Nacht
          Martin

          PS: Verzeiht die lange Message, aber beschreiben kann ich das nicht mehr
          PS2: Ich werde den Code dann durch die Style-Sheets noch ausdünnen!! Ist nur ein Entwurf

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. /HTML Verschachtelte Layer/DIVs

            Jens menke
            – Informationen zu den Bewertungsregeln

            Hmpf.. wenn hätteste ihn wenigstens dann lauffähig
            posten können ohne die obskuren Kommentare und so.

            Naja.. die korrigierte Fassung kommt ums Forum zu
            schonen denn mal wie EMail.

            gruss
            Jens

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. /HTML Verschachtelte Layer/DIVs

              Martin Jung
              – Informationen zu den Bewertungsregeln

              Hi Jens,
              bin gerade Heim gekommen. DANKE für die MAIL :-)))
              Habe nur gerade keine Zeit zum ausprobieren :-(

              Hmpf.. wenn hätteste ihn wenigstens dann lauffähig
              posten können ohne die obskuren Kommentare und so.

              "Obskur"? Hm, ich dachte, die würden die Erfassung etwas leichter machen...
              Ich wollte halt nicht so viel Müll posten..

              Vielen Dank noch einmal für Deine Mühen!
              Sobald ich es gecheckt habe, antworte ich Dir per mail!

              Einen schönen Samstag,

              Gruesse, Martin

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. /HTML Verschachtelte Layer/DIVs

                Thomas J.S.
                – Informationen zu den Bewertungsregeln

                Hallo Martin!

                »»
                DANKE für die MAIL :-)))
                Sobald ich es gecheckt habe, antworte ich Dir per mail!

                Vielleicht sind wir aber auch neugierig ob alles geht und wann ja mit welchem Trick?

                Grüße
                Thomas

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

        2. /HTML Verschachtelte Layer/DIVs

          David
          – Informationen zu den Bewertungsregeln

          ... und es funktioniert eigentlich problemlos ...

          huch? tatsächlich. ich kann mich noch genau daran erinnern, daß ich das problem letztens bei einem tree-menu hatte... und da klappte es nicht mit dem ausblenden?! ob es daran lag, daß ich damals noch den ie 4 hatte?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln