ウィンドウのサイズ変更時の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 */
    }
}

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

サイズ変更コードが頻繁に実行されないようにするにはどうすればよいですか？

これは、サイズ変更にバインドするときに気付く最初の問題です。サイズ変更コードは、ユーザーが手動でブラウザーのサイズを変更しているときにLOTと呼ばれ、かなりぎこちない感じになります。

サイズ変更コードが呼び出される頻度を制限するには、アンダースコアおよびローダッシュライブラリのデバウンスまたはスロットルメソッドを使用できます。

• debounce最後のサイズ変更イベント後、ミリ秒数だけサイズ変更コードXを実行します。これは、ユーザーがブラウザーのサイズ変更を完了した後で、サイズ変更コードを1回だけ呼び出す場合に最適です。すべてのサイズ変更イベントを更新するのにコストがかかる可能性があるグラフ、チャート、レイアウトを更新するのに適しています。
• throttleXミリ秒ごとにサイズ変更コードのみを実行します。コードが呼び出される頻度を「抑制」します。これは、サイズ変更イベントではあまり使用されませんが、注意する価値があります。

下線またはローダッシュがない場合は、JavaScript / JQuery：$（window）.resize同様のソリューションを自分で実装でき ます。

JavaScriptを関数に移動し、その関数をウィンドウのサイズ変更にバインドします。

$(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（）があります。だから、入れたら$(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のみを介してスタイル設定を制御できるという利点があります（インラインのスタイル設定を回避できます）。

また、実際のしきい値ポイントがトリガーされたときにのみクラスが追加または削除され、サイズ変更のたびにクラスが追加または削除されないようにします。1つのしきい値ポイントでのみ発火します。高さが<= 818から> 819に、またはその逆に変化し、各領域内で複数回変化しない場合です。幅の変更は関係ありません。

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ステートメントに条件を追加する必要もあります。