jQuery cambio de tamaño() mediante el navegador botón

Question

maximizar Esta es mi código que se activa siempre se cambia el tamaño de la ventana:

$(window).resize(function() 
{ 
    setDisplayBoardSize(); 
}); 

Incendios bien cuando cambio el tamaño de la ventana y corre mi función muy bien, como se esperaba.

Si presiono el botón de maximizar aunque no funciona correctamente.

Ésta es la función setDisplayBoardSize():

function setDisplayBoardSize() 
{ 
    var width = $(".display_container").width(); 

    for (i=min_columns; i<=max_columns; i++) 
    { 
     if ((width > (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap)))) 
     { 
      $("#display_board").css("width",(i*(item_width + gap))+ "px"); 
     } 
    } 
} 

Creo que el problema es que cuando el navegador se hace clic en el botón maximizar dispara la función que lee obtiene el ancho .display_container antes del cambio de tamaño y luego cambia el tamaño de la ventana al máximo, lo que significa que mi display_board tiene un tamaño incorrecto.

Si estoy en lo cierto, ¿cómo puedo obtener el tamaño del elemento .display_container después de, la ventana se ha redimensionado al máximo?

deben tener en cuenta que he probado esto en Chrome y Firefox

Gracias

Answer 1

EDITAR para el arreglo propuesto:

Aquí es el working jsFiddle y aquí está la results only demo.

Como puede ver, he vuelto a factorizar totalmente su código jQuery original. Eliminé todo de Global y quité las funciones. .resize() ya espera una función, así que simplemente hago todo dentro de esa función e inmediatamente llamo al .resize() para invocarla en la carga de la página inicial.

Otro cambio que realicé fue incrementar su bucle for hacia atrás, comenzando con el ancho de ancho más amplio posible (5), trabajando hasta el tamaño de ancho más pequeño posible (2).

Además, dentro de su bucle for, he creado j y k variables para que sea más fácil leer esas condiciones.

El cambio principal fue la instrucción if. Si estamos en la iteración de max_column y el ancho del contenedor es más ancho k, queremos establecer el ancho de la placa a k y saltar del bucle for, de lo contrario evaluaremos la declaración if original que tenía; de lo contrario, si estamos en el iteración min_column y el ancho del contenedor es menor que j, queremos establecer el ancho de la placa en j.

He probado esto en Chrome y funciona muy bien. Espero que esto te ayude.

$(document).ready(function() 
{  
    $(window).resize(function() 
    { 
     var item_width = 200, 
      item_height = 300, 
      gap = 20, 
      min_columns = 2, 
      max_columns = 5, 
      min_width = min_columns * (item_width + gap), 
      max_width = max_columns * (item_width + gap), 
      container_width = $(".display_container").width(), 
      $display_board = $("#display_board"), 
      $display_board_ol_li = $display_board.find("ol > li"); 

     //console.log("container width: " + container_width); 

     for (var i = max_columns; i >= min_columns; i--) 
     { 
      var j = i * (item_width + gap), 
       k = (i+1) * (item_width + gap); 

      //console.log("j: " + j); 
      //console.log("k: " + k); 
      //console.log("display_board width (before): " + $display_board.css("width")); 

      if (i === max_columns && container_width > k) 
      { 
       $display_board.css("width", max_width + "px"); 
       //console.log("display_board width (after): " + $display_board.css("width")); 
       break;     
      } 
      else if (container_width > j && container_width < k) 
      { 
       $display_board.css("width", j + "px"); 
       //console.log("display_board width (after): " + $display_board.css("width")); 
       break; 
      } 
      else if (i === min_columns && container_width < j) 
      { 
       $display_board.css("width", min_width + "px"); 
       //console.log("display_board width (after): " + $display_board.css("width")); 
      } 
     } 

     $display_board_ol_li.css({ 

      "width" : item_width + "px", 
      "height": item_height + "px", 
      "margin": gap/2 + "px" 

     }); 

    }).resize(); 

});​ 

Answer 2

algunos navegadores como Internet Explorer y Opera activar este evento con algunas limitaciones, este plugin se puede resolver el problema:

http://benalman.com/projects/jquery-resize-plugin/

Answer 3

que estaba teniendo un problema similar en un sitio sensible donde cada activo haría cambiar el tamaño y cambiar de forma adecuada, excepto para la presentación de diapositivas de la imagen. Esto solo sucedió en IE, y solo sucedió cuando se iniciaba en el punto de interrupción de la tableta, luego se presionaba el botón Maximizar y se ingresaba al punto de interrupción del escritorio.

lo que terminó de arreglar el problema estaba estrangulando el gatillo de cambio de tamaño utilizando este código a mano de Paul irlandés:

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

se puede ver su post completo sobre ella (desde 2009) aquí: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Esperanza eso ayuda a alguien por ahí.

Answer 4

var window_width_check_big = false, // flag true if window bigger than my_width 
window_width_check_small = false, // flag true if window smaller than my_width 
my_width = 1221; // Change to your width 

function get_window_size() { 
    if(window.innerWidth > my_width) { 
     window_width_check_big = true; 
    } 
    if(window.innerWidth < my_width) { 
     window_width_check_small = true; 
    } 
} 

get_window_size(); 

$(window).resize(function() { 

    if(window.innerWidth > my_width) { 
     window_width_check_big = true; 
    } 
    if(window.innerWidth < my_width) { 
     window_width_check_small = true; 
    } 
    if(window_width_check_small && window_width_check_big) { 
     window_width_check_big = false; 
     window_width_check_small = false; 
     get_window_size(); 
     // Start function that you need 
    } 
}); 

Answer 5

Esto me atrapó también y no sabía por qué, hasta que leí su publicación. Parece que tenías razón, la función se dispara antes de presionar Maximizar, así que para arreglar esto usé una pequeña demora.

$(window).resize(function() 
 
{ 
 
setTimeout(function() { 
 
    setDisplayBoardSize(); 
 
}, 100); 
 
});

Answer 6

El siguiente código funciona bien para mí, tanto en Chrome y EI11: (javascript y jQuery).

var mResizeTimer; 
function setWindowResizeEndEvent() { 

    $(window).on('resize', setTimerForResizeEnd); 
} 

function setTimerForResizeEnd() { 
    clearTimeout(mResizeTimer); 
    mResizeTimer = setTimeout(onResizeEnd, 100); 
} 

function onResizeEnd() { 
    $(window).off('resize', setTimerForResizeEnd); 
    $(window).resize(); 

    setWindowResizeEndEvent(); 
} 

Explicación: Estoy disparando el evento window.resize nativa, Después puso fin a un cambio de tamaño. Esto vuelve a activar el evento de cambio de tamaño después de maximizar la ventana finalizada.

Answer 7

El siguiente código funciona bien para mí tanto en Chrome como en IE11: (javascript y jQuery).

function setWindowResizeEndEvent() { 

    $(window).on('resize', setTimerForResizeEnd); 
} 

var mResizeTimer; 
function setTimerForResizeEnd() { 
    clearTimeout(mResizeTimer); 
    mResizeTimer = setTimeout(onResizeEnd, 100); 
} 

function onResizeEnd() { 
    $(window).off('resize', setTimerForResizeEnd); 
    $(window).resize(); 

    setWindowResizeEndEvent(); 
} 

Explicación: Estoy disparando el evento window.resize nativa, Después puso fin a un cambio de tamaño. Esto vuelve a activar el evento de cambio de tamaño después de maximizar la ventana finalizada.