jQuery: Wie erkennt man die Fensterbreite im laufenden Betrieb?

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
    });
}

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);
});

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
      });
  }
});

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);
});

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%");
       }
    });