Kniffliges Problem:
HaThoVo
- javascript
0 Gunnar Bittersmann0 Hopsel0 HaThoVo
0 MudGuard0 HaThoVo
Die Aufgabenstellung ist folgende:
Eine Seite enthält Layer (DIVs), die - mit Javascript-Unterstützung auf- und zugeklappt werden können.
Für Benutzer ohne JS sollen die Layer natürlich sichtbar sein.
Es kommt also nur in Frage, diese Layer (<div class="AufUndZuKlapp">) per Javascript verschwinden zu lassen, und zwar möglichst schon während des Ladevorgangs, damit sie gar nicht erst auftauchen.
Die folgende Lösung funktioniert in Mozilla und Opera als Script im Kopfbereich:
<script>
TMP = document.getElementsByTagName('head')[0].appendChild(document.createElement('style'))
TXT = document.createTextNode('.Sack {display:none;}')
TMP.appendChild(TXT)
</script>
Dummerweise meckert der IE das aber an und tuts nicht. Er montiert zwar das STYLE-Element hinein, erlaubt aber keinen Textinhalt.
Also habe ich es mit einer externen Lösung versucht:
<script>
TMP = document.getElementsByTagName('head')[0].appendChild(document.createElement('link'))
with (TMP){
setAttribute('rel','stylesheet')
setAttribute('type','text/css')
setAttribute('href','script.css')
}
</script>
Prima, jetzt macht es der IE, FF auch, aber... OP montiert zwar alles ordentlich rein, ignoriert aber die enthaltene Stilanweisung.
Wer weiß eine Lösung, wie man alle drei dazu bekommt? Ich möchte vermeiden, daß die Layer beim Laden angezeigt werden müssen und erst bei "onload" zuklappen. Außerdem möchte ich die entsprechenden Silanweisungen natürlich nicht mehrfach vorhalten müssen.
HaThoVo,
Für Benutzer ohne JS sollen die Layer natürlich sichtbar sein.
Es kommt also nur in Frage, diese Layer (<div class="AufUndZuKlapp">) per Javascript verschwinden zu lassen, und zwar möglichst schon während des Ladevorgangs, damit sie gar nicht erst auftauchen.
<script type="text/javascript">
[code lang=javascript]document.write('[code lang=html]<style type="text/css">[code lang=css].AufUndZuKlapp {display:none}
~~~</style>[/code]');[/code]
</script>[/code]
Gunnar
PS. Hoffe, ich hab mich bei der Verschachtelung der [сode]-Dinger nicht verzettelt.
--
I never intended HTML source code (the stuff with the angle brackets) to be seen by users. […] To my surprise, people quickly became familiar with the tags and started writing their own HTML documents directly. (Tim Berners-Lee in Weaving the Web)
<script type="text/javascript">
[code lang=javascript]document.write('[code lang=html]<style type="text/css">[code lang=css].AufUndZuKlapp {display:none}
> </script>[/code]
Auf die Lösung bin ich auch schon gekommen. Aber die Write-Methode ist so furchtbar bracchial...
Ich suche nach einer DOM-kompatiblen Lösung.
> PS. Hoffe, ich hab mich bei der Verschachtelung der [сode]-Dinger nicht verzettelt.
Ich kannte das Feature noch gar nicht.
Hallo,
Ich suche nach einer DOM-kompatiblen Lösung.
Das waere eine, ist aber nicht fuer Opera geeignet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 04/05</title>
[code lang=javascript]<script type="text/javascript">
<!--
function Test()
{
var sty=document.createElement("style");
document.getElementsByTagName("head").item(0).appendChild(sty);
// fuer IE:
if(document.styleSheets.item(0).addRule)
document.styleSheets.item(0).addRule(".abc","color: #00C; background-color: #FFC;");
// fuer Mozilla:
else if(document.styleSheets.item(0).insertRule)
document.styleSheets.item(0).insertRule(".abc {color: #00C; background-color: #FFC;}",0);
document.getElementsByTagName("body").item(0).className="abc";
}
//-->
</script>
</head>
<body onload="Test()">
<p>Text ...</p>
</body>
</html>[/code]
MfG, Thomas
Hi,
ich würde das alles anders machen.
Arbeite mit css und benutze hover.
Für den IE kannst du dann noch ein Script einbinden. (<!--[if IE 6]> SCRIPT <![endif]-->)
MfG Hopsel
Hi,
ich würde das alles anders machen.
Vermutlich.
Arbeite mit css und benutze hover.
Nein. Es soll auf Klick auf und zugemacht werden und nicht nur beim Drüberfahren.
Für den IE kannst du dann noch ein Script einbinden. (<!--[if IE 6]> SCRIPT <![endif]-->)
Da gibts Eleganteres (behavior)
MfG Hopsel
mfg
T.
Hi,
TMP = document.getElementsByTagName('head')[0].appendChild(document.createElement('style'))
TMP ist jetzt der Rückgabewert von appendChild. Ist das - wie von Dir hier
TMP.appendChild(TXT)
angenommen - wirklich der angehängte Knoten (also das style-Element)?
cu,
Andreas
Hi,
Hi Mud,
angenommen - wirklich der angehängte Knoten (also das style-Element)?
Ich meine ja, und FF und OP offenbar auch.
Wenn ich nach folgendem Muster umstelle:
TMP = document.createElement('style')
TXT = document.createTextNode('.Sack {display:none;}')
TMP.appendChild(TXT)
document.getElementsByTagName('head')[0].appendChild(TMP)
kommt bei den beiden dieselbe Reaktion. Nicht so beim IE. Der tut's zwar immer noch nicht und meckert, schraubt aber jetzt nicht mal mehr ein leeres Style-Element in den Code.
Offenbar erlaubt der IE keine CDATA-Zuweisung an ein Style-Element.