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

savuti

Lt. Commander
Dabei seit
Jan. 2010
Beiträge
1.389
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
 

Madman1209

Fleet Admiral
Dabei seit
Nov. 2010
Beiträge
25.109
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
 

Jesterfox

Fleet Admiral
Dabei seit
März 2009
Beiträge
40.043
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...
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
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?
 

savuti

Lt. Commander
Ersteller dieses Themas
Dabei seit
Jan. 2010
Beiträge
1.389
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.
 

Jesterfox

Fleet Admiral
Dabei seit
März 2009
Beiträge
40.043
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? ;-)
 

savuti

Lt. Commander
Ersteller dieses Themas
Dabei seit
Jan. 2010
Beiträge
1.389
Habt das mal ergänzt.

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

savuti

Lt. Commander
Ersteller dieses Themas
Dabei seit
Jan. 2010
Beiträge
1.389
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.
 
Top