jQuery thay đổi kích thước() sử dụng trình duyệt nút

Question

phát huy tối đa Đây là mã của tôi rằng đám cháy bất cứ khi nào cửa sổ được thay đổi kích cỡ:

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

cháy tốt khi tôi thay đổi kích thước cửa sổ và chạy chức năng của tôi chỉ là tốt, như mong đợi.

Nếu tôi nhấn nút tối đa mặc dù nó không hoạt động chính xác.

Đây là setDisplayBoardSize() chức năng:

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

Tôi nghĩ vấn đề là khi trình duyệt tối đa hóa nút được nhấp vào nó sẽ phát sinh hàm mà đọc được chiều rộng .display_container trước thay đổi kích thước và sau đó thay đổi kích thước cửa sổ thành tối đa có nghĩa là display_board của tôi bị sai kích thước.

Nếu tôi đúng cách tôi có thể nhận được kích thước của phần tử .display_container sau cửa sổ đã đổi kích thước thành tối đa?

nên lưu ý tôi đã thử nghiệm điều này trong Chrome và Firefox

Cảm ơn

Answer 1

EDIT cho đề xuất sửa chữa:

Đây là working jsFiddle và đây là results only demo.

Như bạn có thể thấy, tôi hoàn toàn thừa nhận mã jQuery ban đầu của bạn. Tôi đã xóa mọi thứ khỏi Global cũng như đưa ra các chức năng. .resize() hy vọng một chức năng đã có, vì vậy tôi chỉ làm mọi thứ bên trong một chức năng đó và sau đó gọi ngay .resize() để gọi nó trên trang tải ban đầu.

Một thay đổi khác mà tôi đã thực hiện là tăng vòng lặp của bạn trở lại, bắt đầu với kích thước chiều rộng rộng nhất có thể cho phép (5), giảm kích thước chiều rộng nhỏ nhất có thể cho phép (2).

Ngoài ra, bên trong vòng lặp của bạn, tôi đã tạo các biến số j và k để giúp bạn dễ dàng đọc các điều kiện đó hơn.

Thay đổi chính là câu lệnh if. Nếu chúng ta đang lặp lại max_column và chiều rộng của vùng chứa rộng hơn k, chúng ta muốn đặt chiều rộng của bảng là k và nhảy ra khỏi vòng lặp, nếu không chúng ta đánh giá câu lệnh if ban đầu nếu không, nếu không chúng ta min_column iteration và chiều rộng của container nhỏ hơn j, chúng ta muốn thiết lập chiều rộng của board là j.

Tôi đã thử nghiệm tính năng này trong Chrome và nó hoạt động rất đẹp. Tôi hy vọng cái này sẽ giúp bạn.

$(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

một số trình duyệt như IE và Opera kích hoạt sự kiện này với một số hạn chế, plugin này có thể giải quyết vấn đề này:

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

Answer 3

Tôi đã có một vấn đề tương tự trên một trang web đáp ứng, nơi mọi tài sản sẽ thay đổi kích thước và thay đổi một cách thích hợp ngoại trừ trình chiếu hình ảnh. Điều này chỉ xảy ra trong IE, và nó chỉ xảy ra khi bạn sẽ bắt đầu tại điểm ngắt máy tính bảng, sau đó nhấn nút tối đa hóa và nhập breakpoint máy tính để bàn.

gì đã kết thúc sửa chữa các vấn đề đã được throttling thay đổi kích cỡ kích hoạt sử dụng mã tiện dụng này từ Paul Irish:

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

Bạn có thể xem bài đăng đầy đủ của ông về điều đó (từ năm 2009) ở đây: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Hope giúp ai đó ngoài kia.

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

Điều này đã làm tôi bực mình và không biết tại sao, cho đến khi tôi đọc bài đăng của bạn. Có vẻ như bạn đã đúng chức năng được bắn trước khi tôi nhấn tối đa hóa, do đó, để khắc phục điều này tôi sử dụng một sự chậm trễ litle.

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

Answer 6

Các mã sau hoạt động tốt đối với tôi trong cả Chrome và IE11: (javascript và 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(); 
} 

Giải thích: Tôi đang kích hoạt sự kiện window.resize gốc, Sau khi thay đổi kích thước đã kết thúc. Việc này kích hoạt lại sự kiện thay đổi kích thước sau khi tối đa hóa cửa sổ đã kết thúc.

Answer 7

Mã sau hoạt động tốt cho tôi trong cả Chrome và IE11: (javascript và 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(); 
} 

Giải thích: Tôi đang kích hoạt sự kiện window.resize gốc, Sau khi thay đổi kích thước đã kết thúc. Việc này kích hoạt lại sự kiện thay đổi kích thước sau khi tối đa hóa cửa sổ đã kết thúc.