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

savuti · 20. Februar 2014

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 · 20. Februar 2014

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 · 20. Februar 2014

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...

Daaron · 20. Februar 2014

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 · 20. Februar 2014

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 · 20. Februar 2014

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 · 20. Februar 2014

Habt das mal ergänzt.

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

Jesterfox · 20. Februar 2014

Hm, entweder dreht da jQuery was dran oder die Browser reagieren mittlerweile wieder anders. Welcher Browser und wie sieht der Doctype genau aus?

savuti · 20. Februar 2014

Chrome.

<!DOCTYPE html>

Jesterfox · 20. Februar 2014

Hm, dann nehm ich mal an das sich Chrome da auch im Strict-Mode etwas großzügiger verhält.

savuti · 20. Februar 2014

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.

Suche

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

savuti

Lt. Commander

Madman1209

Fleet Admiral

Jesterfox

Legende

Daaron

Fleet Admiral

savuti

Lt. Commander

Jesterfox

Legende

savuti

Lt. Commander

Jesterfox

Legende

savuti

Lt. Commander

Jesterfox

Legende

savuti

Lt. Commander

Ähnliche Themen