Florian Kirschner: Positionierung von Layern (ID) mit Erscheinen UND Verstecken

SELF-Forum

Positionierung von Layern (ID) mit Erscheinen UND Verstecken

Florian Kirschner
– Informationen zu den Bewertungsregeln

hallo,

möchte ne htmlsite, versehen mit positionierbaren Layern (ID-container) sichtbar und wieder unsichtbar machen (verstecken).

Die Tabelle ist von Anfang an unsichtbar (hidden) und bei Aufruf des Hyperlinks soll sie angezeigt werden, was ich durch

function show2() {
 if(document.getElementById)
   document.getElementById("port2").style.visibility = "visible";
}

erreiche

Nun habe ich davon 3 ID-Boxen und wenn ich die Links nacheinander anklicke erscheinen sie auch, ich kann aber im nachhinein nicht mehr die Seiten verstecken, sprich ich kann sie zwar zeigen mir fehlt aber der Befehl wie ich diese wieder automatisch verschwinden lasse, wenn ich eine ID-Box anklicke,

Hier nochmal der head code:

</script>
<script language="JavaScript" type="text/javascript">
<!--
function show2() {
 if(document.getElementById)
   document.getElementById("port2").style.visibility = "visible";
}
function show3() {
 if(document.getElementById)
   document.getElementById("port3").style.visibility = "visible";
}
function show4() {
 if(document.getElementById)
   document.getElementById("port4").style.visibility = "visible";
}
//-->
</script>
<style type="text/css">
   #port1 { position:absolute; z-index:1; left:38px; top:30px; }
   #port2 { position:absolute; z-index:1; left:38px; top:30px; }
   #port3 { position:absolute; z-index:1; left:38px; top:30px; }
   #port4 { position:absolute; z-index:1; left:38px; top:30px; }
</style>

der erste layer (port1) ist sichtbar, die anderen 3 nicht, wenn ich sie nacheinander aufrufe erscheinen sie auch, der link kann aber nachher nicht mehr willkürlich gewählt werden, die letze ID bleibt stehen.

Hoffe das man mir hierbei helfen kann

