javascript - remove - jquery get attribute data

jQuery: ¿Cómo detectar ancho de ventana sobre la marcha?

Question

Tengo un elemento de desplazamiento en mi página (con el jQuery de jScrollPane). Lo que quiero lograr es una forma de desactivar la ventana de desplazamiento detectando el ancho de la ventana del navegador. Estoy haciendo un diseño receptivo y quiero que esta función de desplazamiento se desactive cuando el navegador tenga un ancho inferior. Puedo hacer que funcione cuando actualizo la página, pero cuando cambio el tamaño de la ventana del navegador, el valor del ancho no se actualiza al vuelo.

En este momento, si empiezo con una ventana que tiene 1000 píxeles de ancho y luego cambio el tamaño a 350 píxeles, la función de desplazamiento permanece. Quiero que la característica de desplazamiento se cierre tan pronto como el ancho del navegador llegue a 440px.

Aquí está el código que tengo hasta ahora ...

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

Answer 1

No sé si esto es útil para usted cuando cambia el tamaño de su página:

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

Answer 2

A continuación se muestra lo que hice para ocultar un elemento Id cuando el tamaño de la pantalla es inferior a 768px, y aparece cuando está por encima de 768px. Funciona muy bien.

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

Answer 3

Cambiar una variable no ejecuta mágicamente el código dentro del bloque- if . Coloque el código común en una función, luego vincule el evento y llame a la función:

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

Answer 4

Ponga su condición if dentro de la función de cambio de resize :

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