window.innerHeight und googlemaps-API

Hi!

Ich habe auf
http://www.effenberg.de/maps.htm
die Breite der Karte mit window.innerWidth an die Breits des Viewports
angepasst und das funktioniert prima mit FF2 und IE6.

Sobald ich aber in irgendeiner Form auf window.innerHeight zugreife, z.B.

<script>document.write('<div id="map" style="width: '+window.innerWidth+'px; height: '+(window.innerHeight -
300)+'px;"></div>')</script>

kriege ich im FF einen waagerechten Scrollbalken und links einen schmalen
Rand.
Und der IE6 kommt damit überhaupt nicht klar: Die angezeigte Karte nimmt
zwar die gewünschte Höhe ein, aber die eigentliche Kartenfläche geht scheinbar
über die gesamte Viewporthöhe, denn "Powerd by google" und
"Nutzungsbedingungen" stehen plötzlich ganz unten im Viewport.

Wo liegt mein Fehler?

Vielen Dank und viele Grüße
Harald

P.S.:
Eigentlich hatte ich gehofft, die gesamte Viewporthöhe für die Karte nutzen
zu können indem ich das Formularfeld, div id="message" und den Link
irgendwie mit map.addOverlay() in die Karte einbaue, so wie die Controls.
Geht das überhaupt?
--
Im neuen Krimidinner als erfolgreicher Gastronom Harro Wustermann:
http://www.effenberg.de/photos/workp...nnenbrille.jpg

Harald Effenberg wrote:

Ich habe auf http://www.effenberg.de/maps.htm die Breite der Karte mit
window.innerWidth an die Breits des Viewports angepasst und das
funktioniert prima mit FF2 und IE6.

Sobald ich aber in irgendeiner Form auf window.innerHeight zugreife, z.B.

script>document.write('<div id="map" style="width:
'+window.innerWidth+'px; height: '+(window.innerHeight -
300)+'px;"></div>')</script

Da fe lt das type-Attribut; ausserdem musst Du `</' im script-Element
maskieren, am besten mit `<\/'.

<script type="text/javascript">
document.write('<div id="map"'
+ ' style="width: ' + window.innerWidth + 'px;'
+ ' height: ' + (window.innerHeight - 300) + 'px;"><\/div>');
</script>

kriege ich im FF einen waagerechten Scrollbalken und links einen schmalen
Rand. Und der IE6 kommt damit überhaupt nicht klar: Die angezeigte Karte
nimmt zwar die gewünschte Höhe ein, aber die eigentliche Kartenfläche
geht scheinbar über die gesamte Viewporthöhe, denn "Powerd by google" und
"Nutzungsbedingungen" stehen plötzlich ganz unten im Viewport.

Wo liegt mein Fehler?

Auf obiger Website finde ich stattdessen:

<div id="map" style="width:
<script>document.write('window.innerWidth')</script>; height: 690px; margin:
auto;"></div>

Das kann nicht funktionieren: Attributwerte werden nicht erneut nach
Elementen geparst. Du suchst stattdessen

<div id="map" style="height: 690px; margin: auto;"></div>

Denn Block-Elemente haben per default die volle Breite des Elternelements,
in diesem Fall die des body-Elements und damit (ohne Ränder) des Viewports,
als Breite.

Im MSHTML-DOM gibt es zudem die Eigenschaften `window.innerWidth' und
window.innerHeight nicht (das hätte Dir bereits window.alert() verraten),
jedoch entsprechend `window.document.body.clientWidth' und
`window.document.body.clientHeight'.


HTH

PointedEars
--
Snowboarder k÷nnen gar kein JavaScript. Sie klicken in Dreamweaver
'was zusammen und glauben, das sei "Programmieren".

-- Andreas Hollmann in dciwam

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> schrieb:

Harald Effenberg wrote:

[ http://www.effenberg.de/maps.htm ]

Da fe lt das type-Attribut; ausserdem musst Du `</' im script-Element
maskieren, am besten mit `<\/'.

Danke!

Das kann nicht funktionieren: Attributwerte werden nicht erneut nach
Elementen geparst. Du suchst stattdessen

div id="map" style="height: 690px; margin: auto;"></div

Denn Block-Elemente haben per default die volle Breite des Elternelements,
in diesem Fall die des body-Elements und damit (ohne Ränder) des Viewports,
als Breite.

Nochmal danke!

Im MSHTML-DOM gibt es zudem die Eigenschaften `window.innerWidth' und
window.innerHeight nicht (das hätte Dir bereits window.alert() verraten),
jedoch entsprechend `window.document.body.clientWidth' und
`window.document.body.clientHeight'.

Aber window.document.body.clientHeight verhält sich nicht so, wie ich es
erwartet hätte.

Oder habe ich hier noch einen Fehler drin?

<script type="text/javascript">
document.write('<div id="map" style="height: '
+ window.document.body.clientHeight
+ 'px;"><\/div>');
</script>

Ich hatte damit gerechnet, daß die Karte nun die ganze Höhe des
Browserfensters einnimmt und den Rest verdeckt?

Viele Grüße
Harald
--
Trage bitte dort, wo jetzt "Harald Effenberg" steht, deinen
vollständigen/richtigen Namen ein. Das gilt im deutschsprachigen
Usenet als höflich und erhöht deine Chancen, ernstgenommen zu werden
und freundliche Antworten zu bekommen. (Heiko Ernst in dnq)

Harald Effenberg wrote:

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> schrieb:
Im MSHTML-DOM gibt es zudem die Eigenschaften `window.innerWidth' und
window.innerHeight nicht (das hätte Dir bereits window.alert() verraten),
jedoch entsprechend `window.document.body.clientWidth' und
`window.document.body.clientHeight'.

Aber window.document.body.clientHeight verhält sich nicht so, wie ich es
erwartet hätte.

Oder habe ich hier noch einen Fehler drin?

script type="text/javascript"
document.write('<div id="map" style="height: '
+ window.document.body.clientHeight
+ 'px;"><\/div>');
/script

Ich hatte damit gerechnet, daß die Karte nun die ganze Höhe des
Browserfensters einnimmt und den Rest verdeckt?

Ich weiss nicht, womit Du gerechnet hattest. Du schreibst jedoch auch
nicht, was stattdessen passiert.

Weiterhin musst Du beachten, dass das body-Element noch Ränder und Paddings
hat. Wenn Du möchtest, dass ein Kind-Element des body-Elements den Viewport
ausfüllt, musst Du jene (am besten per CSS) auf 0 setzen:

body {
margin: 0;
padding: 0;
}


PointedEars
--
Bedenke, daß Mozilla bereits 4 Jahre alt ist. Du kannst Dir also ausrechnen,
wie veraltet NN4 ist. Trotzdem ist er der erfolgreichste Browser aller
Zeiten. Kein Fossil ist je so alt geworden wie dieser Browser einen aussehen
läßt. ;-) -- Georg Maaß in dcljs <aouobi$q4qm6$1 (AT) ID-3551 (DOT) news.dfncis.de>