Verschiedene Layouts je nach...

[Webblob]

• Größe des Browserfensters
• aktiviertem/deaktiviertem Javascript
  beim User!

Und damit erst Mal einen schönen guten Abend!

Irgendwie steh' ich z.Z. etwas auf der Leitung. Ich möchte eine Seite stricken (standardkonform), die, wenn das Browserfenster des Users breit genug ist, eine feste Breite von 980px hat. Das setzt ja gleichzeitig voraus, dass der jeweilige User auch Javascript aktiviert hat (oder gibt es noch eine andere Methode die Fenstergröße zu ermitteln - AFAIK doch nicht, oder?).

Wenn Javascript deaktiviert ist, soll die Seite ein Layout mit einer festen Breite von 760px haben (das ist die absolute Mindestbreite!).

Das Layout wird durch externe CSS Dateien erzeugt.

Ich möchte keine Veränderungen des URI, also solche Konstrukte wie bspw.: if(Bedingung) window.location.href="datei_xy"

Wenn Javascript aktiviert ist, soll das Layout in der Höhe halt an die Fenstergröße angepasst werden.

Also 2 Dinge sollten realisiert werden:
1. wenn Fenstergröße bekannt (JS aktiviert) -> entweder Layout 760px oder 980px mit JS-Anpassung.

2. wenn kein JS verfügbar -> Layout 760px (logischerweise ohne JS-Anpassungen).

Hab' schon Schwierigkeiten mein Anliegen vernünftig zu erklären - ich hoffe, es versteht mich trotzdem jemand und hat einen Tipp für mich, wie das am besten Umsetze - Danke!

Gruß Gunther

[Ingo Turski]

Hi,

2. wenn kein JS verfügbar -> Layout 760px (logischerweise ohne JS-Anpassungen).

das ist ja simpel. Ein div mit width:760px.

1. wenn Fenstergröße bekannt (JS aktiviert) -> entweder Layout 760px oder 980px mit JS-Anpassung.

da das screen-Objekt nicht zuverlässig ist, würde ich einmal folgendes probieren:

• die Breite des divs auf 100% oder "" setzen
• offsetHeight des divs ermitteln und die Breite entsprechend neu setzen.

freundliche Grüße
Ingo

[Webblob]

Hi Ingo,

2. wenn kein JS verfügbar -> Layout 760px (logischerweise ohne JS-Anpassungen).
   das ist ja simpel. Ein div mit width:760px.

jo, schon klar...

1. wenn Fenstergröße bekannt (JS aktiviert) -> entweder Layout 760px oder 980px mit JS-Anpassung.
   da das screen-Objekt nicht zuverlässig ist, würde ich einmal folgendes probieren:

• die Breite des divs auf 100% oder "" setzen
• offsetHeight des divs ermitteln und die Breite entsprechend neu setzen.

Dafür wollte ich window.innerWidth, bzw. window.innerHeight (bei nicht IE) benutzen. Beim IE ist das leider etwas umständlicher, da er nur das von dir erwähnte offsetWidth/ offsetHeight kennt, was aber voraussetzt, dass das jeweilige Objekt schon existiert, was wiederum eine Verwendung im Head unmöglich macht.

Dafür kann man beim IE aber das komplette Stylesheet sehr einfach ersetzen mit document.styleSheets[x].href="xyz_datei.css"

Ich will ja keine fluiden Layouts, sondern welche mit fixer Breite (nämlich entweder 760px oder 980px). Mir geht es um die "beste" Form der Einbindung (externe CSS-, JS-Dateien, oder von mir aus auch SSI oder PHP). Ich möchte möglichst alle Varianten in einer Datei unterbringen.

Gruß Gunther

[Jan L.]

Hallo,

Dafür wollte ich window.innerWidth, bzw. window.innerHeight (bei nicht IE) benutzen. Beim IE ist das leider etwas umständlicher, da er nur das von dir erwähnte offsetWidth/ offsetHeight kennt, was aber voraussetzt, dass das jeweilige Objekt schon existiert, was wiederum eine Verwendung im Head unmöglich macht.

Hm, wie sieht das denn bei IE aus, wenn du 'document.body.clientWidth' bzw.
'document.documentElement.clientWidth' benutzt? Geht wahrscheinlich auch erst,
wenn die Seite geladen ist, oder? Wenn ja, wist du um ein kurzes Flackern im
IE nicht herumkommen.

Ich würde allerdings dann lieber ein fluides Layout basteln. Bei den 200px
Unterschied zwischen minimaler und maximaler Breite sollte man das doch
hinbekommen, ohne größere Probleme zu kriegen, oder?

