plantillas - jQuery-Detecta un cambio de ancho de ventana pero no un cambio de altura

plantillas divi

Question

Estoy usando la función .resize() para detectar eventos de tamaño de la ventana, pero esto detecta los cambios de altura y anchura.

¿Hay alguna forma de detectar solo un cambio de ancho y no un cambio de altura?

Answer 1

Aunque ya hay un par de respuestas con soluciones que funcionan, este tipo de tarea es crítica para el rendimiento (el evento de cambio de tamaño de la ventana se activa muchas veces mientras el usuario está cambiando el tamaño de la ventana), por lo que le sugiero encarecidamente que se encargue del rendimiento. Por favor, eche un vistazo al código optimizado a continuación:

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

Además, es posible que le interese comprobar los patrones de rebote / aceleración : mejoran enormemente el rendimiento en casos como este.

Answer 2

El enlace proporcionado por @nachtigall está roto, así que encontré este otro con la misma biblioteca, lo que me ayudó a resolver mi problema: resize-dimension.js

Ejemplo de solución es el siguiente: Importar biblioteca:

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

Crear guión:

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

La función ForResize() se ForResize() cuando se ForResize() el tamaño del navegador, aunque en este caso, IE lo maneja mejor que otros navegadores, sin embargo, en mi caso, funcionó bien para dispositivos móviles, que activaban los eventos al desplazarse por la página, que dependiendo del navegador móvil, puede ocultar la barra de direcciones, lo que afecta el tamaño del navegador. ¡Implementar esa biblioteca ayudó!

Usé el contador / temporizador que se proporciona here y lo modifiqué según mis necesidades. Los siguientes son los scripts críticos que tuve que crear:

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

En caso de que el enlace de la biblioteca se rompa nuevamente, aquí está el código de la misma fuente (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;

}));

Answer 3

También se puede usar este pequeño complemento de jQuery para esto: https://github.com/adjohnson916/jquery-resize-dimension

Mantiene su propio código más legible:

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

o solo:

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

Answer 4

puede detectar ambos eventos y simplemente ejecutar código cuando se trata de un cambio de ancho:

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

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

Y es posible que desee comprobar el evento de debouncing .

El anuncio hace que no se vuelva a llamar a una función hasta que haya transcurrido cierto tiempo sin que se llame. Como en "ejecutar esta función solo si 100 milisegundos han pasado sin que se llame.

Lee mas:

• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://davidwalsh.name/javascript-debounce-function

Answer 5

var width = $(window).width();
$(window).on(''resize'', function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
   }
});