[JS] Prozent- in Pixelwerte

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [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:

    Quellcode

    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:

    Quellcode

    1. var hoehe = (window.innerWidth/100)*80;
    2. var breite= (window.innerHeight/100)*80;
    3. var abstandx = (window.innerWidth/100)*10;
    4. var abstandy = (window.innerHeight/100)*10;
    5. 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... 8| ) ü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ß

  • Hi,

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

    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...

  • Quellcode

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


    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.