Gruß, Jan

[Webblob]

Hallo nochmal,

Dafür wollte ich window.innerWidth, bzw. window.innerHeight (bei nicht IE) benutzen. Beim IE ist das leider etwas umständlicher, da er nur das von dir erwähnte offsetWidth/ offsetHeight kennt, was aber voraussetzt, dass das jeweilige Objekt schon existiert, was wiederum eine Verwendung im Head unmöglich macht.

Hm, wie sieht das denn bei IE aus, wenn du 'document.body.clientWidth' bzw.
'document.documentElement.clientWidth' benutzt? Geht wahrscheinlich auch erst,
wenn die Seite geladen ist, oder?

so ist es...

Ich würde allerdings dann lieber ein fluides Layout basteln. Bei den 200px
Unterschied zwischen minimaler und maximaler Breite sollte man das doch
hinbekommen, ohne größere Probleme zu kriegen, oder?

Nee, 760px = 2-Spalten Layout
     980px = 3-Spalten Layout (da machen die 220px schon einen Unterschied)

Daher ja auch meine Frage nach der "einfachsten/ besten" (standardkonformen)Einbindung der externen Dateien.

Gruß Gunther

[Ingo Turski]

Hi,

Dafür wollte ich window.innerWidth, bzw. window.innerHeight (bei nicht IE) benutzen.

wozu? Andere Browser kannst Du wie Jan schon sagte mit max-width bedienen.

Beim IE ist das leider etwas umständlicher, da er nur das von dir erwähnte offsetWidth/ offsetHeight kennt, was aber voraussetzt, dass das jeweilige Objekt schon existiert, was wiederum eine Verwendung im Head unmöglich macht.

ich würde es einfach mal onload ausprobieren. Ich habe auf meiner Startseite auch so ein kleines Gimmick und der Layoutwechsel fällt gar nicht auf.

Dafür kann man beim IE aber das komplette Stylesheet sehr einfach ersetzen mit document.styleSheets[x].href="xyz_datei.css"

wozu der Aufwand? Es reicht doch die Änderung einer Eigenschaft, oder bedingt das weitere Anpassungen? Und wenn, dann würde ich auf keinen Fall ein weiteres Stylesheet laden - _das_ dürfte dann bemerkbar werden - sondern ein vorhandenes disablen.

freundliche Grüße
Ingo

[Webblob]

Hi,

Dafür wollte ich window.innerWidth, bzw. window.innerHeight (bei nicht IE) benutzen.
wozu? Andere Browser kannst Du wie Jan schon sagte mit max-width bedienen.

Ich will doch kein fluides Layout, sondern wenn das Fenster breit genug ist, eins mit einer festen Breite von 980px (mit 3 Spalten), und wenn das Fenster nicht breit genug ist, oder sich dessen Breite nicht feststellen lässt (JS nicht verfügbar), eins mit einer festen Breite von 760px (mit 2 Spalten)!

Beim IE ist das leider etwas umständlicher, da er nur das von dir erwähnte offsetWidth/ offsetHeight kennt, was aber voraussetzt, dass das jeweilige Objekt schon existiert, was wiederum eine Verwendung im Head unmöglich macht.
ich würde es einfach mal onload ausprobieren. Ich habe auf meiner Startseite auch so ein kleines Gimmick und der Layoutwechsel fällt gar nicht auf.

