web-dev-qa-db-ja.com

ウィンドウの幅の変化を検出しますが、高さの変化は検出しません

ウィンドウのサイズ変更イベントを検出するために.resize()関数を使用していますが、これは高さと幅の両方の変化を検出します。

幅の変更のみを検出し、高さの変更を検出する方法はありますか？

jqueryresponsive-designresizejquery-events
34
shrewdbeans
var width = $(window).width();
$(window).on('resize', function() {
  if ($(this).width() != width) {
    width = $(this).width();
    console.log(width);
  }
});
70
thecodeparadox

両方のイベントを検出し、幅が変更されたときにコードを実行することができます。

var lastWidth = $(window).width();

$(window).resize(function(){
   if($(window).width()!=lastWidth){
      //execute code here.
      lastWidth = $(window).width();
   }
})

また、イベントのデバウンスを確認することもできます。

デバウンスは、呼び出されずに一定の時間が経過するまで関数が再度呼び出されないように強制します。 「呼び出されずに100ミリ秒が経過した場合にのみ、この関数を実行します。


詳細：

17
Taha Paksu

実用的なソリューションにはすでにいくつかの答えがありますが、この種のタスクはパフォーマンスが重要です（ユーザーがウィンドウのサイズを変更しているときにウィンドウサイズ変更イベントが何度もトリガーされるため）。パフォーマンスに注意することを強くお勧めします。以下の最適化されたコードをご覧ください。

/* Do not waste time by creating jQuery object from window multiple times.
 * Do it just once and store it in a variable. */
var $window = $(window);
var lastWindowWidth = $window.width();

$window.resize(function () {
    /* Do not calculate the new window width twice.
     * Do it just once and store it in a variable. */
    var windowWidth = $window.width();

    /* Use !== operator instead of !=. */
    if (lastWindowWidth !== windowWidth) {
        // EXECUTE YOUR CODE HERE
        lastWindowWidth = windowWidth;
    }
});

さらに、 Debounce/Throttle パターンを確認することに興味があるかもしれません-このような場合、パフォーマンスが大幅に向上します。

4
Anton

このために、この小さなjQueryプラグインを使用することもできます。 https://github.com/adjohnson916/jquery-resize-dimension

独自のコードをより読みやすくします。

ResizeDimension.bind('width');
$(window).on('resize-width', function () {
  console.log('resize-width event');
});

あるいは単に：

$(window).resizeDimension('width', function () {
  console.log('resize-width event');
});
2
nachtigall

@nachtigallが提供するリンクが壊れているため、同じライブラリを使用してこれを見つけました。これは問題の解決に役立ちました。 resize-dimension.js

ソリューションの例は次のとおりです。インポートライブラリ：

_<script src="./resize-dimension.js"></script>
_

スクリプトを作成：

_<script type="text/javascript">
        ResizeDimension.bind('width');
        $(window).on('resize-width', function () {
            //alert(window);
            ForResize();
        });
 </script>
_

ブラウザのサイズが変更されると、関数ForResize()が起動しますが、この場合、IEは他のブラウザよりも適切に処理しますが、私の場合は、ページをスクロールするときにイベントを発生させるモバイルデバイス、モバイルブラウザによってはブラウザのサイズに影響するアドレスバーを非表示にすることができるモバイルデバイス。

here で提供されるカウンター/タイマーを使用し、必要に応じて変更しました。以下は、私が作成しなければならなかった重要なスクリプトです。

_<script type="text/javascript">
    function RefreshWidth() {
        var _hcontainer = $("#chart_container").width();
        var _hcontainerInt = parseInt(_hcontainer, 10);
        $("#txChartSize").val(_hcontainerInt);
        $("#txChartSize_1").val(_hcontainerInt);
        $("#textWidthFire").val(_hcontainerInt);
        DetectResizeChange();
    }
</script>

