it-swarm.com.de

jQuery: Wie kann ich die Fensterbreite schnell erkennen?

Ich habe ein Bildlaufelement auf meiner Seite (mit dem jScrollPane-Plugin jQuery). Was ich erreichen möchte, ist eine Möglichkeit, das Bildlauffenster durch Erkennen der Breite des Browserfensters auszuschalten. Ich mache ein responsives Layout und möchte, dass die Bildlauffunktion deaktiviert wird, wenn der Browser eine bestimmte Breite unterschreitet. Wenn ich die Seite aktualisiere, kann ich es funktionieren lassen, aber wenn ich die Größe des Browser-Fensters verändere, wird der Breitenwert nicht sofort aktualisiert. 

Wenn ich jetzt mit einem Fenster beginne, das 1000px breit ist, dann die Größe auf 350px ändern, bleibt die Bildlauffunktion erhalten. Ich möchte, dass sich die Bildlauffunktion abschaltet, sobald die Browserbreite 440px erreicht.

Hier ist der Code, den ich bis jetzt 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
    });
}
64
Dustin

Das Ändern einer Variablen führt den Code innerhalb des if- Blocks nicht magisch aus. Platzieren Sie den allgemeinen Code in einer Funktion, binden Sie dann 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);
});
140
Rob W

Setzen Sie Ihre if-Bedingung in die resize-Funktion:

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

Unten ist das, was ich gemacht habe, um ein Id-Element zu verbergen, wenn die Bildschirmgröße unter 768px liegt. 

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);
});
0
li bing zhao

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