Sorry, aber was soll ich denn mit 'onload' ausprobieren (sag' ja - stehe irgendwie auf der Leitung)?

Dafür kann man beim IE aber das komplette Stylesheet sehr einfach ersetzen mit document.styleSheets[x].href="xyz_datei.css"
wozu der Aufwand? Es reicht doch die Änderung einer Eigenschaft, oder bedingt das weitere Anpassungen?

Das sind aber ziemlich viele Eigenschaften die man da ändern muss, und ehrlich gesagt finde ich das per JS auch ziemlich aufwendig/ umständlich.

Und wenn, dann würde ich auf keinen Fall ein weiteres Stylesheet laden - _das_ dürfte dann bemerkbar werden - sondern ein vorhandenes disablen.

Jetzt wird's schon interessanter. Frage: Wenn ich ein Stylesheet disable und trotzdem noch eine Formatierung haben will, muss ich doch vorher schon mind. ein zweites Stylesheet geladen haben, oder?

Die Methode document.styleSheets[x].href="xyz_datei.css" bewirkt doch nach meinem Verständnis im Prinzip genau das. Das vorhandene Stylesheet wird durch eine andere Datei ersetzt. Ist doch quasi das gleiche wie Stylesheet 1 -> disabled + Stylesheet 2 -> enabled (genauer: disabled = false). Oder hab' ich da was nicht richtig verstanden?

Ich versuche noch Mal mein Problem etwas genauer zu schildern:
Die Frage, die sich mir stellt ist, wie binde ich, nach Möglichkeit in einer Datei, sowohl die CSS-Datei(en) für das 2-Spalten Layout mit 760px Breite (fest!), als auch die Datei(en) für 980px Breite (fest!), wenn JS aktiviert und Fenster breit genug, ein? Oder passe ich die Datei(en) des 760px Layouts per JS an das 980px Layout an? Oder gibt es wie so oft eine dritte und vierte Möglichkeit, die mir partou nicht einfallen will?

Gruß Gunther

[Ingo Turski]

Hi,

ich würde es einfach mal onload ausprobieren. Ich habe auf meiner Startseite auch so ein kleines Gimmick und der Layoutwechsel fällt gar nicht auf.

Sorry, aber was soll ich denn mit 'onload' ausprobieren (sag' ja - stehe irgendwie auf der Leitung)?

Die Änderung der Styles - und ob es "flackert", wenn dies erst onload (nach dem Laden der Seite) passiert.

Und wenn, dann würde ich auf keinen Fall ein weiteres Stylesheet laden - _das_ dürfte dann bemerkbar werden - sondern ein vorhandenes disablen.

Jetzt wird's schon interessanter. Frage: Wenn ich ein Stylesheet disable und trotzdem noch eine Formatierung haben will, muss ich doch vorher schon mind. ein zweites Stylesheet geladen haben, oder?

Korrekt. Erstes Stylesheet für alle allgemeinen Eigenschaften und für das Dreispalten-Layout, zweites Stylesheet überschreibt die für ein Zweispaltenlayout nötigen Eigenschaften.

Die Methode document.styleSheets[x].href="xyz_datei.css" bewirkt doch nach meinem Verständnis im Prinzip genau das.

Nein. Das ist wesentlich ungünstiger. Zum einen ersetzt es das Stylesheet, so daß auch die allgemeinen Eigenschaften in beiden CSS vorhanden sein müssern und - für diesen Zweck viel wichtiger - muß das Stylesheet erst neu geladen werden bevor es wirksam wird. Das Ausblenden eines vorhandenen Stylesheets passiert unmittelbar.

Die Frage, die sich mir stellt ist, wie binde ich, nach Möglichkeit in einer Datei, sowohl die CSS-Datei(en) für das 2-Spalten Layout mit 760px Breite (fest!), als auch die Datei(en) für 980px Breite (fest!), wenn JS aktiviert und Fenster breit genug, ein?

Schau Dir mal meine schon erwähnte Startseite an. Will ich zwar schon lange ändern, aber hier wird bei zu geringer Höhe des Seiten-DIVs die Eingrenzung und Zentrierung aufgehoben. Im Prinzip genau das, was Du suchst.

freundliche Grüße
Ingo

[Jan L.]

Hallo,

Irgendwie steh' ich z.Z. etwas auf der Leitung. Ich möchte eine Seite stricken (standardkonform), die, wenn das Browserfenster des Users breit genug ist, eine feste Breite von 980px hat. Das setzt ja gleichzeitig voraus, dass der jeweilige User auch Javascript aktiviert hat (oder gibt es noch eine andere Methode die Fenstergröße zu ermitteln - AFAIK doch nicht, oder?).

In modernen Browsern genügt dafür CSS:

  
html, body { margin: 0; padding: 0; }  
body { min-width: 760px; max-width: 980px; }  
* html body { width: 760px; } /*fuer den IE*/  

Damit ist die Seite so breit wie das Browserfenster, mindestens aber 760px und
höchstens 980px. In einem IE ist sie zunächst mal immer 760px breit, da der
weder 'win-width' noch 'max-width' versteht.

Jetzt brauchst du nur noch bißchen JS, das für den IE die Breite für <body>
vergrößert, wenn im Fenster genug Platz ist (das kannst du mit einem
'conditional comment' einbinden). Bei IE-Nutzern, die JS deaktiviert haben,
bleibt sie natürlich 760px breit.

Gruß, Jan

[Webblob]

Hallo Jan,

siehe https://forum.selfhtml.org/?t=105074&m=648979

Gruß Gunther