<script type="text/javascript">
    var myTimer; //also in C#
    var c = 0;
    //these functions are needed in order to fire RefreshWidth() so it will fire DetectResizeChange() after browser changes size
    function clock() {
        //RefreshWidth();
        myTimer = setInterval(myClock, 1000);
        c = 3;

        function myClock() {
            document.getElementById("loadMsg").innerHTML = "Processing chart, please wait...";
            --c; //--->>counts in reverse to resize
            if (c == 0) {
                RefreshWidth(); //--->>gives enough time for the width value to be refreshed in the textbox
                clearInterval(myTimer);
            }

        }
    }

    //detects size change on the browser
    function DetectResizeChange() {
        var _NoDataAvailable = $('#txNoDataAvailable').val();

        if (_NoDataAvailable != 'NoData') {

            var refLine = $("#refLine").width();

            var _hcontainer = $("#chart_container").width();
            var _width = _hcontainer;

            var _hcontainerInt = parseInt(_hcontainer, 10);

            $("#txChartSize").val(_hcontainerInt);
            $("#textWidthFire").val(_hcontainerInt);
            $('#msgAdjustView').show();

            $("#msgAdjustView").text("Loading data and adjusting chart view, please wait...");
            $('.modal').show();

            var checkOption = document.getElementById('lbViewingData').value;
            var button;
            var btnWidth;
            btnWidth = document.getElementById('btnStopTimer');
            if (checkOption == 'Option 1') {
                button = document.getElementById('firstTab');
            } else if (checkOption == 'Option 2') {
                button = document.getElementById('secondTab');
            } else if (checkOption == 'Option 3') {
                button = document.getElementById('thirdTab');
            }
            button.click();
        }
    }
</script>
        <script type="text/javascript">
            function ForResize() {
                var _NoDataAvailable = $('#txNoDataAvailable').val();

                if (_NoDataAvailable != 'NoData') {
                    clock();
                    document.getElementById('loadMsg').innerHTML = 'Resizing chart in progress...';
                }
            }

</script>
_

ライブラリのリンクが再び壊れた場合、同じソース（resize-dimension.js）のコードを次に示します。

_(function (root, factory) {
  var moduleName = 'ResizeDimension';
  if (typeof define === 'function' && define.AMD) {
    define(['jquery'], function ($) {
        return (root[moduleName] = factory($));
    });
  } else {
    root[moduleName] = factory(root.$);
  }
}(this, function ($) {

  var $window = $(window);

  var ResizeDimension = function ($el, dimension, handler, options) {

    if (! (this instanceof ResizeDimension)) {
      return new ResizeDimension($el, dimension, handler, options);
    }

    this.$el = $el;

    this.init(dimension, handler, options);

    return this;
  };

  /**
   * Stub - overridden on #init()
   */
  ResizeDimension.prototype.onResize = function () {};

  ResizeDimension.bound = {};

  ResizeDimension.bind = function (dimension, options) {
    if (ResizeDimension.bound[dimension]) return;
    ResizeDimension.bound[dimension] = true;
    $window.resizeDimension(dimension, function () {
      $window.trigger('resize-' + dimension);
    }, options);
  };

  ResizeDimension.prototype.init = function (dimension, handler, options) {

    if (typeof dimension === 'object') {
      options = dimension;
      dimension = options.dimension;
      handler = options.handler;
    }

    options = $.extend({}, options);
    options.dimension = dimension;
    options.handler = handler;

    this.options = options;

    if ($.isFunction(options.changed)) {
      this.changed = options.changed;
    }

    this.dimension = this.normalize(options.dimension);
    this.handler = options.handler;
    this.previousValue = this.value();

    var proxied = $.proxy(this.handle, this);
    if (options.throttler) {
      this.onResize = options.throttler(proxied);
    }
    else {
      this.onResize = proxied;
    }
  };

  ResizeDimension.prototype.normalize = function (dimension) {
    return dimension;
  };
  ResizeDimension.prototype.changed = function (previous, current) {
    return previous !== current;
  };

  ResizeDimension.prototype.value = function (e) {
    return this.$el[this.dimension]();
  };

  ResizeDimension.prototype.handle = function (e) {
    var currentValue = this.value();
    if (this.changed(this.previousValue, currentValue)) {
      this.previousValue = currentValue;
      return this.handler.call(this.$el, e);
    }
  };

  var $resizeDimension = function () {
    var args = Array.prototype.slice.call(arguments);
    return this.each( function() {
      var $el = $(this);
      args = [$el].concat(args);
      var instance = ResizeDimension.apply(null, args);
      $el.on('resize', $.proxy(instance.onResize, instance));
    });
  };

  $.fn.resizeDimension = $resizeDimension;

  return ResizeDimension;

}));
_
0
Mr. Munoz