창 크기 조정의 jQuery

다음 JQuery 코드가 있습니다.

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

유일한 문제는 브라우저가 처음로드 될 때만 작동한다는 것입니다 containerHeight. 창 크기를 조정할 때도 확인 하고 싶습니다 .

어떤 아이디어?

다음은 jQuery, javascript 및 CSS를 사용하여 크기 조정 이벤트를 처리하는 예입니다.
(크기 조정에 대한 스타일을 지정하는 경우 가장 좋은 방법은 CSS입니다 (미디어 쿼리))
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 */
    }
}

자바 스크립트

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) { /* ... */ }
});

크기 조정 코드가 자주 실행되지 않도록하려면 어떻게합니까?

이것은 크기 조정을 위해 바인딩 할 때 가장 먼저 눈에 띄는 문제입니다. 사용자가 브라우저의 크기를 수동으로 조정할 때 크기 조정 코드는 LOT이라고 불립니다.

크기 조정 코드의 호출 빈도를 제한하기 위해 밑줄 및 로우 대시 라이브러리 에서 디 바운스 또는 스로틀 방법을 사용할 수 있습니다 .

• debounce마지막 크기 조정 이벤트 후 크기 조정 코드 X 밀리 초 만 실행합니다. 이것은 사용자가 브라우저 크기 조정을 마친 후에 크기 조정 코드를 한 번만 호출하려는 경우에 이상적입니다. 모든 크기 조정 이벤트를 업데이트하는 데 비용이 많이 드는 그래프, 차트 및 레이아웃을 업데이트하는 데 유용합니다.
• throttleX 밀리 초마다 크기 조정 코드 만 실행합니다. 코드가 얼마나 자주 호출되는지 "스로틀"합니다. 크기 조정 이벤트와 함께 자주 사용되지는 않지만 알아 둘 가치가 있습니다.

밑줄이나 낮은 대시가없는 경우 비슷한 솔루션을 직접 구현할 수 있습니다. JavaScript / JQuery : $ (window) .resize 크기 조정이 완료된 후 실행하는 방법은 무엇입니까?

자바 스크립트를 함수로 옮긴 다음 해당 함수를 창 크기 조정에 바인딩하십시오.

$(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에는 .resize () 창에 첨부 할 수있는 resize 이벤트 핸들러가 있습니다 . 따라서 입력 $(window).resize(function(){/* YOUR CODE HERE */})하면 창 크기를 조정할 때마다 코드가 실행됩니다.

따라서 원하는 것은 첫 번째 페이지로드 후 및 창 크기를 조정할 때마다 코드를 실행하는 것입니다. 따라서 코드를 자체 함수로 가져 와서 두 경우 모두 해당 함수를 실행해야합니다.

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

참조 : 브라우저 간 크기 조정 이벤트-JavaScript / jQuery

이 솔루션을 사용해보십시오. 페이지가로드 된 후 사전 정의 된 창 크기 조정 중에 만 실행 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;
    });
});

익명 함수에 이름을 지정하고 다음을 수행하십시오.

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

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

그것도 사용할 수 있습니다

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

그러면 크기 조정 핸들러가 창 크기 조정 및 문서 준비시 트리거됩니다. 물론 .trigger('resize')페이지로드를 대신 실행 하려는 경우 문서 준비 핸들러 외부에 크기 조정 핸들러를 연결할 수 있습니다 .

업데이트 : 다른 타사 라이브러리를 사용하지 않으려는 경우 다른 옵션이 있습니다.

이 기술은 대상 요소에 특정 클래스를 추가하므로 CSS를 통해서만 스타일을 제어하고 인라인 스타일을 피할 수 있다는 이점이 있습니다.

또한 실제 임계 값 포인트가 트리거 될 때만 클래스가 추가되거나 제거되도록하며, 각각의 크기가 조정되지는 않습니다. 그것은에서 실행됩니다 하나 : 만 임계점 높이 각 지역 내에서 819 또는 그 <로 = 818>에서 변경 반대가 아니라 여러 번. 너비의 변경과 관련이 없습니다 .

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

예를 들어, CSS 규칙 중 일부로 다음이있을 수 있습니다.

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

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

이것을 사용하십시오 :

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

브라우저 크기를 조정할 때 코드를 resize사용하여 바인딩 .resize()하고 실행할 수 있습니다 . 또한 CSS 값이 단순히 새 값을 설정하지 않고 이전 값과 새 값을 토글하도록 명령문에 else조건을 추가해야합니다 if.