jQuery: Wie erkennt man die Fensterbreite im laufenden Betrieb?

70

Ich habe ein Bildlaufelement auf meiner Seite (mit dem jScrollPane jQuery-Plugin). Was ich erreichen möchte, ist eine Möglichkeit, das Bildlauffenster auszuschalten, indem die Breite des Browserfensters ermittelt wird. Ich mache ein reaktionsschnelles Layout und möchte, dass diese Bildlauffunktion deaktiviert wird, wenn der Browser eine bestimmte Breite unterschreitet. Ich kann es zum Laufen bringen, wenn ich die Seite aktualisiere, aber wenn ich die Größe des Browserfensters ändere, wird der Breitenwert nicht im laufenden Betrieb aktualisiert.

Wenn ich jetzt mit einem Fenster mit einer Breite von 1000 Pixel beginne und die Größe auf 350 Pixel ändere, bleibt die Bildlauffunktion erhalten. Ich möchte, dass die Bildlauffunktion ausgeschaltet wird, sobald die Browserbreite 440px erreicht.

Hier ist der Code, den ich bisher habe.

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}
javascript jquery responsive-design Dustin
quelle
2
Bewegen Sie Ihren Code innerhalb des Rückrufs des resize, nur zur Vorsicht, Sie möchten die Ausführung drosseln resize, um ein
Kris Ivanov

Antworten:

154

Das Ändern einer Variablen führt keinen magischen Code innerhalb des ifBlocks aus. Platzieren Sie den allgemeinen Code in einer Funktion, binden Sie das Ereignis und rufen Sie die Funktion auf:

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});
Rob W.
quelle
Vielen Dank! Das funktioniert fast für mich. Aber hier ist ein seltsames Problem. Wenn ich das Browserfenster auf weniger als 440 Pixel verkleinere, die Seite aktualisiere, ist die Bildlauffunktion nicht vorhanden (gut!). Wenn ich das Fenster auf mehr als 440 verkleinere, ist die Bildlauffunktion vorhanden (auch gut!). Aber wenn ich die Größe des Fensters wieder auf weniger als 440 verkleinere, verschwindet die Bildlauffunktion nicht (schlecht).
Dustin
1
@DustinMcGrew Das wird durch Ihre Logik definiert: Wenn die Fensterbreite kleiner als 440 ist, passiert nichts (nicht einmal ein Zurücksetzen). Sie sollten dies beheben können. Wenn nicht, teilen Sie weitere Details zur Anwendung dieses Codes mit.
Rob W
3
Ahhh du hast recht !! Sie müssen nur eine else-Anweisung hinzufügen und die Funktion jScrollPaneRemove () aufrufen. Funktioniert jetzt perfekt :)
Dustin
Optimiert das Speichern der Referenzen außerhalb der Funktion die Effizienz, da js nicht jedes Mal, wenn die Funktion aufgerufen wird, die neue Referenz erstellen / finden muss?
LazerSharks
1
@Gnuey Das resizeEreignis wird während einer Größenänderung sehr oft aufgerufen . Die Konstruktion eines jQuery-Objekts ist ziemlich teuer, daher ist es in der Tat optimaler, die Referenzen außerhalb der Funktion zu speichern. Beachten Sie, dass dies nur für Objekte / Elemente funktioniert, die sich nicht ändern. Das windowObjekt ändert sich nie mehr und es #panelwird erwartet, dass das durch identifizierte Element eindeutig ist (IDs sind eindeutig), sodass davon ausgegangen werden kann, dass das jQuery-Objekt, das dieses Element umschließt, ebenfalls gültig bleibt.
Rob W
18

Setzen Sie Ihre if-Bedingung in die resizeFunktion ein:

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});
Antyrat
quelle
Eine so einfache, aber nicht offensichtliche Lösung für dieses Problem, danke.
Lizardx
1

Unten ist, was ich getan habe, um ein ID-Element auszublenden, wenn die Bildschirmgröße unter 768px liegt, und um anzuzeigen, wenn die Bildschirmgröße über 768px liegt. Es funktioniert großartig. 

var screensize= $( window ).width();

if(screensize<=768){
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
}
else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

}
changething = function(screensize){
        if(screensize<=768){
            if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
        }
        else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

        }
}
$( window ).resize(function() {
 var screensize= $( window ).width();
  changething(screensize);
});
li bing zhao
quelle
0

Ich weiß nicht, ob dies für Sie nützlich ist, wenn Sie die Größe Ihrer Seite ändern:

$(window).resize(function() {
       if(screen.width == window.innerWidth){
           alert("you are on normal page with 100% zoom");
       } else if(screen.width > window.innerWidth){
           alert("you have zoomed in the page i.e more than 100%");
       } else {
           alert("you have zoomed out i.e less than 100%");
       }
    });
Dinnu Buddy
quelle