navegador Cruz evento de cambio de tamaño de ventana - JavaScript/jQuery

Question

¿Cuál es el método correcto (moderna) para aprovechar la ventana de cambiar el tamaño de evento que funciona en Firefox, WebKit, e Internet Explorer?

Y se puede convertir ambas barras de desplazamiento de encendido/apagado?

Answer 1

jQuery tiene una built-in method para esto:

$(window).resize(function() { /* do something */ }); 

Por el bien de la capacidad de respuesta de interfaz de usuario, es posible considerar el uso de un setTimeout para llamar a su código sólo después de cierto número de milisegundos, como se muestra en la siguiente ejemplo, inspirado por this:

function doSomething() { 
    alert("I'm done resizing for the moment"); 
}; 

var resizeTimer; 
$(window).resize(function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(doSomething, 100); 
}); 

Answer 2

Dado que usted está abierto a jQuery, this plugin parece hacer el truco.

Answer 3

$(window).bind('resize', function() { 

    alert('resize'); 

}); 

Answer 4

considero el plugin jQuery "jQuery cambiar el tamaño de evento" para ser la mejor solución para esto, ya que se encarga de acelera el evento para que funcione de la misma manera en todos los navegadores. Es similar a la respuesta de Andrews, pero es mejor ya que puede enganchar el evento de cambio de tamaño a elementos/selectores específicos, así como a toda la ventana. Abre nuevas posibilidades para escribir código limpio.

El plug-in está disponible here

Hay problemas de rendimiento si se agrega una gran cantidad de oyentes, pero para la mayoría de los casos de uso es perfecto.

Answer 5

este momento para que aparezca un viejo hilo, pero si alguien no quiere usar jQuery puede utilizar esto:

function foo(){....}; 
window.onresize=foo; 

Answer 6

creo que se debe añadir un control adicional a esto:

var disableRes = false; 
    var refreshWindow = function() { 
     disableRes = false; 
     location.reload(); 
    } 
    var resizeTimer; 
    if (disableRes == false) { 
     jQuery(window).resize(function() { 
      disableRes = true; 
      clearTimeout(resizeTimer); 
      resizeTimer = setTimeout(refreshWindow, 1000); 
     }); 
    } 

Answer 7

Usando jQuery 1.9.1 acabo de descubrir que, aunque técnicamente idéntica) *, esto no funcionaba en IE10 (pero en Firefox):

// did not work in IE10 
$(function() { 
    $(window).resize(CmsContent.adjustSize); 
}); 

mientras este trabajaba en ambos navegadores:

// did work in IE10 
$(function() { 
    $(window).bind('resize', function() { 
     CmsContent.adjustSize(); 
    }; 
}); 

Editar:
) * En realidad no técnicamente idénticos, como se ha indicado y explicado en los comentarios por WraithKenny y Henry Blyth.

Answer 8

jQuery proporciona $(window).resize() función por defecto:

<script type="text/javascript"> 
// function for resize of div/span elements 
var $window = $(window), 
    $rightPanelData = $('.rightPanelData') 
    $leftPanelData = $('.leftPanelData'); 

//jQuery window resize call/event 
$window.resize(function resizeScreen() { 
    // console.log('window is resizing'); 

    // here I am resizing my div class height 
    $rightPanelData.css('height', $window.height() - 166); 
    $leftPanelData.css ('height', $window.height() - 236); 
}); 
</script> 

Answer 9

Aquí es la forma no jQuery de aprovechar el evento de cambio de tamaño:

window.addEventListener('resize', function(event){ 
    // do stuff here 
}); 

Funciona en todos los navegadores modernos. Hace no acelera cualquier cosa para ti. Here is an example de ella en acción.

Answer 10

esperan que ayude en jQuery

definir una función en primer lugar, si hay una función existente saltar al siguiente paso.

function someFun() { 
//use your code 
} 

el uso del navegador de cambio de tamaño como estos.

$(window).on('resize', function() { 
    someFun(); //call your function. 
}); 

Answer 11

Además de cambiar el tamaño de la ventana de funciones mencionadas, es importante entender que los eventos de cambio de tamaño mucho fuego si se utiliza sin un deboucing los eventos.

Paul irlandés tiene una excelente función que debounces el cambio de tamaño llama mucho. Muy recomendado para usar Funciona en todos los navegadores Lo probé en IE8 el otro día y todo estaba bien.

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Asegúrese de check out the demo para ver la diferencia.

Aquí es la función para la integridad.

(function($,sr){ 

    // debouncing function from John Hann 
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 
    var debounce = function (func, threshold, execAsap) { 
     var timeout; 

     return function debounced() { 
      var obj = this, args = arguments; 
      function delayed() { 
       if (!execAsap) 
        func.apply(obj, args); 
       timeout = null; 
      }; 

      if (timeout) 
       clearTimeout(timeout); 
      else if (execAsap) 
       func.apply(obj, args); 

      timeout = setTimeout(delayed, threshold || 100); 
     }; 
    } 
    // smartresize 
    jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 

})(jQuery,'smartresize'); 


// usage: 
$(window).smartresize(function(){ 
    // code that takes it easy... 
});