[JS] Prozent- in Pixelwerte

Beginner

Tuesday, February 10th 2009, 8:06am

[JS] Prozent- in Pixelwerte

Guten Tag Community,

ich verwende die Skript-Sammlung: QuickWMS zum Anzeigen von geographischen Karten auf einer Website.
Nun hätte ich gerne, dass die Kartengröße über Prozentwerte geregelt wird, jedoch nimmt die Funktion von QuickWMS zum
definieren der Größe nur statische Werte (Pixelangaben).

So sieht die Funktion aus:

	JavaScript Code
1	map.writeDOM("myMap", 100, 100, 500, 500, "STYLESHEET");

Die ersten beiden Werte stehen dabei für den Abstand nach Oben und Links.
Der dritte Wert definiert die Höhe der Karte und der vierte Wert steht für die Breite.

Nun habe ich mir überlegt, die Prozentwerte mithilfe der verwendeten Bildschirmauflösung zu Pixelwerten umzuwandeln und
diese dann an die Funktion zu übergeben.
Folgenden Code habe ich dazu verwendet:

JavaScript Code

var hoehe = (window.innerWidth/100)*80;
var breite= (window.innerHeight/100)*80;
var abstandx = (window.innerWidth/100)*10;
var abstandy = (window.innerHeight/100)*10;
map.writeDOM("myMap", abstandx, abstandy,  hoehe, breite, "STYLESHEET");

Das funktioniert mit dem Browsern Firefox und Opera auch soweit ganz gut,
nur zeigt der Internet Explorer (warum auch immer...

) überhaupt keine Daten mehr an.

Nun meine Frage an euch, gibt es da vllt. eine andere Möglichkeit Prozentwerte zu Pixelwerte umzuwandeln
oder muss ich mich zwangsläufig intensiv in Javascript einarbeiten um die Funktion komplett umschreiben zu können?

Mit freundlichem Gruß

Torben Brodt

Administrator

Posts: 8,454

Tuesday, February 10th 2009, 6:53pm

Hi,

innerWidth kennt der Internet Explorer nicht - siehe Kompatiblitätsliste: http://de.selfhtml.org/javascript/objekt…htm#inner_width

Quoted

Im Internet Explorer können Sie mit document.body.clientWidth die innere Fensterhöhe bestimmen. Wenn Sie eine Seite Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.clientWidth statt document.body.clientWidth verwenden. Zu diesem Zeitpunkt muss jedoch das body- bzw. html-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler Seite onload abhängig zu machen.

Ein fertiges Script zum Auslesen der Größe des Anzeigebereichs des Fensters, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf englischsprachige Seite quirksmode.org.

Der Link zu quirksmode ist leider offline, ich habe ihn auch auf die schnelle nicht wiederfinden können. Vielleicht findest du etwas...

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Lemmi

Professional

Posts: 651

Tuesday, February 10th 2009, 9:00pm

JavaScript Code

function getViewportWidth() {
  width = (navigator.userAgent.indexOf('AppleWebKit/') > -1 && !document.evaluate) ? self.innerWidth :
    (!!window.opera) ? document.body.clientWidth : document.documentElement.clientWidth;
  return width;
}

Vorsichtshalber würde ich den Wert für die Fensterbreite aber erst bestimmen, wenn die Webseite fertig geladen wurde. Die Funktion findest du im Übrigen in etwas umfangreicherer und besser eingebetteter Form im Framework prototype.