validacion - validar formulario javascript html5

Evento de cambio de tamaño de la ventana del navegador cruzado-JavaScript/jQuery

Question

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

¿Y puedes activar / desactivar ambas barras de desplazamiento?

Answer 1

Además de las funciones de redimensionamiento de la ventana mencionadas, es importante comprender que los eventos de redimensionamiento se activan mucho si se usan sin que los eventos se deban.

Paul Irish tiene una excelente función que anuncia que el cambio de tamaño requiere mucho. Muy recomendado para su uso. Funciona cross-browser. Lo probé en IE8 el otro día y todo estuvo bien.

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

Asegúrese de revisar la demostración para ver la diferencia.

Aquí está 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...
});

Answer 2

Aquí está 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. No estrangula nada por ti. Aquí hay un ejemplo de ello en acción.

Answer 3

Considero que el complemento de jQuery "jQuery resize event" es la mejor solución para esto, ya que se encarga de limitar 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 conectar 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 plugin está disponible here

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

Answer 4

Creo que deberías agregar más control 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 5

Disculpe por mostrar un hilo viejo, pero si alguien no quiere usar jQuery, puede usar esto:

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

Answer 6

Usando jQuery 1.9.1, acabo de descubrir que, aunque técnicamente es idéntico) *, esto no funcionó en IE10 (pero en Firefox):

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

Si bien esto funcionó en ambos navegadores:

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

Editar:
) * En realidad no es técnicamente idéntico, como se señala y explica en los comentarios de WraithKenny y Henry Blyth .

Answer 7

Ya que estás abierto a jQuery, este complemento parece hacer el truco.

Answer 8

jQuery tiene un método incorporado para esto:

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

En aras de la capacidad de respuesta de la interfaz de usuario, puede considerar usar un setTimeout para llamar a su código solo después de algunos milisegundos, como se muestra en el siguiente ejemplo, inspirado en this :

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

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

Answer 9

jQuery proporciona la función $(window).resize() 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 10

espero que ayude en jQuery

defina una función primero, si hay una función existente, salte al siguiente paso.

 function someFun() {
 //use your code
 }

uso del tamaño del navegador como estos.

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

Answer 11

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

    alert(''resize'');

});