Mehrere DIVs auf Click ausblenden
Mario
- javascript
Guten Morgen,
in mir wuchs in der Vergangenheit immer mehr die Erkenntnis, daß es ohne das Ein oder andere Script in einer HTML(!!!)-Seite nicht mehr geht. Drum nahm ich mir mal wieder ein paar Tage frei, um mich mit Hilfe von SELFHTML in die Materie einzuarbeiten.
Eins meiner tausend Problemchen hält mich jetzt aber schon so lange auf, daß ich um die Hilfe des Forums bitte.
Ich habe ein kleines Sript, mit dem ein frei positionierte Ebene ein-und ausgeschaltet werden kann (visible). Auf eine Ebene angewand ist das auch kein Problem.
<onClick="SichtbarkeitEbenen('ebene1','','show')">
<onClick="SichtbarkeitEbenen('ebene2','','hide')">
Aber wie wende ich jetzt das Script auf z.B. 20 Ebenen gleichzeitig an, die sich auf Click aus- oder anschalten sollen?
Ich suche nach einer Lösung in der ich die Ebenen aufliste und dann den Zustand zuweise (visible="hide", etc.). Gibt es so was?
Hi,
»» <onClick="SichtbarkeitEbenen('ebene1','','show')">
»» <onClick="SichtbarkeitEbenen('ebene2','','hide')">
Aber wie wende ich jetzt das Script auf z.B. 20 Ebenen gleichzeitig an, die sich auf Click aus- oder anschalten sollen?
nun, z.B. indem Du einfach die Funktion mit unterschiedlichen Parametern mehrfach aufrufst:
<onClick="SichtbarkeitEbenen('ebene2','','hide'); SichtbarkeitEbenen('ebene7','','show'); SichtbarkeitEbenen('ebene11','','hide')">
Wie Du siehst, sind Kombinationen aus show und hide dabei kein Problem.
Ich suche nach einer Lösung in der ich die Ebenen aufliste und dann den Zustand zuweise (visible="hide", etc.). Gibt es so was?
Einfacher im Quellcode, aber komplizierter zu programmieren wäre es, wenn Du Dir eine Parametrisierung ausdenkst, die gleichzeitig mehrere Layer bearbeitet. Im einfachsten Fall übergibst Du nur ein Codewort, z.B. 'Kombination1', vergleichst es in einer if-Abfrage (oder while, je nach Deiner Programmierung), und nimmst dann die wirklichen Layerbezeichnungen z.B. aus einem Array. Das verringert ggf. auch den Wartungsaufwand.
Ich hoffe übrigens, Dir ist bewußt, daß Netscape und IE bei der visibility unterschiedliche Codewörter erwarten?
Cheatah
nun, z.B. indem Du einfach die Funktion mit unterschiedlichen Parametern mehrfach aufrufst:
<onClick="SichtbarkeitEbenen('ebene2','','hide'); SichtbarkeitEbenen('ebene7','','show'); SichtbarkeitEbenen('ebene11','','hide')">
Danke, ich habe mal wirklich 20 Ebenen auf diese Weise sichtbar und 10 unsichtbar geschaltet. Wirkt etwas unübersichtlich, aber Hauptsache ist erstmal, daß es funzt... Im IE OK.
Ooops, im NS werden nicht alle Ebenen geändert, ist das ein Timingproblem?
Hi Mario
Ich kann mir nicht vorstellen, dass das ein laufzeitproblem ist. Ich hab mal versucht das ganze in einer Funktion zu schreiben und da hat es im Netscape keine Probleme gegeben (ich hab 15 Ebenen sichtbar und 15 unsichtbar gemacht)
Hier mal ein Codeausschnitt:
<html>
<head>
<title>Ebenentest</title>
<script language="JavaScript">
<!--
function SichtbarkeitEbenen(sicht1,sicht2,sicht3,sicht4,sicht5,sicht6,sicht7,sicht8,sicht9,sicht10,sicht11,sicht12,sicht13,sicht14,sicht15,sicht16,sicht17,sicht18,sicht19,sicht20,sicht21,sicht22,sicht23,sicht24,sicht25,sicht26,sicht27,sicht28,sicht29,sicht30) {
for (i=1;i<31;i++)
{
if (document.layers){
if (eval("sicht"+i+"=='visible'")) eval("sicht"+i+"='show'");
else eval("sicht"+i+"='hide'");
eval("document.ebene"+i+".visibility=sicht"+i)}
if (document.all)
eval("document.all.ebene"+i+".style.visibility=sicht"+i)
}
return
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#BLAU" alink="#BLAU" vlink="#BLAU">
<div id="ebene1" style="position:absolute;top:10;left:10;visibility:visible;">Ebene1</div>
<div id="ebene2" style="position:absolute;top:30;left:10;visibility:visible;">Ebene2</div>
<div id="ebene3" style="position:absolute;top:50;left:10;visibility:visible;">Ebene3</div>
<div id="ebene4" style="position:absolute;top:70;left:10;visibility:visible;">Ebene4</div>
<div id="ebene5" style="position:absolute;top:90;left:10;visibility:visible;">Ebene5</div>
<div id="ebene6" style="position:absolute;top:110;left:10;visibility:visible;">Ebene6</div>
<div id="ebene7" style="position:absolute;top:130;left:10;visibility:visible;">Ebene7</div>
<div id="ebene8" style="position:absolute;top:150;left:10;visibility:visible;">Ebene8</div>
<div id="ebene9" style="position:absolute;top:170;left:10;visibility:visible;">Ebene9</div>
<div id="ebene10" style="position:absolute;top:190;left:10;visibility:visible;">Ebene10</div>
<div id="ebene11" style="position:absolute;top:10;left:100;visibility:visible;">Ebene11</div>
<div id="ebene12" style="position:absolute;top:30;left:100;visibility:visible;">Ebene12</div>
<div id="ebene13" style="position:absolute;top:50;left:100;visibility:visible;">Ebene13</div>
<div id="ebene14" style="position:absolute;top:70;left:100;visibility:visible;">Ebene14</div>
<div id="ebene15" style="position:absolute;top:90;left:100;visibility:visible;">Ebene15</div>
<div id="ebene16" style="position:absolute;top:110;left:100;visibility:visible;">Ebene16</div>
<div id="ebene17" style="position:absolute;top:130;left:100;visibility:visible;">Ebene17</div>
<div id="ebene18" style="position:absolute;top:150;left:100;visibility:visible;">Ebene18</div>
<div id="ebene19" style="position:absolute;top:170;left:100;visibility:visible;">Ebene19</div>
<div id="ebene20" style="position:absolute;top:190;left:100;visibility:visible;">Ebene20</div>
<div id="ebene21" style="position:absolute;top:10;left:200;visibility:visible;">Ebene21</div>
<div id="ebene22" style="position:absolute;top:30;left:200;visibility:visible;">Ebene22</div>
<div id="ebene23" style="position:absolute;top:50;left:200;visibility:visible;">Ebene23</div>
<div id="ebene24" style="position:absolute;top:70;left:200;visibility:visible;">Ebene24</div>
<div id="ebene25" style="position:absolute;top:90;left:200;visibility:visible;">Ebene25</div>
<div id="ebene26" style="position:absolute;top:110;left:200;visibility:visible;">Ebene26</div>
<div id="ebene27" style="position:absolute;top:130;left:200;visibility:visible;">Ebene27</div>
<div id="ebene28" style="position:absolute;top:150;left:200;visibility:visible;">Ebene28</div>
<div id="ebene29" style="position:absolute;top:170;left:200;visibility:visible;">Ebene29</div>
<div id="ebene30" style="position:absolute;top:190;left:200;visibility:visible;">Ebene30</div>
<div id="ebene31" style="position:absolute;top:10;left:300;visibility:visible;"><a href="#" onclick="SichtbarkeitEbenen('visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden')">gerade Ebenen unsichtbar</a></div>
<div id="ebene32" style="position:absolute;top:30;left:300;visibility:visible;"><a href="#" onclick="SichtbarkeitEbenen('hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible','hidden','visible')">ungerade Ebenen unsichtbar</a></div>
</body>
</html>
Um dir bei deinem "Laufzeitproblem" zu helfen, waeren verschiedene Infos hilfreich:
1. der Quellcode der funktion SichtbarkeitEbenen() .
2. Ausserdem waere es hilfreich zu sagen, welche ebenen Netscape nicht aendert. (Es koennte sein, dass das Problem auch bei deinen Ebenendefinitionen seinen Ursprung hat.)
3. gibt es eine Javascriptfehlermeldung?
4. Vieleicht hat auch Cheatah recht mit seiner Bemerkung, dass du nicht beachtet hast, dass bei Netscape die Visibility mit "hide" und "show", beim IE aber mit "hidden" und "visible" uebergeben wird.
Tschau Holger
Hi,
<onClick="SichtbarkeitEbenen('ebene2','','hide'); SichtbarkeitEbenen('ebene7','','show'); SichtbarkeitEbenen('ebene11','','hide')">
Danke, ich habe mal wirklich 20 Ebenen auf diese Weise sichtbar und 10 unsichtbar geschaltet. Wirkt etwas unübersichtlich,
jepp, das war die Sache, die ich dann noch schrieb :-)
Ooops, im NS werden nicht alle Ebenen geändert, ist das ein Timingproblem?
Werden nur die geändert, die angezeigt werden sollen? Auch das schrieb ich bereits... ;-) Bei Netscape heißt es nicht hide, sondern hidden (vorausgesetzt, ich verwechsele das jetzt nicht).
Cheatah
Hi Cheatah
Bei Netscape heißt es nicht hide, sondern hidden (vorausgesetzt, ich verwechsele das jetzt nicht).
Leider verwechselst du das ;-) Wie ich schon im ersten Posting geschrieben habe sind die richtigen Angaben fuer die Visibility: Netscape: "show" und "hide" IE: "visible" und "hidden"
Tschau Holger