web-dev-qa-db-ja.com

ウィンドウサイズ変更時の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もチェックしたいですか。

何か案は？

jqueryhtmlcss
169
ediblecode

これは、サイズ変更イベントを処理するために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は、LASTサイズ変更イベントからミリ秒後にサイズ変更コードXを実行するだけです。これは、ユーザーがブラウザのサイズを変更した後で、サイズ変更コードを1回だけ呼び出す場合に理想的です。グラフ、チャート、およびレイアウトを更新するのに適しています。サイズ変更イベントを1つずつ更新するのはコストがかかる場合があります。
  • throttleはXサイズのミリ秒ごとにあなたのリサイズコードを実行するだけです。コードが呼び出される頻度が「調整」されます。これはサイズ変更イベントではあまり使われていませんが、知っておく価値があります。

アンダースコアやローダッシュがない場合は、自分で同様の解決策を実装できます。 JavaScript/JQuery：$（window）.resizeサイズ変更が完了した後で起動する方法？

314
Cory Danielson

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

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

10
Adam

この解決策を試してください。ページがロードされてからウィンドウのサイズが変更されると、事前に定義された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;
    });
});
8
vitro

あなたの匿名関数に名前を付けてください。

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

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

4
gpasci

それも使えます

        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();
            });
3
hdf54d56
function myResizeFunction() {
  ...
}

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

これにより、サイズ変更ハンドラはウィンドウのサイズ変更時およびドキュメントの準備完了時にトリガされます。もちろん、ページロード時に.trigger('resize')を実行したい場合は、ドキュメントの準備完了ハンドラの外側にリサイズハンドラを添付することができます。

UPDATE：他のサードパーティ製ライブラリを利用したくない場合は、これが別の選択肢です。

この方法では、ターゲット要素に特定のクラスが追加されるため、CSSを介してのみスタイル設定を制御できます（インラインスタイル設定を回避できます）。

また、実際のしきい値ポイントがトリガーされたときにクラスが追加または削除され、サイズ変更ごとにクラスが追加または削除されることはありません。それはonethreshold pointでのみ発生します：heightが<= 818から> 819またはその逆に変化した場合各地域内で複数回ではなく、その逆も可能です。widthの変更には関係ありません。

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;
}
3
WynandB

これを使って：

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

.resize() を使用してresizeをバインドし、ブラウザのサイズが変更されたときにコードを実行することができます。また、単に新しい値を設定するのではなく、css値が古い値と新しい値を切り替えるように、elseステートメントにif条件を追加する必要があります。

1
Billy Moon