tilgino: wenn javascript inaktiv nimm anderes css

hi,

kann man auslesen ob javascript aktiv ist, und wenn nein nimm css_a wenn ja nimm css_b.

lg
peter

  1. Hi

    Wenn JS aktiv ist, kannst du mit JS ein anderes Stylesheet anwenden. Wenn JS nicht aktiviert ist, logischer weise nicht.

    Also sollte es reichen mittels JS ein vorhandenes Stylesheet zu ersetzen.

    so long
    Ole
    (8-)>

    --
    Stickstoff eignet sich nicht für Handarbeiten.
    1. vielen dank soweit,

      also im HTML hab ich definiert:
      <link rel="stylesheet" title="standard style" href="menuvnojs.css" type="text/css" media="screen, projection" />

      dann javascriptabfrage:
      // if javascript enabled overwrite standard-css
       if (window.navigator.javaEnabled() == true) {
          document.write('<link rel="stylesheet" title="standard style" href="menuv.css" type="text/css" media="screen, projection" />');
       }

      funktioniert auch wunderbar das problem ist nur:
      er merkt sich auch die definitionen des ersten sheets, sodas die beiden teilweiese kollidieren... also was z.b im "menunojs.css" definiert ist und im "menuv.css" nicht, merkt sich der browser... knn man ihm anweisen alles vom ersten file zu löschen oder muss ich diese sachen alle manuell im 2ten(js) file überschreiben?

      danke
      gruss
      peter

      1. Hi

        oder muss ich diese sachen alle manuell im 2ten(js) file überschreiben?

        Ich vermute du wirst alles überschreiben müssen.

        so long
        Ole
        (8-)>

        --
        Stickstoff eignet sich nicht für Handarbeiten.
      2. Hallo,

        <script type="text/javascript">  
        [code lang=javascript]  // if javascript enabled  
         document.write('<link rel="stylesheet" title="standard style" href="menuv.css" type="text/css" media="screen, projection" \/>');
        

        </script>
        <noscript>
         <link rel="stylesheet" title="standard style" href="menuvnojs.css" type="text/css" media="screen, projection" />
        </noscript>[/code]

        Nicht ausprobiert aber ich glaube das könnte funktionieren.

        Grüße
        Jeena Paradies

        1. Hallo Jeena.

          <script type="text/javascript">

          [code lang=javascript]  // if javascript enabled
          document.write('<link rel="stylesheet" title="standard style" href="menuv.css" type="text/css" media="screen, projection" />');

          
          > </script>  
          > <noscript>  
          >  <link rel="stylesheet" title="standard style" href="menuvnojs.css" type="text/css" media="screen, projection" />  
          > </noscript>[/code]  
          >   
          > Nicht ausprobiert aber ich glaube das könnte funktionieren.  
            
          Und wohin willst du dieses Script setzen?  
            
          Im body-Element? → Da hat das <http://de.selfhtml.org/html/referenz/elemente.htm#link@title=link-Element> nichts zu suchen.  
            
          Im head-Element? → Da hat das <http://de.selfhtml.org/html/referenz/elemente.htm#noscript@title=noscript-Element> nichts zu suchen.  
            
            
          \*Dass\* es von den gängigen Browsern dennoch unterstützt wird, ist eine andere Sache.  
            
            
          Einen schönen Montag noch.  
            
          Gruß, Ashura  
          
          -- 
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
          [<mathbr:del.icio.us/>](http://del.icio.us/mathbr) [<mathbr:w00t/>](http://w00t.noctus.net)
          
          1. Hallo,

            Im head-Element? → Da hat das http://de.selfhtml.org/html/referenz/elemente.htm#noscript@title=noscript-Element nichts zu suchen.

            Das war mir nicht ganz klar, ich verstehe aber nicht so richtig warum man sich dafür entschieden hat.

            *Dass* es von den gängigen Browsern dennoch unterstützt wird, ist eine andere Sache.

            Na wenn man dann valide schreiben will dann wohl am ehesten nach so einer Methode (bitte auch Kommentare beachten).

            Grüße
            Jeena Paradies

            1. Hallo Jeena.

              Im head-Element? → Da hat das http://de.selfhtml.org/html/referenz/elemente.htm#noscript@title=noscript-Element nichts zu suchen.
              Das war mir nicht ganz klar, ich verstehe aber nicht so richtig warum man sich dafür entschieden hat.

              Die Wege des Her^W W3C sind (hin und wieder) unergründlich.

              Na wenn man dann valide schreiben will dann wohl am ehesten nach so einer Methode (bitte auch Kommentare beachten).

              Hehe, wie du bemerkt haben dürftest, ist mir dieser Eintrag bereits aufgefallen.

              Einen schönen Montag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              mathbr:del.icio.us/ mathbr:w00t/
  2. Hallo tilgino.

    kann man auslesen ob javascript aktiv ist, und wenn nein nimm css_a wenn ja nimm css_b.

    Ja, kann man.

    Einen schönen Montag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    mathbr:del.icio.us/ mathbr:w00t/
  3. Salut!

    kann man auslesen ob javascript aktiv ist, und wenn nein nimm css_a wenn ja nimm css_b.

    Ich würde dies vorschlagen:
    <script type="text/javascript">
    if (window.navigator.javaEnabled() == true) {
       document.write('<link href="../a.css" rel="stylesheet" type="text/css" />');
    } else {
    document.write('<link href="../b.css" rel="stylesheet" type="text/css" />');}
    }

    grüße
    dave

    1. Hallo dave.

      if (window.navigator.javaEnabled() == true) {

      Es ging um Java_Script_, nicht um JAVA.

      Einen schönen Montag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      mathbr:del.icio.us/ mathbr:w00t/
  4. Hallo,

    binde doch das CSS-File mit einer ID ein. Dann kannst Du in einem nachstehenden JS über die getElementById das href-Attribut ändern und damit das No-JS-CSS-File ersetzen.
    Wenn es nicht direkt geht, dann eben bei onload.

    Ciao

  5. kann man auslesen ob javascript aktiv ist, und wenn nein nimm css_a wenn ja nimm css_b.

    Z.b. so:

    <link rel="stylesheet" href="kein_js.css" media="screen">

    <script type="text/javascript">
    var o = document.getElementsByTagName('link');
    if(o[0]) o[0].href="mit_js.css";
    </script>

    Struppi.

    1. Hallo Struppi.

      <link rel="stylesheet" href="kein_js.css" media="screen">

      <script type="text/javascript">
      var o = document.getElementsByTagName('link');
      if(o[0]) o[0].href="mit_js.css";
      </script>

      Zur Stelle „if(o[0])“:

      Warum sollte das *darüber* notierte link-Element an dieser Stelle noch nicht existieren?

      Einen schönen Montag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      mathbr:del.icio.us/ mathbr:w00t/
      1. Hallo Ashura,

        Zur Stelle „if(o[0])“:
        Warum sollte das *darüber* notierte link-Element an dieser Stelle noch nicht existieren?

        Murphy? ;)

        • Erwin -
      2. <link rel="stylesheet" href="kein_js.css" media="screen">

        <script type="text/javascript">
        var o = document.getElementsByTagName('link');
        if(o[0]) o[0].href="mit_js.css";
        </script>

        Zur Stelle „if(o[0])“:

        Warum sollte das *darüber* notierte link-Element an dieser Stelle noch nicht existieren?

        Woher weißt du, dass das Element darüber notiert wird?

        Struppi.

        1. Hallo Struppi.

          Woher weißt du, dass das Element darüber notiert wird?

          Daher, dass ich dies getan habe.
          (Siehe auch: </archiv/2006/2/t123301/#m793973>)

          Einen schönen Dienstag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          mathbr:del.icio.us/ mathbr:w00t/
  6. Hallo,

    kann man auslesen ob javascript aktiv ist, und wenn nein nimm css_a wenn ja nimm css_b.

    Ich würde darauf verzichten, das link-Element oder den Wert des href-Attributes dieses Elementes auszutauschen. Stattdessen würde ich nur ein Stylesheet im HTML einbinden:

    <head>  
      ...  
      <link rel="stylesheet" media="screen" href="/src/css" />  
    </head>  
    <body>
    

    Der Clou dabei ist es, dass es im Stylesheet teilweise Regeln in dieser Form gibt:

    #mit-js table {  
      /* ... */  
    }
    

    ... statt einfach nur:

    table { /* ... */ }

    Allen Elementen wird also abgefordert, dass sie unter einem Element mit der ID "mit-js" liegen – das bei der Auslieferung des HTML-Dokumentes nirgendwo existiert. Es wird nur eingefügt, wenn Javascript aktiviert ist und zwar von Javascript selber:

    window.onload = function () {  
      document.body.id = "mit-js";  
    }
    

    Beim fertigen Laden des Dokumentes wird diese anonyme Funktion geladen und als Inhalt der Funktion wird die ID des Elementes body auf die oben gesuchte ID gesetzt. Spontan funktionieren plötzlich alle CSS-Regeln, die in der Form "#mit-js element" definiert sind, ausser vielleicht auf das body-Element selber zutreffende Regeln, für diese nutzt man natürlich nur "mit-js {}". Geht natürlich auch mit Klassen.

    Der Gedanke dahinter ist es, die drei Schichten (Strukturierung, Gestaltung, Verhalten), um Inhalt im Web zu präsentieren, nicht zu verknüpfen, sondern dafür zu sorgen, dass diese Schichten aufeinander aufbauen, aber eben nicht entscheidend für die Präsentation der Seite sind. Klassisch wird das in dem Diagramm von Russ Beakley, mehr wird es zur Zeit unter dem Begriff Unobtrusive DOM Scripting definiert. In diesem Fall ist die Verreckung deswegen vielleicht albern ja. In anderen Fällen ist es dagegen sinnvoller, Veränderungen in der Seite nicht direkt vorzunehmen, sondern in Javascript einfach mittels der Änderung eines Attributes dafür zu sorgen, das andere Darstellungsregeln zur Anwendung kommen – nicht notwendigerweise die eigenen, der Betrachter der Seite kann ja auch eigene im Browser definiert haben.

    Tim

    1. Hallo Tim.

      Gute Idee, danke für deinen Beitrag.

      Einen schönen Dienstag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      mathbr:del.icio.us/ mathbr:w00t/
    2. Hallo.

      window.onload = function () {

      document.body.id = "mit-js";
      }

      [...]  
      
      > Geht natürlich auch mit Klassen.  
        
      Und das kann auch wichtig sein, denn `<body>`{:.language-html} eine verlässliche ID zu geben, kann ja auch in anderen Zusammenhänge sinnvoll sein.  
      MfG, at