On element resize javascript

Onresize for div elements?

Visual Studio highlighted my onresize attribute of my div tag, and says that it isn’t a valid attribute for HTML5. Is this true? What should I use instead? It seems kind of silly that this would be the case.

That article is about the Window’s resize event, does it apply to elements like div? And not part of spec doesn’t tell me how much browser support it has or if it has a more-valid-on-spec solution or not.

@leaf68 What are you using to resize the div in the first place? Providing relevant code allows us to help you much much easier

From Javascript, I have the resize event resize several other elements. I’m aware that I could call my resize function each time I set my div’s side, but if this way works than it would be much easier because I wouldn’t have to remember that each time.

Thanks @Oztaco for disregarding that condescending comment. Because you posted this question, my «10 seconds of googling» brought me here, to a straightforward answer with discussion and alternatives. +1.

7 Answers 7

Microsoft’s Internet Explorer supports onresize on all HTML elements. In all other Browsers the onresize is only available at the window object. https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

If you wanna have onresize at a div in all browsers check this:

This library has a class ResizeSensor which can be used for resize detection.

I’ve updated my method, it’s now simpler than the previous version and more accurate. Marc, you should update the element queries stuff to use this latest code (backalleycoder is my blog)

@csuwldcat, yes it’s simpler, but way slower in the initialisation, so I didn’t follow the object approach any further.

Only Window.onResize exists in the specification. Please remember that every IFrame element creates new Window object which supports onResize . Therefore IMO the most reliable method to detect changes to the element’s size is to append hidden iframes to the element.

If you are interested in a neat and portable solution, please check this plugin. It takes 1 line of code to listen the event of changing width or height of your div.

  // (2) use the detectResizing plugin to monitor changes to the element's size: $monitoredElement.detectResizing(< onResize: monitoredElement_onResize >); // (3) write a function to react on changes: function monitoredElement_onResize() < // logic here. >

Add the following CSS and JavaScript to your page, and use the addResizeListener and removeResizeListener methods to listen for element size changes (blog post for further details: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):

Resize Sensor CSS

.resize-triggers < visibility: hidden; >.resize-triggers, .resize-triggers > div, .contract-trigger:before < content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; >.resize-triggers > div < background: #eee; overflow: auto; >.contract-trigger:before

Resize Event Methods

The following is the JavaScript you’ll need to enable resize event listening. The first two functions are prerequisites that are used in the main addResizeListener and removeResizeListener methods.

(function()< var attachEvent = document.attachEvent; if (!attachEvent) < 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 resetTriggers(element)< var triggers = element.__resizeTriggers__, expand = triggers.firstElementChild, contract = triggers.lastElementChild, expandChild = expand.firstElementChild; contract.scrollLeft = contract.scrollWidth; contract.scrollTop = contract.scrollHeight; expandChild.style.width = expand.offsetWidth + 1 + 'px'; expandChild.style.height = expand.offsetHeight + 1 + 'px'; expand.scrollLeft = expand.scrollWidth; expand.scrollTop = expand.scrollHeight; >; function checkTriggers(element) < return element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height; >function scrollListener(e)< var element = this; resetTriggers(this); if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__); this.__resizeRAF__ = requestFrame(function()< if (checkTriggers(element)) < element.__resizeLast__.width = element.offsetWidth; element.__resizeLast__.height = element.offsetHeight; element.__resizeListeners__.forEach(function(fn)< fn.call(element, e); >); > >); >; > window.addResizeListener = function(element, fn)< if (attachEvent) element.attachEvent('resize', fn); else < if (!element.__resizeTriggers__) < if (getComputedStyle(element).position == 'static') element.style.position = 'relative'; element.__resizeLast__ = <>; element.__resizeListeners__ = []; (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers'; element.__resizeTriggers__.innerHTML = ' ' + ' '; element.appendChild(element.__resizeTriggers__); resetTriggers(element); element.addEventListener('scroll', scrollListener, true); > element.__resizeListeners__.push(fn); > >; window.removeResizeListener = function(element, fn) < if (attachEvent) element.detachEvent('resize', fn); else < element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); if (!element.__resizeListeners__.length) < element.removeEventListener('scroll', scrollListener); element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__); >> > >)(); 

Demo-licious!

Here’s a pseudo code usage of the method.

var myElement = document.getElementById('my_element'), myResizeFn = function()< /* do something on resize */ >; addResizeListener(myElement, myResizeFn); removeResizeListener(myElement, myResizeFn); 

Источник

Window: resize event

The resize event fires when the document view (window) has been resized.

This event is not cancelable and does not bubble.

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView ). Only handlers registered on the window object will receive resize events.

