jQuery thay đổi kích thước cửa sổ

Tôi có mã JQuery sau đây:

$(document).ready(function () {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

Vấn đề duy nhất là nó chỉ hoạt động khi trình duyệt tải lần đầu tiên, tôi cũng muốn containerHeightđược kiểm tra khi chúng thay đổi kích thước cửa sổ?

Có ý kiến ​​gì không?

Đây là một ví dụ sử dụng jQuery, javascript và css để xử lý thay đổi kích thước các sự kiện.
(css nếu bạn đặt cược tốt nhất nếu bạn chỉ cách điệu mọi thứ khi thay đổi kích thước (truy vấn phương tiện))
http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
          bottom: 3px;
          left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

Làm cách nào để ngăn mã thay đổi kích thước của tôi thực thi thường xuyên như vậy!?

Đây là vấn đề đầu tiên bạn sẽ nhận thấy khi ràng buộc thay đổi kích thước. Mã thay đổi kích thước được gọi là RẤT NHIỀU khi người dùng thay đổi kích thước trình duyệt theo cách thủ công và có thể cảm thấy khá buồn cười.

Để hạn chế mức độ thường xuyên đang thay đổi kích thước của bạn được gọi, bạn có thể sử dụng debounce hoặc ga phương pháp từ gạch & lowdash thư viện.

• debouncesẽ chỉ thực hiện thay đổi kích thước mã X của bạn số mili giây sau sự kiện thay đổi kích thước LAST. Điều này lý tưởng khi bạn chỉ muốn gọi mã thay đổi kích thước của mình một lần, sau khi người dùng hoàn tất thay đổi kích thước trình duyệt. Thật tốt khi cập nhật biểu đồ, biểu đồ và bố cục có thể tốn kém để cập nhật mọi sự kiện thay đổi kích thước.
• throttlesẽ chỉ thực thi mã thay đổi kích thước của bạn mỗi X số mili giây. Nó "điều chỉnh" tần suất mã được gọi. Điều này không được sử dụng thường xuyên với các sự kiện thay đổi kích thước, nhưng nó đáng để nhận biết.

Nếu bạn không có dấu gạch dưới hoặc dấu gạch dưới, bạn có thể tự thực hiện một giải pháp tương tự: JavaScript / JQuery: $ (cửa sổ). Làm thế nào để kích hoạt SAU khi thay đổi kích thước?

Di chuyển javascript của bạn vào một chức năng và sau đó liên kết chức năng đó với thay đổi kích thước cửa sổ.

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});
function updateContainer() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
}

jQuery có một trình xử lý sự kiện thay đổi kích thước mà bạn có thể đính kèm vào cửa sổ, .resize () . Vì vậy, nếu bạn đặt $(window).resize(function(){/* YOUR CODE HERE */})thì mã của bạn sẽ được chạy mỗi khi cửa sổ được thay đổi kích thước.

Vì vậy, những gì bạn muốn là chạy mã sau khi tải trang đầu tiên và bất cứ khi nào cửa sổ được thay đổi kích thước. Do đó, bạn nên kéo mã vào hàm riêng của nó và chạy hàm đó trong cả hai trường hợp.

// This function positions the footer based on window size
function positionFooter(){
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    else {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } 
}

$(document).ready(function () {
    positionFooter();//run when page first loads
});

$(window).resize(function () {
    positionFooter();//run on every window resize
});

Xem: Sự kiện thay đổi kích thước cửa sổ trình duyệt chéo - JavaScript / jQuery

Hãy thử giải pháp này. Chỉ kích hoạt một khi trang tải và sau đó trong khi thay đổi kích thước cửa sổ được xác định trước resizeDelay.

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

Đặt tên hàm ẩn danh của bạn, sau đó:

$(window).on("resize", doResize);

http://api.jquery.com/carget/events/

cũng có thể sử dụng nó

        function getWindowSize()
            {
                var fontSize = parseInt($("body").css("fontSize"), 10);
                var h = ($(window).height() / fontSize).toFixed(4);
                var w = ($(window).width() / fontSize).toFixed(4);              
                var size = {
                      "height": h
                     ,"width": w
                };
                return size;
            }
        function startResizeObserver()
            {
                //---------------------
                var colFunc = {
                     "f10" : function(){ alert(10); }
                    ,"f50" : function(){ alert(50); }
                    ,"f100" : function(){ alert(100); }
                    ,"f500" : function(){ alert(500); }
                    ,"f1000" : function(){ alert(1000);}
                };
                //---------------------
                $(window).resize(function() {
                    var sz = getWindowSize();
                    if(sz.width > 10){colFunc['f10']();}
                    if(sz.width > 50){colFunc['f50']();}
                    if(sz.width > 100){colFunc['f100']();}
                    if(sz.width > 500){colFunc['f500']();}
                    if(sz.width > 1000){colFunc['f1000']();}
                });
            }
        $(document).ready(function() 
            {
                startResizeObserver();
            });

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

Điều này sẽ khiến trình xử lý thay đổi kích thước của bạn kích hoạt trên thay đổi kích thước cửa sổ và trên tài liệu đã sẵn sàng. Tất nhiên, bạn có thể đính kèm trình xử lý thay đổi kích thước của mình bên ngoài trình xử lý sẵn sàng của tài liệu nếu bạn muốn.trigger('resize') chạy trên tải trang thay thế.

CẬP NHẬT : Đây là một tùy chọn khác nếu bạn không muốn sử dụng bất kỳ thư viện bên thứ ba nào khác.

Kỹ thuật này thêm một lớp cụ thể vào thành phần mục tiêu của bạn để bạn có lợi thế chỉ kiểm soát kiểu dáng thông qua CSS (và tránh kiểu dáng nội tuyến).

Nó cũng đảm bảo rằng lớp chỉ được thêm hoặc xóa khi điểm ngưỡng thực tế được kích hoạt chứ không phải trên mỗi và thay đổi kích thước. Nó sẽ bắn ở một điểm duy nhất: khi chiều cao thay đổi từ <= 818 thành> 819 hoặc ngược lại và không nhiều lần trong mỗi khu vực. Nó không liên quan đến bất kỳ thay đổi về chiều rộng .

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

Ví dụ: bạn có thể có một số quy tắc CSS sau đây:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

Dùng cái này:

window.onresize = function(event) {
    ...
}

Bạn có thể liên kết resizebằng cách sử dụng .resize()và chạy mã của mình khi trình duyệt được thay đổi kích thước. Bạn cũng cần thêm một elseđiều kiện vào ifcâu lệnh của mình để các giá trị css của bạn chuyển đổi cái cũ và cái mới, thay vì chỉ đặt cái mới.