it-swarm.com.ru

Как определить изменение размера DIV?

У меня есть следующий образец HTML, есть DIV, который имеет ширину 100%. Он содержит несколько элементов. При выполнении изменения размера окон внутренние элементы могут быть переставлены, и размер элемента div может измениться. Я спрашиваю, возможно ли перехватить событие изменения размера div? и как это сделать? В настоящее время я связываю функцию обратного вызова с событием изменения размера jQuery на целевом DIV, однако консольный журнал не выводится, см. Ниже:

Before Resizeenter image description here

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>
273
William Choi

Существует очень эффективный метод определения размера элемента.

http://marcj.github.io/css-element-queries/

Эта библиотека имеет класс ResizeSensor, который можно использовать для обнаружения изменения размера. 
Он использует подход, основанный на событиях, поэтому он чертовски быстр и не тратит время процессора.

Пример:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Пожалуйста, не используйте плагин jQuery onresize, так как он использует цикл setTimeout() для проверки изменений. 
ЭТО IS НЕВЕРОЯТНО МЕДЛЕННО И НЕ ТОЧНО.

Раскрытие информации: я напрямую связан с этой библиотекой.

228
Marc J. Schmidt

Новый стандарт для этого - API Resize Observer, доступный в Chrome 64.

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

Resize Observer

Spec: https://wicg.github.io/ResizeObserver

Polyfills: https://github.com/WICG/ResizeObserver/issues/3

Firefox Issue: https://bugzil.la/1272409

Safari Issue: http://wkb.ug/157743

Текущая поддержка: http://caniuse.com/#feat=resizeobserver

127
Daniel Herr

Вы должны привязать событие resize к объекту window, а не к универсальному html-элементу.

Затем вы можете использовать это:

$(window).resize(function() {
    ...
});

и в функции обратного вызова вы можете проверить новую ширину вашего вызова div

$('.a-selector').width();

Итак, ответ на ваш вопрос - нет , вы не можете связать событие resize с div.

36
Alessandro Vendruscolo

В долгосрочной перспективе вы сможете использовать ResizeObserver .

new ResizeObserver(callback).observe(element);

К сожалению, в настоящее время он не поддерживается по умолчанию во многих браузерах.

В то же время, вы можете использовать функцию, как показано ниже. Так как большинство изменений размера элемента будет происходить из изменения размера окна или из-за изменения чего-либо в DOM. Вы можете прослушивать изменение размера окна с помощью события resize окна и прослушивать изменения DOM, используя MutationObserver .

Вот пример функции, которая будет вызывать вас, когда размер предоставленного элемента изменяется в результате любого из этих событий:

var onResize = function(element, callback) {
  if (!onResize.watchedElementData) {
    // First time we are called, create a list of watched elements
    // and hook up the event listeners.
    onResize.watchedElementData = [];

    var checkForChanges = function() {
      onResize.watchedElementData.forEach(function(data) {
        if (data.element.offsetWidth !== data.offsetWidth ||
            data.element.offsetHeight !== data.offsetHeight) {
          data.offsetWidth = data.element.offsetWidth;
          data.offsetHeight = data.element.offsetHeight;
          data.callback();
        }
      });
    };

    // Listen to the window's size changes
    window.addEventListener('resize', checkForChanges);

    // Listen to changes on the elements in the page that affect layout 
    var observer = new MutationObserver(checkForChanges);
    observer.observe(document.body, { 
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true 
    });
  }

  // Save the element we are watching
  onResize.watchedElementData.Push({
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  });
};
22
nkron

Лучшим решением было бы использовать так называемые Element Queries. Тем не менее, они не являются стандартными, никакой спецификации не существует - и единственный вариант - использовать одну из доступных полифильмов/библиотек, если вы хотите пойти по этому пути.

Идея, лежащая в основе запросов элементов, состоит в том, чтобы позволить определенному контейнеру на странице реагировать на предоставленное ему пространство. Это позволит записать компонент один раз, а затем поместить его в любое место на странице, в то время как он будет корректировать его содержимое в соответствии с его текущим размером. Независимо от размера окна. Это первое различие, которое мы видим между запросами элементов и медиазапросами. Все надеются, что в какой-то момент будет создана спецификация, которая стандартизирует запросы элементов (или что-то, что достигает той же цели) и сделает их родными, чистыми, простыми и надежными. Большинство людей согласны с тем, что медиа-запросы довольно ограничены и не помогают в модульном дизайне и истинной отзывчивости.

Существует несколько полифильмов/библиотек, которые решают проблему по-разному (хотя их можно назвать обходными решениями вместо решений):

Я видел другие решения подобных проблем. Обычно они используют таймеры или размер окна/окна просмотра под капотом, что не является реальным решением. Кроме того, я думаю, что в идеале это должно решаться в основном в CSS, а не в javascript или html. 

