clientWidth Problem mit WebKit

von **ferbie** am 17.09.2011, 20:09

Hallo zusammen. Ich will auf meiner page die Dimensionen von images mittels Javascript erfassen. Mein script funktioniert soweit mit Firefox, Internet Explorer und Opera, mit Safari und Chrome allerdings nur bedingt: Richtig angezeigt wird die page...

auf meinem Windows Rechner wenn...
-man den Link zu der Seite aufruft
-die URL in der Adressleiste erneut absendet

auf meinem Macbook...
leider gar nicht mit Safari (aber wie gesagt mit Firefox)

Ich gehe mal davon aus, dass es etwas mit der Reihenfolge zu tun hat wie der Browser intern HTML, CSS und Javascript verarbeitet. Insgesamt stehe ich aber vor einem totalen Rätsel, habe schon etliche Lösungsversuche probiert aber nach einem halben Tag Kopfzerbrechen geb ich jetzt auf...

Wär super wenn jemand ne Idee hat! Hier der Link zur Seite:

klezmeyers.de/fotos.php

p.s.: wie im Threadtitel angedeutet, das Problem hat auch damit zu tun das Safari/Chrome mit .clientWidth/.clientHeight "0" liefern, während die anderen Browser die korrekten Dimensionen liefern...

von **Guillermo** am 17.09.2011, 20:23

Hi ferbie,

versuchs doch mal mit dem Attribut "scrollHeight / scrollWidth" des Body Objekts, also

Code: Alles auswählen: document.body.scrollHeight

Unterstuetzt werden auf jeden Fall alle Browser, auch unter anderen Betriebssystemen.

Viele Gruesse,
Guillermo

von **my-webdesigner.com** am 17.09.2011, 21:16

Ein vielleicht unkonventioneller Ansatz, aber dafür 100% Cross-Browser-Compliant:
Die Idee ist, ein (nicht sichtbares) DIV zum Ausmessen der verfügbaren Breite und Höhe zu platzieren.

HTML:

Code: Alles auswählen: <div id="measure"></div>

Ein leeres DIV mit der ID "measure" wird innerhalb des <body>-Tags platziert.

CSS:

Code: Alles auswählen: #measure { position: absolute; left: -9000px; top: -9000px; width: 100%; height: 100%; }

Die CSS-Properties werden so gesetzt, dass das DIV so weit nach links und oben geschoben wird, dass es nicht mehr sichtbar ist.
Die Breite und Höhe wird auf jeweils 100% gesetzt, was genau den verfügbaren Dokumentendimensionen entspricht.

JavaScript (jQuery vorausgesetzt):

Code: Alles auswählen: var documentWidth = $("measure").width(); // bzw. var documentHeight = $("measure").height();

Jetzt wird mittels JS einfach die Breite und Höhe dieses DIVs gelesen und - voilá - schon hat man seine exakten Dimensionen.

ODER
JavaScript - ohne jQuery, dafür wäre bei älteren Browsern aber ein Switch notwendig:

Code: Alles auswählen: var documentWidth = document.getElementById("measure").offsetWidth; // bzw. var documentHeight = document.getElementById("measure").offsetHeight;

Das Ganze kann man jetzt natürlich noch etwas vereinfachen und z.B. komplett dynamisch in JavaScript umsetzen.

von **Guillermo** am 17.09.2011, 22:13

Ah, ich sehe gerade dass du ja nicht die Hoehe des Inhaltes sondern die Hoehe des Fenster willst, entschuldige.
Für diesen Zweck finde ich dass der Lösungsansatz von my-webdesigner.com wirklich gut ist.

Gruesse,
Guillermo

von **ferbie** am 18.09.2011, 12:03

Danke schonmal für euren Einsatz Jungs!

Leider habt ihr mich anscheinend etwas mißverstanden, worin das Problem besteht: Die ganze Galerie ist enthalten in einem Div namens "gallery"; dessen Dimensionen erfasst das Skript ganz prächtig, und zwar unter jedem getesteten Browser. Was nicht funktioniert ist das messen der Dimensionen der Images.

Hier mal das zuständige Skript (gal.js):

Code: Alles auswählen: function gallery (idDiv,idImg,padding) { //obtaining initial dimensions var galleryWidth=document.getElementById("gallery").clientWidth; var img=document.getElementById(idImg); var imgWidth=img.clientWidth; var imgHeight=img.clientHeight; //vertical mode if (imgHeight>imgWidth) { divWidth=galleryWidth/3-0.5; divHeight=divWidth*1.5; if (imgWidth>=imgHeight/1.5) { newImgWidth=100*padding; } else { newImgWidth=(1.5*100/(imgHeight/imgWidth))*padding; } } //horizontal mode else { divWidth=galleryWidth/2-0.5; divHeight=divWidth/1.5; if (imgWidth>=imgHeight*1.5) { newImgWidth=100*padding; } else { newImgWidth=(100/1.5/(imgHeight/imgWidth))*padding; } } //generating strings; setting new values divWidthStr=divWidth+"px"; divHeightStr=divHeight+"px"; newImgWidthStr=newImgWidth+"%"; document.getElementById(idDiv).style.width=divWidthStr; document.getElementById(idDiv).style.height=divHeightStr; document.getElementById(idImg).style.width=newImgWidthStr; //obtaining renewed img dimensions and setting margins var renewedImgWidth=document.getElementById(idImg).clientWidth; var renewedImgHeight=document.getElementById(idImg).clientHeight; var x=-(renewedImgWidth/2); var y=-(renewedImgHeight/2); marginLeftStr=x+"px"; marginTopStr=y+"px"; document.getElementById(idImg).style.marginLeft=marginLeftStr; document.getElementById(idImg).style.marginTop=marginTopStr; }

von **Guillermo** am 18.09.2011, 12:46

Servus ferbie,

eine andere Methode die Dimensionen eines Bildes herauszufinden waere Bsp. der Weg ueber das Image-Objekt:

Code: Alles auswählen: var image = new Image(); image.src = "deinBild.jpg"; var height = image.height; var width = image.width;

Ehrlicherweise hab ich aber nicht getestet ob das auf allen Browsern funktioniert.

Viele Gruesse,
Guillermo

von **ferbie** am 18.09.2011, 13:47

Danke für den Tip! ich hatte zuvor auch schon ein paar Beispiele mit Image-Objekt gefunden und ausprobiert aber leider ohne Erfolg. Vielleicht habe ich den Code auch immer nur falsch implementiert...

However: JAAAAA! Habe es mittels PHP hinbekommen, im Grunde total simpel via "getimagesize", und da die Seite eh PHP basiert ist kein weiteres Problem!

Also Danke nochmal für Eure Hilfe und gutes Gelingen!

clientWidth Problem mit WebKit

clientWidth Problem mit WebKit

Re: clientWidth Problem mit WebKit

Re: clientWidth Problem mit WebKit

Re: clientWidth Problem mit WebKit

Re: clientWidth Problem mit WebKit

Re: clientWidth Problem mit WebKit

Re: clientWidth Problem mit WebKit

Wer ist online?