HaThoVo: Kniffliges Problem:

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.

  1. 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)
    
    1. <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.
      
      1. 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

  2. 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

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    1. 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.

  3. 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

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. 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.