14
Stan

Я нашел эту библиотеку работать, когда решение MarcJ не:

https://github.com/sdecima/javascript-detect-element-resize

Он очень легкий и обнаруживает даже естественные изменения размеров с помощью CSS или просто загрузки/рендеринга HTML.

Пример кода (взят по ссылке):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>
14
joshcomley

Посмотрите на это http://benalman.com/code/projects/jquery-resize/examples/resize/

У него есть различные примеры. Попробуйте изменить размер вашего окна и посмотрите, как изменяются элементы внутри элементов контейнера.

Пример с js fiddle, чтобы объяснить, как заставить это работать.
Посмотрите на эту скрипку http://jsfiddle.net/sgsqJ/4/

При этом событие resize () привязывается к элементам, имеющим класс «test», а также к объекту окна И при вызове resize объекта окна вызывается $ ('. Test'). Resize ().

например.

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});
14
Bharat Patil

ResizeSensor.js является частью огромной библиотеки, но я сократил ее функциональность до THIS:

function ResizeSensor(element, callback)
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    function setScroll()
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();

    let currentWidth = size.width;
    let currentHeight = size.height;

    let onScroll = function()
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth != currentWidth || newHeight != currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);
};

Как это использовать:

let container = document.querySelector(".container");
new ResizeSensor(container, function()
{
    console.log("dimension changed:", container.clientWidth, container.clientHeight);
});
13
Martin Wantke

Я НЕ РЕКОМЕНДУЮ setTimeout() взломать, так как это замедляет работу! Вместо этого вы можете использовать DOM наблюдатели мутации для прослушивания изменения размера Div.

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

Вот скрипка
Попробуйте изменить размер div.


Вы можете дополнительно обернуть ваш метод в метод debounce для повышения эффективности. debounce будет запускать ваш метод каждые x миллисекунд вместо того, чтобы вызывать каждую миллисекунду при изменении размера DIV.

12
JerryGoyal

Только объект окна генерирует событие «изменить размер». Единственный известный мне способ сделать то, что вы хотите, - запустить интервальный таймер, который периодически проверяет размер.

7
Pointy

Вы можете использовать iframe или object, используя contentWindow или contentDocument при изменении размера. Без setInterval или setTimeout

Шаги:

  1. Установите позицию элемента на relative
  2. Добавить внутри прозрачного абсолютного скрытого IFRAME
  3. Прослушивание события IFRAME.contentWindow - onresize

Пример HTML:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

Javascript:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

Пример выполнения

JsFiddle: https://jsfiddle.net/qq8p470d/


Узнать больше:

7
Aminadav Glickshtein

var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));

function checkResize (mutations) {
    var el = mutations[0].target;
    var w = el.clientWidth;
    var h = el.clientHeight;
    
    var isChange = mutations
      .map((m) => m.oldValue + '')
      .some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);

    if (!isChange)
      return;

    var event = new CustomEvent('resize', {detail: {width: w, height: h}});
    el.dispatchEvent(event);
}

var observer = new MutationObserver(checkResize); 
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});
#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}
<div id = "div">DIV</div>

6
Aikon Mogwai

Мой плагин jQuery включает событие resize для всех элементов, а не только для window.

https://github.com/dustinpoissant/ResizeTriggering

$("#myElement") .resizeTriggering().on("resize", function(e){
  // Code to handle resize
}); 
3
Dustin Poissant

Этот пост в блоге помог мне эффективно определять изменения размеров элементов DOM.

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

Как использовать этот код ...

AppConfig.addResizeListener(document.getElementById('id'), function () {
  //Your code to execute on resize.
});

Упакованный код, использованный в примере ...

var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
    var attachEvent = document.attachEvent;
    var isIE = navigator.userAgent.match(/Trident/);
    var requestFrame = (function () {
        var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (fn) { return window.setTimeout(fn, 20); };
        return function (fn) { return raf(fn); };
    })();

    var cancelFrame = (function () {
        var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
               window.clearTimeout;
        return function (id) { return cancel(id); };
    })();

    function resizeListener(e) {
        var win = e.target || e.srcElement;
        if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
        win.__resizeRAF__ = requestFrame(function () {
            var trigger = win.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
                fn.call(trigger, e);
            });
        });
    }

    function objectLoad(e) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', resizeListener);
    }

    AppConfig.addResizeListener = function (element, fn) {
        if (!element.__resizeListeners__) {
            element.__resizeListeners__ = [];
            if (attachEvent) {
                element.__resizeTrigger__ = element;
                element.attachEvent('onresize', resizeListener);
            } else {
                if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
                var obj = element.__resizeTrigger__ = document.createElement('object');
                obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
                obj.__resizeElement__ = element;
                obj.onload = objectLoad;
                obj.type = 'text/html';
                if (isIE) element.appendChild(obj);
                obj.data = 'about:blank';
                if (!isIE) element.appendChild(obj);
            }
        }
        element.__resizeListeners__.Push(fn);
    };

    AppConfig.removeResizeListener = function (element, fn) {
        element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
        if (!element.__resizeListeners__.length) {
            if (attachEvent) element.detachEvent('onresize', resizeListener);
            else {
                element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
                element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
            }
        }
    }
})();

