Holen Sie sich live-Breite div als Fenster ändert?

Sagen wir, ich habe einen Abschnitt, seine Breite ist 1181 (wie ausgegeben in der Konsole) und ich bin mit dem folgenden code, um herauszufinden, die Breite: 

jQuery(document).ready(function()
{
    var body_size = jQuery('section').width();
    console.log(body_size);
});

Wenn ich die Größe von meinem browser, ich habe die Seite neu laden, um herauszufinden, die neue Größe des div.

Ist es ein Weg, um herauszufinden, die Größe, wie ich die Größe meines Browsers?

InformationsquelleAutor Keith Donegan | 2013-01-22
  1. 7

    Können Sie die "resize" - event. Seien Sie gewarnt, dass das Ereignis ausgelöst wird sehr Häufig, so ist es eine gute Idee, nicht jede DOM-manipulation, während Sie in der Prozedur, oder so wenig wie möglich. Eine Möglichkeit, dieses Problem zu behandeln, ist, einen timer zu verwenden:

    var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var body_size = $('section').width();
    //...
    //do your work here
    //...
  }, 200);
});

    Setzt einen timer, so dass Sie nicht wirklich funktioniert, bis mindestens 200 Millisekunden, nachdem der Benutzer beendet die Größenänderung (oder hält Sie für ein bit).

    • Perfekt, vielen Dank.
    • Eine kurze Frage. Wie würde ich mich über das löschen der vorherigen Größe und zeigen nur die neue Größe?
    • das hängt davon ab, wie man "mit" der Größe. Aktualisieren Sie ein element auf der Seite? Wenn du meinst in der Konsole, Sie kann es nicht, es gibt keine Konsolen-API, um zurück zu gehen und ändern Sie etwas, das ist bereits angemeldet.
    • Danke für die Antwort. Ich will nur zeigen Sie es in einem anderen div. So etwas wie: "Div ist: 672px" etc
    • oh OK, gut für etwas, das einfach ich würde verwenden eine <span id=body_size> oder so und dann einfach aktualisieren Sie es mit $('#body_size').text(body_size); in die timeout-handler.
    • Wieder perfekt, ich war die Verwendung voranstellen! Vielen Dank für Eure Hilfe Spitzen.

    InformationsquelleAutor Pointy
Schreibe einen Kommentar