JS und CSS Layout - Einheitenproblem

[Axel]

Hallo Leute,

ich habe ein kleines (grosses) Problem. Vielleicht liegt da schon ein konzeptioneller Fehler vor, und vielleicht könnt Ihr mir helfen.

Ich habe mein Layout komplett mit CSS mit der Einheit "em" erstellt. Dadurch möchte ich erreichen, dass die gesamte Layout bei Änderungen der Schriftart im Browser "mitzoomt". Soweit klappt das auch alles.

Nun habe ich allerdings eine kleine Animation mit JS erstellt (ausklappbares Menü).
Grob gesagt läuft das so ab, dass ich auf einen Div mehrmal hintereinander folgenden Befehl ausführe:

obj.style.height = obj.offsetHeight + 30 + 'px';

Dieser Befehl steht in einer Funktion und wird mittels window.setTimeout() einige Male ausgeführt, damit das Menü langsam ausfährt.
Das Div (hier durch "obj" repräsentiert) wird mittels CSS und der Angabe z.B. 4em definiert.

Das Problem ist nun, dass offsetHeight den Wert in Px zurückliefert und somit nach dem ersten Ausfahren des Menüs dieses nicht mehr an die Einstellungen der Browserschriftgröße angepasst wird.
Es ist ja dann in Px und nicht mehr in em eingestellt.

Also, habe ich da einen grundsätzlichen Denkfehler drin, oder kann ich Px irgendwie in em umrechnen (ich bräuchte ja dazu die aktuelle Einstellung des Browsers).

Vielen, vielen Dank im Voraus

Schöne Grüße
Axel

[Cyx23]

Hallo Axel,

Das Problem ist nun, dass offsetHeight den Wert in Px zurückliefert und somit nach dem ersten Ausfahren des Menüs dieses nicht mehr an die Einstellungen der Browserschriftgröße angepasst wird.
Es ist ja dann in Px und nicht mehr in em eingestellt.

Also, habe ich da einen grundsätzlichen Denkfehler drin, oder kann ich Px irgendwie in em umrechnen (ich bräuchte ja dazu die aktuelle Einstellung des Browsers).

Das dürfte womöglich selbst wenn es geht letztlich zu umständlich werden.
Für den IE hatte ich document.body.currentStyle.fontSize als Basis, ähnlich wie hier,
Schriftskalieren beim Internet Explorer, genommen um Scrift- und Elementgrössen anzupassen.

Aber hätte es vielleicht Vorteile wenn du statt den style (height) zu verändern irgendwie
mit clip rangehst und die Höhe gar nicht veränderst?

Grüsse

Cyx23

[Axel Hoogestraat]

Hallo Cyx23

Für den IE hatte ich document.body.currentStyle.fontSize als Basis, ähnlich wie hier,
Schriftskalieren beim Internet Explorer, genommen um Scrift- und Elementgrössen anzupassen.

Naja, geht ja nur im IE dann. Das ist doof.

Aber hätte es vielleicht Vorteile wenn du statt den style (height) zu verändern irgendwie
mit clip rangehst und die Höhe gar nicht veränderst?

DAS ist allerdings gar nicht doof. Das war die Lösung. Mit clip funktioniert es wunderbar.
Vielen Dank. War also ein nicht ganz so grundsätzliches Problem (naja, irgendwie doch :-)

Schöne Grüße
Axel

[Ingo Turski]

Hi,

Also, habe ich da einen grundsätzlichen Denkfehler drin, oder kann ich Px irgendwie in em umrechnen (ich bräuchte ja dazu die aktuelle Einstellung des Browsers).

umrechnen direkt zwar nicht, aber Du kannst die Höhe eines Elements von z.B. 4em auslesen und 1/4 dieses Wertes sollte in der eingestellten Schriftgröße 1em entsprechen.

freundliche Grüße
Ingo

[Axel Hoogestraat]

Hallo Ingo,

Also, habe ich da einen grundsätzlichen Denkfehler drin, oder kann ich Px irgendwie in em umrechnen (ich bräuchte ja dazu die aktuelle Einstellung des Browsers).
umrechnen direkt zwar nicht, aber Du kannst die Höhe eines Elements von z.B. 4em auslesen und 1/4 dieses Wertes sollte in der eingestellten Schriftgröße 1em entsprechen.

Vielen Dank für die Antwort, aber das ist ja genau mein Problem gewesen. offsetHeight liefert ja die Werte in Pixeln zurück. Die Höhe in em kann ich ja nicht abfragen ... oder ?

Schöne Grüße
Axel

[Ingo Turski]

Hi,

umrechnen direkt zwar nicht, aber Du kannst die Höhe eines Elements von z.B. 4em auslesen und 1/4 dieses Wertes sollte in der eingestellten Schriftgröße 1em entsprechen.

Vielen Dank für die Antwort, aber das ist ja genau mein Problem gewesen. offsetHeight liefert ja die Werte in Pixeln zurück. Die Höhe in em kann ich ja nicht abfragen ... oder ?

habe ich mich wirklich so unklar ausgedrückt? Du mußt nur die in em _bekannte_ Höhe eines Elements auslesen und hast den entsprechenden Wert in px.

freundliche Grüße
Ingo