nicht angemeldet
mehrere DIVS auf einmal sichtbar machen
hallo,
ich habe folgendes problem - man hat mir schon versucht zu helfen, klappte aber nicht.
ich habe mehrere divs:
<div id="lough1" class="loughD" ..></div>
<div id="lough2" class="loughD" ..></div>
...
diese möchte ich nun per schleife auf visiblility="hidden" setzen.
man riet mir das mittels getAttribute() über den class-name zu machen.
sah dann ca. so aus:
function test(){
var divs = document.getElementsByTagName('div');
for(var c=0;c<divs.length;++c) {
if(divs[c].getAttribute('class') == "loughD")
divs[c].style.visibility = 'hidden';
}
}
der 'compiler' schmiss dann aber fehler:
Syntax error while loading (line 44)
divs[c].style.visibility = 'hidden';
--------^
hab einiges versucht, bin aber nicht hinter gekommen.
hoffe jemand kann mir da helfen.
gruss
moejoe
-
hallo moejoe,
ich habe mehrere divs:
<div id="lough1" class="loughD" ..></div> <div id="lough2" class="loughD" ..></div> ...
diese möchte ich nun per schleife auf visiblility="hidden" setzen.
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> <!-- function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; }
function MM_changeProp(objName,x,theProp,theValue) { //v3.0 var obj = MM_findObj(objName); if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj."+theProp+"='"+theValue+"'"); } //--> </script> </head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1" style="position:absolute; left:35px; top:40px; z-index:1; width: 190px"> <table width="100%" border="0" cellspacing="3" cellpadding="8"> <tr> <td bgcolor="#FFCC66" width="90" height="40">11111</td> <td width="90"> </td> <td width="90"> </td> </tr> <tr> <td bgcolor="#FFCC66" height="40">aaaaa</td> <td bgcolor="#FFCC66" bordercolor="#FFCC66">bbbbb</td> <td bgcolor="#FFCC66" bordercolor="#FFCC66">ccccc</td> </tr> <tr> <td bgcolor="#FFCC66" height="40">xxxxx</td> <td bgcolor="#FFCC66" bordercolor="#FFCC66">yyyyy</td> <td bgcolor="#FFCC66" bordercolor="#FFCC66">zzzzz</td> </tr> </table> </div> <div id="Layer2" style="position:absolute; left:35px; top:40px; width:190px; z-index:2; height: 132px"> <table width="100%" border="0" cellspacing="3" cellpadding="8"> <tr> <td width="90" height="40"> </td> <td bgcolor="#FF9933" width="90">2222</td> <td width="90"> </td> </tr> <tr> <td bgcolor="#FF9933" height="40">ddd</td> <td bgcolor="#FF9933">eee</td> <td bgcolor="#FF9933">fff</td> </tr> <tr> <td bgcolor="#FF9933" height="40">987</td> <td bgcolor="#FF9933">654</td> <td bgcolor="#FF9933">321</td> </tr> </table> </div> <div id="Layer3" style="position:absolute; left:35px; top:40px; width:190px; height:132px; z-index:3"> <table width=100%" border="0" cellspacing="3" cellpadding="8"> <tr> <td width="90" height="40"> </td> <td width="90"> </td> <td width="90" bgcolor="#CC6600">3333</td> </tr> <tr> <td bgcolor="#CC6600" height="40">gggg</td> <td bgcolor="#CC6600">hhhh</td> <td bgcolor="#CC6600">jjjj</td> </tr> <tr> <td bgcolor="#CC6600" height="40"><<<</td> <td bgcolor="#CC6600">===</td> <td bgcolor="#CC6600">>>></td> </tr> </table> </div> <div id="Layer4" style="position:absolute; left:20px; top:200px; width:486px; height:121px; z-index:4"> <table width="100%" border="0" cellspacing="3" cellpadding="8"> <tr> <td> <h3>per JavaScript<br> mehrere Ebenen gleichzeitig<br> wechseln/unsichtbar machen</h3> </td> </tr> <tr> <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+3','LAYER');MM_changeProp('Layer2','','style.zIndex','+1','LAYER');MM_changeProp('Layer3','','style.zIndex','+2','LAYER')">Layer1 gelb nach oben</a></td> </tr> <tr> <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','+3','LAYER');MM_changeProp('Layer3','','style.zIndex','+2','LAYER')">Layer2 blau nach oben</a></td> </tr> <tr> <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','+2','LAYER');MM_changeProp('Layer3','','style.zIndex','+3','LAYER')">Layer3 rot nach oben !</a></td> </tr> <tr> <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','-1','LAYER');MM_changeProp('Layer3','','style.zIndex','-2','LAYER')">Layer1 ist alleine sichtbar !</a> (Layer 2+3 sind unsichtbar)</td> </tr> <tr> <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','-1','LAYER');MM_changeProp('Layer3','','style.zIndex','+2','LAYER')">Layer1+3 sind sichtbar !</a> (Layer 2 ist unsichtbar)</td> </tr> <tr> <td> <h3>BrowserTest</h3> <ul> <li>OPERA 7: korrekt</li> <li>OPERA 6: <i>macht die Layer mit '-x' <font color="#FF0000">nicht</font> unsichtbar<br> </i></li> </ul> <ul> <li>NETSCAPE 7: korrekt</li> <li>NETSCAPE 6.2: korrekt</li> <li>NETSCAPE 4.75: <i>kennt diese DHTML-Sprache nicht !</i><i><br> </i></li> </ul> <ul> <li>INTERNET EXPLORER 5.5: <i>macht die Layer mit '-x' <font color="#FF0000">nicht</font> unsichtbar</i></li> </ul> </td> </tr> <tr> <td> <h3>JavaScript - Quelltext</h3> <p>Der Term <a href="javascript:;"> markiert einen EventHandler ohne in der Statusleiste eine lange Hyroglyphen-Zeile als Link-Adresse anzuzeigen.</p> </td> </tr> <tr> <td> <p><... onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');... > gibt die JavaScript-Eigenschaften an: lege 'Layer1' auf '+1'. Das Pluszeichen beschreibt, dass der Layer auf die sichtbare Ebene gelegt wird, das Minuszeichen beschreibt, dass der Layer auf die unsichtbare Ebene gelegt wird.</p> <p>'+' und '-' sind hier trotz JavaScript <font color="#FF0000">keine</font> mathematischen Anweisungen zum Addieren und Subtrahieren!</p> <p>...'Layer3'...'+2' heißt somit: Lege den Layer3 sichtbar auf Ebene2.</p> <p>Die Ebene '+1' ist somit die unterste sichtbare Ebene. Die Ebene '+2' liegt darüber und kann sie folglich überdecken.</p> </td> </tr> <tr><td> <h3>Anmerkung im Layout</h3> <p>Hier wird sehr deutlich, dass die historische Formatierung mit <tags> ungenau die Tabellen layoutet. > NUR noch mit CSS gestalten! < <p>Das soll jedoch nicht unbedingt Gegenstand dieses HTML-Kodes sein ! </td><tr> </table> </div> </body> </html>
MoinMoin Klaus Hab die halbe Nacht durchgetüftelt, weil mich dieses Ebenen-Problem sehr beschäftigt und endlich hat. Die Lösung habe ich teilweise per Dreamweaver gefunden, müsste folglich gehörig aufräumen, aber immerhin: Das Verstecken/Sichtbarmachen mache ich heute noch.
-
hallo,
danke dir auch für deine idee, allerdings übergibts du beim onClick eventhandler jeden layer einzeln.. das gäb bei 20 layern ne lange zeile.. hatte dass auch schon so gemacht, nur in eine funktion gepackt, sieht dann noch etwas übersichtlicher aus, is mir aber immernoch zu viel.
danke trotzdem
gruss
moejoe
-
-
hallo,
ich habe folgendes problem - man hat mir schon versucht zu helfen, klappte aber nicht.
ich habe mehrere divs:
<div id="lough1" class="loughD" ..></div>
<div id="lough2" class="loughD" ..></div>
...diese möchte ich nun per schleife auf visiblility="hidden" setzen.
»»
hallo moejoe,
ich hab das mal folgendermaßen gelöst:for(i = 1; i < heute; i++)
{
Strparam = i.toString();
param = Strparam;
if (ie) {
document.all('win'+param).style.visibility="visible";
document.all('win'+param+'D').style.visibility="hidden";
}
else if(ns) {
document.layers['win'+param].visibility="visible";
document.layers['win'+param+'D'].visibility="hidden";
}
else {
document.getElementById("win"+param).style.visibility="visible";
document.getElementById("win"+param+'D').style.visibility="hidden";
}
}schönen Tag,
Reni-
for(i = 1; i < heute; i++)
{
Strparam = i.toString();
param = Strparam;
if (ie) {
document.all('win'+param).style.visibility="visible";
document.all('win'+param+'D').style.visibility="hidden";
}
else if(ns) {
document.layers['win'+param].visibility="visible";
document.layers['win'+param+'D'].visibility="hidden";
}
else {
document.getElementById("win"+param).style.visibility="visible";
document.getElementById("win"+param+'D').style.visibility="hidden";
}
}moin,
danke für die antwort erstmal, aber vielleicht vergass ich zu erwähnen, dass ich viel mehr divs hab, die unterschiedliche classes haben, und ich immer nur die einer class sichtbar machen/verstecken möchte. vielleicht hast dus schon mit "getElementById("win"+param+'D')" bedacht, allerdings versteh ich den trick dahinter nicht ganz.. getElementById kriegt eigentlich den namen der ID .. was steht konkret in 'param' und wozu dort das 'D' .. is doch das ende des class names..taucht in der ID garnicht auf.
bitte erklärs mir nochmal ein wenig detaillierter ;)
gruss
moejoe
-
-
hallo,
ich habe folgendes problem - man hat mir schon versucht zu helfen, klappte aber nicht.
ich habe mehrere divs:
<div id="lough1" class="loughD" ..></div>
<div id="lough2" class="loughD" ..></div>
...Ich hab mal gegooglte weil's mich interessierte und kam auf folgende Seite: [linkhttp://developer.apple.com/internet/javascript/styles.html]
function changeAttr(className, attr, value)
{
var rule = getClass(className);
if(rule) rule.style[attr] = value;
}function getClass(name)
{
If(!name || !document.styleSheets) return null;
name = '.' + name;for(var i = 0; i < document.styleSheets.length; i++)
{
var rules = document.styleSheets[i].rules;
for(var j = 0; j < rules.length; j++)
{
if(rules[j].selectorText == name) return rules[j];
}
}
return null;
}Ich weiss aber nicht wo das überall funktioniert (ich hab hier nur einen IE 4. zum testen)
Struppi.