Sven Rautenberg: Positionierung von Layern (ID) mit Erscheinen UND Verstecken

Beitrag lesen

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