Примечание. AppConfig - это пространство имен/объект, которое я использую для организации многократно используемых функций. Не стесняйтесь искать и заменять имя на что угодно.

3
Ben Gripka

Вы можете попробовать код в следующем фрагменте, он покрывает ваши потребности, используя простой JavaScript. (запустите фрагмент кода и щелкните ссылку на всю страницу, чтобы активировать оповещение о том, что размер div изменен, если вы хотите его протестировать.). 

Основываясь на том факте, что это setInterval из 100 миллисекунд, я бы осмелился сказать, что мой компьютер не находил слишком много ресурсов процессора. (0,1% ЦП использовалось как общее для всех открытых вкладок в Chrome на момент тестирования.). Но опять же, это всего лишь для одного деления, если вы хотите сделать это для большого количества элементов, то да, это может сильно нагружать процессор.

Вы всегда можете использовать событие click, чтобы остановить div-resize sniffing в любом случае.

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>

Вы можете проверить скрипку также

ОБНОВЛЕНИЕ

var width = 0; 
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" id="clickMe" />
        <input type="button" value="button 2" id="clickMeToo" />
        <input type="button" value="button 3" />
</div>

Обновлено Fiddle

2
Peter Darmis

Используя Clay.js ( https://github.com/zzarcon/clay ) довольно просто обнаружить изменения в размере элемента:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});
2
Zzarcon

Как ни удивительно, сколько лет эта проблема, это все еще проблема в большинстве браузеров.

Как уже говорили другие, Chrome 64+ теперь поставляется с Resize Obsers изначально, однако спецификация все еще находится в точной настройке, и Chrome в настоящее время (по состоянию на 2019-01-29) отстает от последней редакции спецификации .

Я видел несколько хороших полизаполнений ResizeObserver в дикой природе, однако, некоторые из них не соответствуют спецификации, а другие имеют некоторые проблемы с вычислениями.

Я отчаянно нуждался в таком поведении для создания некоторых адаптивных веб-компонентов, которые можно было бы использовать в любом приложении. Чтобы они работали хорошо, им нужно всегда знать свои размеры, поэтому ResizeObservers звучит идеально, и я решил создать полифилл, максимально соответствующий спецификации.

Репо: https://github.com/juggle/resize-observer

Демо: https://codesandbox.io/s/myqzvpmmy9

2
Trem

Это в значительной степени точная копия верхнего ответа, но вместо ссылки важна только часть кода, переведенная в IMO, более удобочитаемая и понятная. Несколько других небольших изменений включают использование cloneNode (), а не помещение html в строку js. Мелкие вещи, но вы можете скопировать и вставить это как есть, и это будет работать.

Это работает, когда два невидимых элемента div заполняют просматриваемый элемент, а затем помещают триггер в каждый элемент и устанавливают позицию прокрутки, которая приведет к срабатыванию изменения прокрутки при изменении размера.

Вся реальная заслуга принадлежит Marc J, но если вы просто ищете соответствующий код, вот он:

    window.El = {}

    El.resizeSensorNode = undefined;
    El.initResizeNode = function() {
        var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
        var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";

        var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
        resizeSensor.style = fillParent;

        var expandSensor = document.createElement("div");
        expandSensor.style = fillParent;
        resizeSensor.appendChild(expandSensor);

        var trigger = document.createElement("div");
        trigger.style = triggerStyle;
        expandSensor.appendChild(trigger);

        var shrinkSensor = expandSensor.cloneNode(true);
        shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
        resizeSensor.appendChild(shrinkSensor);
    }


    El.onSizeChange = function(domNode, fn) {
        if (!domNode) return;
        if (domNode.resizeListeners) {
            domNode.resizeListeners.Push(fn);
            return;
        }

        domNode.resizeListeners = [];
        domNode.resizeListeners.Push(fn);

        if(El.resizeSensorNode == undefined)
            El.initResizeNode();

        domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
        domNode.appendChild(domNode.resizeSensor);

        var expand = domNode.resizeSensor.firstChild;
        var expandTrigger = expand.firstChild;
        var shrink = domNode.resizeSensor.childNodes[1];

        var reset = function() {
            expandTrigger.style.width = '100000px';
            expandTrigger.style.height = '100000px';

            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;

            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        };

        reset();

        var hasChanged, frameRequest, newWidth, newHeight;
        var lastWidth = domNode.offsetWidth;
        var lastHeight = domNode.offsetHeight;


        var onResized = function() {
            frameRequest = undefined;

            if (!hasChanged) return;

            lastWidth = newWidth;
            lastHeight = newHeight;

            var listeners = domNode.resizeListeners;
            for(var i = 0; listeners && i < listeners.length; i++) 
                listeners[i]();
        };

        var onScroll = function() {
            newWidth = domNode.offsetWidth;
            newHeight = domNode.offsetHeight;
            hasChanged = newWidth != lastWidth || newHeight != lastHeight;

            if (hasChanged && !frameRequest) {
                frameRequest = requestAnimationFrame(onResized);
            }

            reset();
        };


        expand.addEventListener("scroll", onScroll);
        shrink.addEventListener("scroll", onScroll);
    }
1
Seph Reed

используя Bharat Patil answer просто верните false в обратном вызове bind, чтобы предотвратить ошибку максимального стека, см. пример ниже:

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});
0
White Rabbit

