JavaScript Nach Veränderung der Browsergröße, resize eines Elementes auf Viewport-Höhe

savuti

Lt. Commander
Registriert
Jan. 2010
Beiträge
1.708
Hallo,

da meine jQuery-Kenntnisse eher rudimentär ausgebildet sind, bitte ich euch um Hilfe.

Ich habe hier ein kleines Script, welches mir die Höhe einer Klasse (.page) auf die Viewport-Höhe setzt. Das funktioniert auch beim Laden der Seite wunderbar.

Nun möchte ich aber gern auch das Ändern der Größe des Browser "abfangen" und das bekomme ich (auch mit Google) nicht auf die Reihe.

Code:
<script>
var winHeight = $(window).height();
 
$('.page').css({
	'minHeight': winHeight,
});

$(window).resize(function(){
    $('.page').css({
    'minHeight': winHeight,
});
});
</script>

Was mache ich da falsch?

Grüße
 
Hi,

du setzt das "winHeight" nicht neu beim resize würde ich sagen. Sprich: "winHeight" hat immer den selben Wert und wir nicht neu berechnet, bevor es gesetzt wird, kann das sein? Lass dir doch mal in der Konsole ("console.log") ausgeben, ob und wann du in die Methoden bzw. Ereignisse springst und welcher Wert da gesetzt wird. Kann mich da nämlich jetzt auch komplett täuschen :)

VG,
Mad
 
savuti schrieb:
Was mache ich da falsch?

Du ermittelst nach dem Resize die Höhe des Browserfensters nicht neu sondern benutzt den alten Wert.

Code:
$(window).resize(function(){
    $('.page').css({
    'minHeight': $(window).height(),
});
});

Wobei ich mich die Frage stelle wieso du das überhaupt per JavaScript löst und nicht einfach direkt mittels CSS...
 
Eben. CSS ist viel schneller, leichter, besser,...
Und was resize-Events angeht: Es kann sich lohnen, die nicht sofort auszulösen, sondern einen Timeout drauf zu setzen. Warum sollte man auf jedes Resize reagieren, wenn man statt dessen nur auf ein Resize alle 100ms oder so reagieren kann?
 
Danke euch beiden, genau das war es.

Klar geht das über CSS auch (html, body etc auf min-height: 100%), möchte mich aber etwas in Javascript/jQuery einarbeiten und das ist eine schöne Übung.

Nebenbei: Wenn ihr Empfehlungen für Übungen im Netz habt, würde ich mich freuen.

Danke.
 
Ja, gut. Für n bissl rumspielen ists ok. Aber "produktiv" würd ich sowas nicht verwenden.

Prinzipiell ist da noch ein Fehler drin (außer jQuery hat da einen Automatismus), aber es müsste eigentlich so heißen:

Code:
'minHeight': $(window).height() + "px"

CSS benötigt Einheiten, da man Angaben nicht nur in Pixel machen kann. Wenn der Browser im Strict-Mode ist sollte er Angaben ohne Einheit eigentlich ignorieren (außer die 0). Ich vermute mal du hast keinen DocType angegeben? ;-)
 
Habt das mal ergänzt.

Doctype steht auf html? Ging aber auch ohne "px"?
 
Hmm,

jetzt habe ich doch ein Problem mit der Umsetzung in purem CSS:

Ich habe eine Liste in welcher die Elemente 100% Höhe bekommen sollen.

HTML:
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>x</li>
</ul>

Wenn ich in dem Beispiel ul auf 400% Höhe setze und li auf 100% funktioniert alles. Aber wenn ich ein Element hinzufüge muss ich das CSS-File anfassen und ul auf 500% setzen.

Keine Ahnung wie ich das lösen soll.
 
Zurück
Oben