DIV anzeigen bei großer Auflösung.

[David]

Hallo an Alle!
Wie bekomme ich es mit javascript gebacken, dass ein DIV am rechten Bildrand erst dann angezeigt wird, wenn die Auflösung weiter als 1024 ist?

Alles eine Frage des Platzes, nicht?

Gruß & danke,

David

[ChrisB]

Hi,

Wie bekomme ich es mit javascript gebacken, dass ein DIV am rechten Bildrand erst dann angezeigt wird, wenn die Auflösung weiter als 1024 ist?

Alles eine Frage des Platzes, nicht?

Und der eigenen Bemuehungen :-)

Also: Was hast du bisher probiert, wonach gesucht, etc.?

(Und wenn du dich noch nicht informiert hast, warum die "Aufloesung" in diesem Zusammenhang eine bloedsinnige Groesse ist, und welche passender waere, dann hole das bitte jetzt nach.)

MfG ChrisB

[molily]

Wie bekomme ich es mit javascript gebacken, dass ein DIV am rechten Bildrand erst dann angezeigt wird, wenn die Auflösung weiter als 1024 ist?

Indem du die Viewport-Breite abfragst:

function getViewportSize () {  
 var box = new Object();  
 box.x = 0;  
 box.y = 0;  
 if (self.innerHeight) {  
  box.x = self.innerWidth;  
  box.y = self.innerHeight;  
 } else if (document.documentElement && document.documentElement.clientHeight) {  
  box.x = document.documentElement.clientWidth;  
  box.y = document.documentElement.clientHeight;  
 } else if (document.body) {  
  box.x = document.body.clientWidth;  
  box.y = document.body.clientHeight;  
 }  
 return box;  
}

Der innerWidth/innerHeight-Teil ist für alle Browser außer IE, danach kommt IE je nach Rendermodus wird die clientWidth/-Height von document.body oder document.documentElement (= das html-Element) abgefragt.

Die Funktion gibt ein Objekt zurück mit den Eigenschaften x (Viewport-Breite) und y (Viewport-Höhe).

Siehe auch http://www.quirksmode.org/dom/w3c_cssom.html.

Mathias

[Kai345]

[latex]Mae  govannen![/latex]

Indem du die Viewport-Breite abfragst:

[code lang=javascript]function getViewportSize () {

Rein informativ:

Ich habe die Funktion mal getestet, in jeden Zweig einen Alert gesetzt, um zu sehen, ob dieser auch ausgeführt wird und dann die Bedingungen schrittweise ungültig gemacht, um die Werte aus jedem Zweig zu testen. (in Opera 9.60)

1. Zweig (self.innerXXX)                           1146 / 701
2. Zweig (document.documentElement.clientXXX)      1130 / 701
3. Zweig (document.body.clientXXX)                 1080 / 717

Insbesondere der dritte Fall weicht erheblich ab.

Cü,

Kai

[molily]

(in Opera 9.60)

1. Zweig (self.innerXXX)                           1146 / 701
2. Zweig (document.documentElement.clientXXX)      1130 / 701
3. Zweig (document.body.clientXXX)                 1080 / 717

document.body.clientWidth weicht von document.documentElement.clientWidth ab, wenn html ein margin oder padding besitzt oder body ein margin besitzt. (Letzteres ist standardmäßig im Opera der Fall.) Dann weichen sie um die Summe beider horizontalen margins bzw. paddings voneinander ab.

Der Unterschied zwischen innerWidth und clientWidth erklärt sich durch die Scrollbar, die 16px in Beschlag nimmt. Aber damit weist du mich auf etwas hin: Nicht einmal offsetWidth liefert im Opera den korrekten Wert mit Scrollbar (der dann identisch mit innerWidth sein sollte). Aber die anderen Zweige richten sich ohnehin nur an IE. Wie es da aussieht, weiß ich gerade nicht mehr - der Code stammt von quirksmode.org. Im Prinzip wäre aber eher offsetWidth, also mit Scrollbar, äquivalent zu innerWidth, angenommen, darin ist die Scrollbar eingerechnet.

Mathias

[molily]

Im Prinzip wäre aber eher offsetWidth, also mit Scrollbar, äquivalent zu innerWidth, angenommen, darin ist die Scrollbar eingerechnet.

Gilt auch im IE 6, also wäre eine Umstellung auf offsetWidth naheliegend bzw. man müsste bei innerWidth ggf. die Scrollbar herausrechnen.