web-dev-qa-db-fra.com

Détecter un changement de largeur de fenêtre mais pas un changement de hauteur

J'utilise la fonction .resize() pour détecter les événements de redimensionnement de fenêtre, mais cela détecte les changements de hauteur et de largeur.

Existe-t-il un moyen de détecter juste un changement de largeur et pas un changement de hauteur?

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

vous pouvez détecter les deux événements et simplement exécuter du code lorsqu'il s'agit d'un changement de largeur:

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

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

Et vous voudrez peut-être vérifier le rebond d'événement .

Le rebouncing impose qu'une fonction ne soit pas appelée à nouveau jusqu'à ce qu'un certain laps de temps se soit écoulé sans qu'elle soit appelée. Comme dans "exécutez cette fonction uniquement si 100 millisecondes se sont écoulées sans qu'elle soit appelée.


En savoir plus:

17
Taha Paksu

Même s'il existe déjà quelques réponses avec des solutions de travail, ce type de tâche est critique en termes de performances (l'événement de redimensionnement de fenêtre est déclenché plusieurs fois pendant qu'un utilisateur redimensionne la fenêtre), je vous suggère donc fortement de prendre soin des performances. Veuillez consulter le code optimisé ci-dessous:

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

De plus, vous pourriez être intéressé par la vérification des modèles Debounce/Throttle - ils améliorent considérablement les performances dans des cas comme celui-ci.

4
Anton

On peut également utiliser ce minuscule plugin jQuery pour cela: https://github.com/adjohnson916/jquery-resize-dimension

Maintient votre propre code plus lisible:

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

ou juste:

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

Le lien fourni par @nachtigall est cassé, j'ai donc trouvé cet autre avec la même bibliothèque, ce qui m'a aidé à résoudre mon problème: resize-dimension.js

Voici un exemple de solution: Importer une bibliothèque:

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

Créer un script:

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

La fonction ForResize() est déclenchée lorsque le navigateur est redimensionné, bien que dans ce cas, IE le gère mieux que les autres navigateurs, cependant, dans mon cas, cela a bien fonctionné pour les appareils mobiles, qui déclenchent les événements lors du défilement de la page, ce qui, selon le navigateur mobile, peut masquer la barre d'adresse, ce qui affecte la taille du navigateur. La mise en œuvre de cette bibliothèque a aidé!

J'ai utilisé le compteur/minuterie fourni ici et l'ai adapté à mes besoins. Voici les scripts critiques que j'ai dû créer:

<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>

Dans le cas où le lien de la bibliothèque est à nouveau rompu, voici le code de la même source (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