[JQUERY] 창 크기 조정에 jQuery를

창 크기 조정에 jQuery를

해결법

1. ---

   1.여기에 크기 조정 이벤트를 처리하기 위해 jQuery를, 자바 스크립트와 CSS를 사용하여 예입니다. (CSS 만약 당신이 단지 크기 조정에서 일을 stylizing하는 경우 가장 좋은 건 (미디어 쿼리)) http://jsfiddle.net/CoryDanielson/LAF4G/

   여기에 크기 조정 이벤트를 처리하기 위해 jQuery를, 자바 스크립트와 CSS를 사용하여 예입니다. (CSS 만약 당신이 단지 크기 조정에서 일을 stylizing하는 경우 가장 좋은 건 (미디어 쿼리)) http://jsfiddle.net/CoryDanielson/LAF4G/

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

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

   이 크기 조정에 바인딩 할 때 알 수 있습니다 첫 번째 문제입니다. 크기 조정 코드는 사용자가 수동으로 브라우저의 크기를 조정하는 LOT 호출되는, 꽤는 janky을 느낄 수 있습니다.

   당신의 크기 조정 코드를 호출 빈도를 제한하려면 디 바운스 또는 밑줄 & lowdash 라이브러리에서 스로틀 방법을 사용할 수 있습니다.

   당신은 밑줄 또는 lodash이없는 경우 유사한 솔루션을 직접 구현할 수 있습니다 : 자바 스크립트 / JQuery와 : $ (창) 크기 조정이 완료된 후 어떻게 화재 .resize?

2. ---

   2.함수 다음 바인드 창 크기를 조정하려면 해당 함수로 자바 스크립트를 이동합니다.

   함수 다음 바인드 창 크기를 조정하려면 해당 함수로 자바 스크립트를 이동합니다.

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

3. ---

   3.jQuery를 사용하면 .resize, 창문에 부착 할 수있는 크기 조정 이벤트 핸들러가 (). 당신이 $ (창) .resize를 넣어한다면, ({여기 * / / * 코드를} () 함수를) 다음 코드는 창 크기를 조정할 때마다 실행됩니다.

   jQuery를 사용하면 .resize, 창문에 부착 할 수있는 크기 조정 이벤트 핸들러가 (). 당신이 $ (창) .resize를 넣어한다면, ({여기 * / / * 코드를} () 함수를) 다음 코드는 창 크기를 조정할 때마다 실행됩니다.

   그럼, 당신이 원하는 것은 윈도우의 크기가 변경 될 때마다 첫 페이지로드 후에 코드를 실행하는 것입니다. 따라서 당신은 자신의 기능에 코드를 뽑아 두 경우 모두에 해당 기능을 실행해야합니다.

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

   참조 : 크로스 브라우저 창 크기 조정 이벤트 - 자바 스크립트 / jQuery를

4. ---

   4.이 솔루션을 사용해보십시오. 만 페이지가로드되면 발사하고 미리 정의 된 resizeDelay에서 창 크기 조정시.

   이 솔루션을 사용해보십시오. 만 페이지가로드되면 발사하고 미리 정의 된 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;
       });
   });
   

5. ---

   5.다음, 당신의 익명 함수의 이름을 지정합니다 :

   다음, 당신의 익명 함수의 이름을 지정합니다 :

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

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

6. ---

   6.너무 사용할 수 있습니다

   너무 사용할 수 있습니다

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

7. ---

   7.

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

   이 창 크기 조정에 준비 문서에 트리거로 크기 조정 핸들러의 원인이됩니다. 당신이 .trigger ( '크기 조정') 대신 페이지로드 실행하려면 물론, 당신은 문서 준비 핸들러의 당신의 크기 조정 핸들러 외부를 첨부 할 수 있습니다.

   업데이트 : 당신이 다른 타사 라이브러리의 사용을하지 않으려면 여기에 또 다른 옵션이 있습니다.

   당신은 단지 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;
   }
   

8. ---

   8.이 옵션을 사용합니다 :

   이 옵션을 사용합니다 :

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

9. ---

   9.당신은 .resize ()를 사용하여 크기 조정을 결합하여 브라우저 크기를 조정할 때 코드를 실행할 수 있습니다. 당신은 또한 귀하의 if 문에 다른 조건을 추가 할 필요가 당신의 CSS의 이전 및 새로운 토글 값보다는 새로운 설정.

   당신은 .resize ()를 사용하여 크기 조정을 결합하여 브라우저 크기를 조정할 때 코드를 실행할 수 있습니다. 당신은 또한 귀하의 if 문에 다른 조건을 추가 할 필요가 당신의 CSS의 이전 및 새로운 토글 값보다는 새로운 설정.

from https://stackoverflow.com/questions/9828831/jquery-on-window-resize by cc-by-sa and MIT license