Чистое решение Javascript, но работает, только если размер элемента изменяется с помощью кнопки css resize :

  1. сохранить размер элемента с помощью offsetWidth и offsetHeight ;
  2. добавить onclick слушатель события на этот элемент;
  3. при срабатывании сравните текущие значения offsetWidth и offsetHeight с сохраненными значениями и, если они отличаются, сделайте то, что хотите, и обновите эти значения.
0
roipoussiere
jQuery(document).ready( function($) {

function resizeMapDIVs() {

// check the parent value...

var size = $('#map').parent().width();



if( $size < 640 ) {

//  ...and decrease...

} else {

//  ..or increase  as necessary

}

}

resizeMapDIVs();

$(window).resize(resizeMapDIVs);

});
0
Fábio Zangirolami

Это действительно старый вопрос, но я решил опубликовать свое решение по этому вопросу.

Я пытался использовать ResizeSensor, так как все, казалось, были в нем влюблены. После реализации, однако, я понял, что под капотом Element Query требуется, чтобы к рассматриваемому элементу была применена позиция relative или absolute, что не сработало для моей ситуации.

В итоге я обработал это с помощью Rxjs interval вместо прямой setTimeout или requestAnimationFrame, как в предыдущих реализациях. 

Что хорошо в наблюдаемой разновидности интервала, так это то, что вы можете модифицировать поток, однако любая другая наблюдаемая может быть обработана. Для меня базовой реализации было достаточно, но вы могли бы сходить с ума и делать всевозможные слияния и т.д.

В приведенном ниже примере я отслеживаю изменения ширины внутреннего (зеленого) элемента div. Его ширина установлена ​​на 50%, но максимальная ширина составляет 200 пикселей. Перетаскивание ползунка влияет на ширину обёртки (серого) div. Вы можете видеть, что наблюдаемое срабатывает только при изменении ширины внутреннего div, что происходит только в том случае, если ширина внешнего div меньше 400px.

const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;


const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');




function subscribeToResize() {
  const timer = interval(100);
  const myDiv = document.getElementById('my-div');
  const widthElement = document.getElementById('width');
  const isMax = document.getElementById('is-max');
  
  /*
    NOTE: This is the important bit here 
  */
  timer
    .pipe(
      map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
      distinctUntilChanged(),
      // adding a takeUntil(), here as well would allow cleanup when the component is destroyed
    )
      .subscribe((width) => {        
        widthElement.innerHTML = width;
        isMax.innerHTML = width === 200 ? 'Max width' : '50% width';

      });
}

function defineRange() {
  input.min = 200;
  input.max = window.innerWidth;
  input.step = 10;
  input.value = input.max - 50;
}

function bindInputToWrapper() {
  input.addEventListener('input', (event) => {
    wrapper.style.width = `${event.target.value}px`;
  });
}

defineRange();
subscribeToResize();
bindInputToWrapper();
.inner {
  width: 50%;
  max-width: 200px;
}




/* Aesthetic styles only */

.inner {
  background: #16a085;
}

.wrapper {
  background: #ecf0f1;
  color: white;
  margin-top: 24px;
}

.content {
  padding: 12px;
}

body {
  
  font-family: sans-serif;
  font-weight: bold;
}
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<h1>Resize Browser width</h1>

<label for="width-input">Adjust the width of the wrapper element</label>
<div>
  <input type="range" id="width-input">
</div>

<div id="my-wrapper" class="wrapper">
  <div id="my-div" class="inner">
    <div class="content">
      Width: <span id="width"></span>px
      <div id="is-max"></div>  
    </div>
  </div>
</div>

0
Scrimothy