gruß
florian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Positionierung von Layern (ID) mit Erscheinen UND Verstecken

    Sven Rautenberg Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin!

    möchte ne htmlsite, versehen mit positionierbaren Layern (ID-container) sichtbar und wieder unsichtbar machen (verstecken).

    Die Tabelle ist von Anfang an unsichtbar (hidden) und bei Aufruf des Hyperlinks soll sie angezeigt werden, was ich durch

    function show2() {
    if(document.getElementById)
       document.getElementById("port2").style.visibility = "visible";
    }

    erreiche

    Ja, und? Das Verstecken geht genauso:
    document.getElementById(...).style.visibility = "hidden";

    Und eine Exkursion in die Programmiertechnik:

    function show2() {
    function show3() {
    function show4() {

    Drei Funktionen, die bis auf den Layernamen aus identischen Anweisungen bestehen. Die sind besser durch eine Funktion ersetzt, die einen Parameter erwartet, welcher Layer denn eigentlich behandelt werden soll.

    Ich hab' da mal was vorbereitet... <jean_pütz_bart wieder ableg>

    ns4 = (document.layers)? true:false
    ie4 = (document.all)? true:false
    v6 = (document.getElementById)? true:false

    function showlayer(layerid)
      {
      if (ns4) document.layers[layerid].visibility = "show"
      else if (v6) document.getElementById(layerid).style.visibility = "visible";
      else if (ie4) document.all[layerid].style.visibility = "visible"
      }

    function hidelayer(layerid)
      {
      if (ns4) document.layers[layerid].visibility = "hide"
      else if (v6) document.getElementById(layerid).style.visibility = "hidden";
      else if (ie4) document.all[layerid].style.visibility = "hidden"
      }

    Was passiert da? Die ersten Definitionen entdecken, ob man auf die Layer im Netscape4-Stil, im IE4-Stil oder im W3C-Stil zugreifen kann.

    Die Funktionen showlayer und hidelayer erwarten die ID des Layers als String im Funktionsaufruf.

    Du kannst also mit showlayer('port2'); den entsprechenden Layer einblenden und mit hidelayer('port2'); wieder verstecken.

    Verstecken ist wichtig, denn mit dieser Layerdefinition:

    <style type="text/css">
       #port1 { position:absolute; z-index:1; left:38px; top:30px; }
       #port2 { position:absolute; z-index:1; left:38px; top:30px; }
       #port3 { position:absolute; z-index:1; left:38px; top:30px; }
       #port4 { position:absolute; z-index:1; left:38px; top:30px; }
    </style>

    provozierst du garantiert Konflikte. Der z-index wird, wenn man ihn nicht angibt, automatisch vergeben und ist für jeden Layer unterschiedlich. Ich habe mit identischen z-index-Angaben Probleme gekriegt, also empfehle ich dir, diese Angabe wegzulassen, oder unterschiedlich zu gestalten.

    der erste layer (port1) ist sichtbar, die anderen 3 nicht, wenn ich sie nacheinander aufrufe erscheinen sie auch, der link kann aber nachher nicht mehr willkürlich gewählt werden, die letze ID bleibt stehen.

    Vermutlich überlagern sich die Layer einfach und überdecken die anderen, ohne daß sie versteckt werden. Mich würde übrigens interessieren, an welcher Stelle du die Layer 2 bis 4 versteckst...

    - Sven Rautenberg

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Positionierung von Layern (ID) mit Erscheinen UND Verstecken

      Lutz T.
      – Informationen zu den Bewertungsregeln

      Moin!

      möchte ne htmlsite, versehen mit positionierbaren Layern (ID-container) sichtbar und wieder unsichtbar machen (verstecken).

      Die Tabelle ist von Anfang an unsichtbar (hidden) und bei Aufruf des Hyperlinks soll sie angezeigt werden, was ich durch

      function show2() {
      if(document.getElementById)
         document.getElementById("port2").style.visibility = "visible";
      }

      erreiche

      Ja, und? Das Verstecken geht genauso:
      document.getElementById(...).style.visibility = "hidden";

      Und eine Exkursion in die Programmiertechnik:

      function show2() {
      function show3() {
      function show4() {

      Drei Funktionen, die bis auf den Layernamen aus identischen Anweisungen bestehen. Die sind besser durch eine Funktion ersetzt, die einen Parameter erwartet, welcher Layer denn eigentlich behandelt werden soll.

      Ich hab' da mal was vorbereitet... <jean_pütz_bart wieder ableg>

      ns4 = (document.layers)? true:false
      ie4 = (document.all)? true:false
      v6 = (document.getElementById)? true:false

      function showlayer(layerid)
        {
        if (ns4) document.layers[layerid].visibility = "show"
        else if (v6) document.getElementById(layerid).style.visibility = "visible";
        else if (ie4) document.all[layerid].style.visibility = "visible"
        }

      function hidelayer(layerid)
        {
        if (ns4) document.layers[layerid].visibility = "hide"
        else if (v6) document.getElementById(layerid).style.visibility = "hidden";
        else if (ie4) document.all[layerid].style.visibility = "hidden"
        }

      Was passiert da? Die ersten Definitionen entdecken, ob man auf die Layer im Netscape4-Stil, im IE4-Stil oder im W3C-Stil zugreifen kann.

      Die Funktionen showlayer und hidelayer erwarten die ID des Layers als String im Funktionsaufruf.

      Du kannst also mit showlayer('port2'); den entsprechenden Layer einblenden und mit hidelayer('port2'); wieder verstecken.

      Hallo Sven,

      ich möcht hier mal was einstreuen:
      Der Kollege will ja nur eine Funktion beim onclick aufrufen, die den gewünschten Layer sichtbar macht und gleichzeitig den vorher sichtbaren Layer unsichtbar macht. D.h. wir brauchen noch ne globale Variable, wo wir uns den sichtbaren Layer merken:

      var sichtbar_id='port1'; //weil der am Anfang sichtbar ist

      und eine Funktion würde ich dann noch ein bißchen ummodeln:

      function showlayer(layerid)
      { hidelayer(sichtbar_id);
        sichtbar_id=layerid;
        if (ns4) document.layers[layerid].visibility = "show"
          else if (v6) document.getElementById(layerid).style.visibility "visible";
         else if (ie4) document.all[layerid].style.visibility = "visible"
      }

      Gruß, Lutz

      Verstecken ist wichtig, denn mit dieser Layerdefinition:

      <style type="text/css">
         #port1 { position:absolute; z-index:1; left:38px; top:30px; }
         #port2 { position:absolute; z-index:1; left:38px; top:30px; }
         #port3 { position:absolute; z-index:1; left:38px; top:30px; }
         #port4 { position:absolute; z-index:1; left:38px; top:30px; }
      </style>

      provozierst du garantiert Konflikte. Der z-index wird, wenn man ihn nicht angibt, automatisch vergeben und ist für jeden Layer unterschiedlich. Ich habe mit identischen z-index-Angaben Probleme gekriegt, also empfehle ich dir, diese Angabe wegzulassen, oder unterschiedlich zu gestalten.

      der erste layer (port1) ist sichtbar, die anderen 3 nicht, wenn ich sie nacheinander aufrufe erscheinen sie auch, der link kann aber nachher nicht mehr willkürlich gewählt werden, die letze ID bleibt stehen.

      Vermutlich überlagern sich die Layer einfach und überdecken die anderen, ohne daß sie versteckt werden. Mich würde übrigens interessieren, an welcher Stelle du die Layer 2 bis 4 versteckst...

      • Sven Rautenberg
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Positionierung von Layern (ID) mit Erscheinen UND Verstecken

    Thomas Meinike Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Nun habe ich davon 3 ID-Boxen und wenn ich die Links nacheinander anklicke erscheinen sie auch, ich kann aber im nachhinein nicht mehr die Seiten verstecken, sprich ich kann sie zwar zeigen mir fehlt aber der Befehl wie ich diese wieder automatisch verschwinden lasse, wenn ich eine ID-Box anklicke,

    Schau Dir mal dieses Beispiel an, koennte in die gesuchte Richtung weisen: http://www.styleassistant.de/tips/beispiel27b.htm.

    MfG, Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln