Layer visible und hidden

[Messmar]

Hallo,

bei dieser sehr sehr einfachen Javascript-Funktion, weise ich dem Layer die Eingenschaft "visible" und es funktioniert aber für das Verstecken bzw. "hidden" funktioniert es nicht.

Ich bekomme keine Fehlermeldung und d.h für mich, dass es um einen logischen Fehler, den ich im Moment nicht sehen kann ;-((, handelt.

Sieht Jemand hier was ich nicht sehen kann. Heute ist nicht men Tag
;-((

Vielen Dank und Gruß
Messmar

Der Code

  
if (document.getElementById) {  
  
if (document.getElementById(layerChange).style.visibility="hidden")  
document.getElementById(layerChange).style.visibility="visible";  
else if(document.getElementById(layerChange).style.visibility="visible")  
document.getElementById(layerChange).style.visibility="hidden";  
  
}  
// End Netscape 6  
  
if (document.all) {  
  
if (document.all[layerChange].style.visibility="hidden")  
document.all[layerChange].style.visibility="visible";  
else if (document.all[layerChange].style.visibility="visible")  
document.all[layerChange].style.visibility="hidden";  
  
}  
  
<style>  
#mzeLinks{  
margin: -8px 0 0 0;  
background-color: #FFFFFF;  
visibility: hidden;  
position: absolute;  
}  
</style>  
  
  
<table width="200" height="20" border="0" cellpadding="0" cellspacing="0">  
<tr>  
<td nowrap>  
  <a href onclick="auf('mzeLinks')">Dummy Link</a>  
</td>  
<td width="100%">  
<div id="mzeLinks">  
<table border="0" cellpadding="0" cellspacing="0">  
<tr>  
<td>  
<a href="JavaScript: onw('dummy_seite.htm','dummy_name', 720, 500)">Mailing</a>  
</td>  
</tr>  
</table>  
</div>  
</td>  
</tr>  
</table>  
  

[wahsaga]

hi,

if (document.getElementById) {

Der Kommentar

// End Netscape 6

legt nahe, dass du annimmst, diese Zugriffssyntax wäre nur für diesen Browser geeignet(?) - das ist aber nicht wahr, getElementById() unterstützen alle aktuellen Browser.

if (document.all) {

Das bräuchtest du höchstens, wenn du noch zu IEs _kleiner_ als Version 5 kompatibel bleiben willst. Da deren CSS-Unterstützung aber auch recht dürftig ist, ist das m.E. wenig sinnvoll.

if (document.getElementById(layerChange).style.visibility="hidden")

Du machst hier eine Zuweisung, keinen Vergleich. Deshalb ist diese "Bedingung" (in diesem Falle) _immer_ wahr - dein else-Zweig kommt nie zur Ausführung.
Der Vergleichsoperator ist immer noch ==

gruß,
wahsaga

[Messmar]

Hi,

wie gesagt, heute ist nicht mein Tag.

Alles was Du da geschrieben hast stimmt und vor allem das mit dem getElementById() und das schlimmste noch ist, dass ich es wußte.

Peinlich, Peinlich.

Vielen Dank und Gruß
Messmar

[Klawischnigg]

Hi there,

if (document.getElementById(layerChange).style.visibility="hidden")

hic canis sepultus est ;)

die Abfrage muß lauten =="hidden" ...

[Ooops]

if (document.getElementById)
if (document.all)

Der MSIE versteht beide Anweisungen und hat damit einen Konflikt.
Wenn du unbedingt die alten Internet Explorer mit drin haben willst, mußt du das DOM ausschließen ...
if (document.all && !document.getElementById )

Gruß Ooops

[Meswsmar]

Hi,

jetzt, sieht der Code folgendermaßen aus, und es funktioniert, aber nicht ganz.

Beim ersten Klick auf den Link nach dem Neuladen der Seite passiert gar nichts (der Layer bleibt unsichtbar). Erst beim zweiten Klick funktioniert dann das Ganze.

Gruß
Messmar

  
  
function auf(layerChange)  
{  
if (document.getElementById)  
{  
if (document.getElementById(layerChange).style.visibility=="hidden")  
document.getElementById(layerChange).style.visibility="visible";  
else document.getElementById(layerChange).style.visibility="hidden";  
}  
}  
  

[wahsaga]

hi,

Beim ersten Klick auf den Link nach dem Neuladen der Seite passiert gar nichts (der Layer bleibt unsichtbar). Erst beim zweiten Klick funktioniert dann das Ganze.

Du kannst über das style-Objekt nur Werte auslesen, die entweder zuvor per Javascript gesetzt worden sind, oder direkt über style-Attribut am betreffenden Element selber hinterlegt wurden.
Ob ein Objekt bspw. hidden ist, weil das durch einen zutreffenden Selektor im externen CSS so definiert ist, erfährst du über das style-Objekt nicht.

Aber wenn deine Objekte per default durch Angabe im externen CSS zunächst immer hidden sind [1], lässt sich das in diesem Falle recht einfach umgehen:

if (document.getElementById(layerChange).style.visibility=="hidden")
document.getElementById(layerChange).style.visibility="visible";
else document.getElementById(layerChange).style.visibility="hidden";

Drehe die Bedingung und Anweisungen einfach um:

  
if (document.getElementById(layerChange).style.visibility=="visible")  

> document.getElementById(layerChange).style.visibility="hidden";  
> else document.getElementById(layerChange).style.visibility="visible";  

Da, wie oben erklärt, zu Anfang der aktuelle Wert von style.visibility nicht ermittelt werden kann, ergibt die Bedingung false, und es geht direkt ins else, wo "visible" gesetzt wird.

Beim nächsten Aufruf der Funktion ergibt die Bedingung jetzt true - "visible" wurde per Javascript gesetzt, ist _jetzt_ also über style.visibility abfragbar - der Wert wird in "hidden" geändert; usw usf. bei weiteren Aufrufen.

[1] allerdings müsstest du dir dann überlegen, was bei Nutzern ohne JS passiert - sollen diese die Inhalte gar nicht zu sehen bekommen ...?

gruß,
wahsaga

[Messmar]

Hi wahsaga,

Vielen vielen Dank für die ausführliche Erklärung. ;-))
Das funktioniert.

[1] allerdings müsstest du dir dann überlegen, was bei Nutzern ohne JS passiert - sollen diese die Inhalte gar nicht zu sehen bekommen ...?

Das stimmt auch wieder. Wenn der User z.B. die JavaScript im Browser deaktiviert, dann funktioniert das Ganze natürlich nicht.

Ich hätte es einfach mit CSS machen können und den Code hätte ich auch
hinbekommen. Ist ziemlich einfach aber ich lasse es zunächst wie es jetzt ist. Zumindest, habe ich jetzt was gelernt.

Danke und gruß
Messmar

[wahsaga]

hi,

Das stimmt auch wieder. Wenn der User z.B. die JavaScript im Browser deaktiviert, dann funktioniert das Ganze natürlich nicht.

Da würde ich folgende recht einfache Lösung vorschlagen:

Mach das Verstecken der Elemente über den Nachfahrenselektor:
"Verstecke" im normalen CSS für die Seite nicht einfach über

.klasse { ... }
#id { ... }
.elementname { ... }

sondern schalte eine weitere Klasse davor:

.jsIstAn .klasse { ... }
.jsIstAn #id { ... }
.jsIstAn .elementname { ... }

So lange du diese Klasse nirgendwo vergibst, sind die Elemente nach dem Laden der Seite sichtbar.

Per Javascript gibst du jetzt nach dem Laden der Seite (onLoad) dem body die Klasse jsIstAn,
<body onLoad="document.body.className='jsIstAn';">

Hat der User Javascript aktiviert, bekommt body sofort nach dem Laden die Klasse jsIstAn verpasst - die oben genannten CSS-Regeln mit dem Nachfahren-Selektor "greifen" jetzt, die Elemente werden zunächst nicht angezeigt.

gruß,
wahsaga

[Messmar]

Hi,

[...]Da würde ich folgende recht einfache Lösung vorschlagen:[...]

Super, das funktioniert einwandfrei. Wieder was gelernt ;-)

Vielen Dank
Messmar