While the resize event fires only for the window nowadays, you can get resize notifications for other elements using the ResizeObserver API.

If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("resize", (event) => >); onresize = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parent, Event . UIEvent.detail Read only Returns a long with details about the event, depending on the event type. UIEvent.sourceCapabilities Experimental Read only Returns an instance of the InputDeviceCapabilities interface, which provides information about the physical device responsible for generating a touch event. UIEvent.view Read only Returns a WindowProxy that contains the view that generated the event. UIEvent.which Deprecated Non-standard Read only Returns the numeric keyCode of the key pressed, or the character code ( charCode ) for an alphanumeric key pressed.

Examples

Window size logger

HTML

p>Resize the browser window to fire the code>resizecode> event.p> p>Window height: span id="height">span>p> p>Window width: span id="width">span>p> 

JavaScript

const heightOutput = document.querySelector("#height"); const widthOutput = document.querySelector("#width"); function reportWindowSize()  heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; > window.onresize = reportWindowSize; 

Result

addEventListener equivalent

.addEventListener("resize", reportWindowSize); 

Specifications

Browser compatibility

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Отслеживаем «onresize» на элементе

Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, — не использующий таймирующий опрос.

Трюк: Внутрь элемента вставляем пустой фрейм с position:absolute и 100%- (ыми) размерами, придаём элементу position:relative; . И отслеживаем frame.onresize :

Тест-Код:

 
Тут контент .
  

Под спойлером

Код:

 
 Тут контент .
  

Источник

JavaScript — onResize event for div element

Inayah-Alexander

In this short article, we would like to show how to monitor size changes of div (or any element) in pure JavaScript.

By default, there are no built-in events that monitor element resize events. It means we need to have some own solution to do it. The easiest way is to check element size in some time intervals. When some size property changes values it means element size changed.

// ONLINE-RUNNER:browser;    div  
Change Result Window size (web browser size) to see the effect.
   

Note: it is good to stop intervals when monitoring is not needed — check next example.

Reusable code example

This example contains a simple class that provides methods to start and stop resize monitoring. ResizeMonitor class in the below example is reusable.

// ONLINE-RUNNER:browser;    div  
Change Result Window size (web browser size) to see the effect.
   

Note: depending of speed of updates we can set different interval argument value. Setting bigger interval value we slow down event occurances — it checks changes rarely. Setting smaller interval value we speed up event occurances — it checks size changes frequently, that may causes web browser performance increasion when we have to monitor many elements.

Embedded solution example

The major web browsers (2018-2020) intorduced ResizeObserver class that lets to tack element size changes.

// ONLINE-RUNNER:browser;    div  
Change Result Window size (web browser size) to see the effect.
   

Alternative titles

Источник

Javascript Custom Resize Event [duplicate]

I have a very simple question, or at least it seems that way. I have a DIV element which will be resized at one moment. I want to be able to capture the resizing moment. Something like this:

function myFunction() < alert('The DIV was resized'); >divElement.addEventListener("resize", myFunction, false); 

4 Answers 4

As of December 2011, there’s no built-in event to detect when a div resizes, just when a window resizes.

With jQuery resize event, you can now bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!

Why is a plugin needed for the resize event?

Long ago, the powers-that-be decided that the resize event would only fire on the browser’s window object. Unfortunately, that means that if you want to know when another element has resized, you need to manually test its width and height, periodically, for changes. While this plugin doesn’t do anything fancy internally to obviate that approach, the interface it provides for binding the event is exactly the same as what’s already there for window.

For all elements, an internal polling loop is started which periodically checks for element size changes and triggers the event when appropriate. The polling loop runs only once the event is actually bound somewhere, and is stopped when all resize events are unbound.

Sample Code

// You know this one already, right? $(window).resize(function(e)< // do something when the window resizes >); // Well, try this on for size! $("#unicorns").resize(function(e)< // do something when #unicorns element resizes >); // And of course, you can still use .bind with namespaces! $("span.rainbows").bind( "resize.rainbows", function(e)< // do something when any span.rainbows element resizes >); 

Источник