chrisko: css Datei in JS aufrufen

Hi,

mein Problem ist folgendes ich habe 2 verschiedene css Dateien angelegt und sie für 2 verschiedene Auflösungen (1280*1024 und 1024*768) optimiert. Jetzt wollt ich mit Java Script die aktuell verwendete Bildschirmauflösung ermitteln und dann die entsprechende css Datei laden. Und jetzt meine Frage wie mache ich das? Das Script hab ich ja aber wie ruf ich darin dann die jeweilige css Datei auf?

Script:

<script type="text/javascript">
if (screen.width >= 1024)
{
  <!--hier müsste dann die css datei aufgerufen werden-->
} else {
  <!--hier müsste dann die css datei aufgerufen werden-->
}
</script>

also die:  <link rel="stylesheet" type="text/css" href="layout.css">

  1. hi,

    Jetzt wollt ich mit Java Script die aktuell verwendete Bildschirmauflösung ermitteln und dann die entsprechende css Datei laden. Und jetzt meine Frage wie mache ich das?

    Am besten gar nicht.

    Das Script hab ich ja aber wie ruf ich darin dann die jeweilige css Datei auf?

    Script:

    <script type="text/javascript">
    if (screen.width >= 1024)
    {
      <!--hier müsste dann die css datei aufgerufen werden-->
    } else {
      <!--hier müsste dann die css datei aufgerufen werden-->

    Dir ist doch wohl hoffentlich klar, dass die Maße des Bildschirms absolut überhaupt nichts mit der in irgendeinem Browser verfügbaren Anzeigefläche zu tun haben (wenn nicht, recherchiere dazu bitte im Archiv).

    also die:  <link rel="stylesheet" type="text/css" href="layout.css">

    Für den Javascript-Noob: document.write.
    Für Fortgeschritten(er)e: style-Element über DOM-Methoden erstellen und einhängen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. also müsste dann der link mit:

      document.write.link rel="stylesheet" type="text/css" href="layout.css"

      aufgerufen werden?

      gibt es denn ein script das die im Browser verfügbare Anzeigefläsche bestimmt?

      Ich will jetzt nicht über sinn oder unsinn meines Konzeptes diskutieren sondern lediglich eine Antwort auf meine Frage.

      Das Problem bei mir war ja das ich die Webseite auf die beiden gängigsten Auflösungen ausrichten möchte. (deswegen die 2 css Dateien) Ich hab das anfangs mit 2 verschiedenen HTML Dateien getestet und das hat prima geklappt und nun wollte ich das ganze in die css datei auslagern damit ich nicht jede seite doppelt anlegen muss.

      1. Hallo!

        Ich will jetzt nicht über sinn oder unsinn meines Konzeptes diskutieren sondern lediglich eine Antwort auf meine Frage.

        Im folgenden Satz widersprichst Du Deinem obigen Statement ;)

        Ich hab das anfangs mit 2 verschiedenen HTML Dateien getestet und das hat prima geklappt und nun wollte ich das ganze in die css datei auslagern damit ich nicht jede seite doppelt anlegen muss.

        Jetzt musst Du zwei Stylesheets pflegen, merkst Du was?

        Im Übrigen habe ich gerade einen Viewport von 750px.

        Zu Deiner Frage. Mit innerWidth kannst Du innere Breiten bestimmen.

        Schönen Gruß

        Afra

        1. Kann mir da mal jemand das folständige Script posten das ich dafür benötige?

          Was ist denn eurer Meinung nach die beste Lösung um mit veschiedene Auflösungen klar zu kommen?

          1. Hallo chrisko!

            Kann mir da mal jemand das folständige Script posten das ich dafür benötige?

            Wohin soll ich die Rechnung senden?

            Was ist denn eurer Meinung nach die beste Lösung um mit veschiedene Auflösungen klar zu kommen?

            Indem Du Dir einfach klar machst, dass Layout für eine flexible Ausgabe an einem Anzeigemedium wie einem Bildschirm, oder mobilen Endgerät, einfach etwas anderes ist, als das Layout für ein Druckmedium, das sich in Pixeln messen lässt.

            Stichworte hierzu sind flexibles Layout, liquides Layout, skalierbares Layout.

            Schönen Gruß

            Afra

            1. Erstmal vielen dank auch wenn ich immer noch nicht weiß wie ich das script gestalten muss damit die css datei aufgerufen wird.

              Kann mir da denn niemand helfen???

              1. So hab jetzt ein Script das die Anzeigefläsche im Browser ermittelt.

                Jetzt bleibt aber noch das Problem mit der css Datei. Brauche dringend hilfe.

                Hier mal das Script:

                <script language="JavaScript">
                function fenster()
                {
                if(document.all)
                {
                breit=document.body.clientWidth;
                hoch=document.body.clientHeight;
                alert("Breite: "+breit+" Hoehe: "+hoch);
                }
                if (document.layers)
                {
                breit = self.innerWidth;
                hoch = self.innerHeight;
                alert("Breite: "+breit+" Hoehe: "+hoch);
                }
                }
                </script>

                1. Jetzt bleibt aber noch das Problem mit der css Datei. Brauche dringend hilfe.

                  Hat dir doch wahsaga schon gesagt.

                  Struppi.

                  1. Ja schon aber richtig beschrieben hat er es auch nicht. ich bin nicht lange in JS drin und daher noch recht unerfahren deswegen brauch ich eure hilfe

                      1. Ja und wie heißt nun der Befehl mit document.write damit ich die css aufrufen kann.

                        Kann nicht mal jemand diesen posten das hilft mir am besten weiter.

                2. Hallo chrisko!

                  Hier mal das Script:

                  Wo hast Du das ausgegraben?

                  <script language="JavaScript">

                  ^^^^^^^^^^^^^^^^^^^^^

                  Erforderliches type-Attribut fehlt, "language=..." sollte nicht mehr benutzt werden.

                  function fenster()
                  {
                  if(document.all)

                  Damit sprichst Du zwar auch neuere IE-Versionen an, aber auch Opera.

                  {
                  breit=document.body.clientWidth;
                  hoch=document.body.clientHeight;
                  alert("Breite: "+breit+" Hoehe: "+hoch);
                  }
                  if (document.layers)

                  Und welchen Browser willst Du hier ansprechen? Netscape 4.x? Dessen Verbreitung tendiert gegen 0.

                  Eine interessante Abfrage-Übersicht findest Du hier.

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --

                  _ - jenseits vom delirium - _
                  [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                  Nichts ist unmöglich? Doch!
                  Heute schon gegökt?
      2. hi,

        also müsste dann der link mit:

        document.write.link rel="stylesheet" type="text/css" href="layout.css"

        aufgerufen werden?

        Nein, natürlich nicht.

        RTFM.
        document.write ist ein Stichwort, welches sich durchaus im Javascript-Kapitel von SELFHTML nachschlagen lässt.

        gibt es denn ein script das die im Browser verfügbare Anzeigefläsche bestimmt?

        Ja, aber ...

        Ich will jetzt nicht über sinn oder unsinn meines Konzeptes diskutieren sondern lediglich eine Antwort auf meine Frage.

        ... da will ich jetzt nicht näher drauf eingehen, ob der sich mir darstellenden Unsinnigkeit deines Konzeptes.

        Das Problem bei mir war ja das ich die Webseite auf die beiden gängigsten Auflösungen ausrichten möchte.

        "Auflösung" == "Blödsinn"
        verstehen.bitte(jetzt);

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
    2. Hallo wahsaga,

      natürlich sollte man seine Seiten so planen, dass man mit (fast) allen Viewportmaßen klar kommt. Aber solange die Browser Bilder nicht vernünftig skalieren können, muss man bei der Wahl der Bildgröße an eine bestimmte Auflösung denken. Natürlich kann man Hintergrundbilder so in die Hintergrundfarbe einbinden, dass es bei allen Größen ordentlich aussieht.

      Aber es spricht aus meine Sicht nichts dagegen, dass man Besuchern mit aktiviertem Javascript und großem Viewport auch größere (Hintergrund-)Bilder bietet. Hierdurch wird die Seite nicht unbenutzbar und Javascript bietet einen gewissen Mehrwert. Gleiches kann auch für die Maße anderer Elemente gelten.

      @chrisko

      Ich frage die Fensterbreite so ab:

      var wdth=1000,sz="M";

      if (document.body && document.body.offsetWidth) wdth=document.body.offsetWidth;
      else if (window.innerWidth) wdth=window.innerWidth;
      if (wdth>1100)     { sz="L"; }
      else if (wdth<900) { sz="S"; }
      else               { sz="M"; }

      Gruß, Jürgen