---
title: "DIV onresize - LemonadeJS | v4 docs"
description: "LemonadeJS v4 archive. Learn how to implement a custom DIV onresize event using LemonadeJS and JavaScript Vanilla."
source: https://lemonadejs.com/docs/v4/examples/div-onresize/
---
DIV onresize
============
The following example shows a simple implementation to track the changes in dimensions of a DIV using LemonadeJS.
Example
-------
Tracking changes in a DIV dimensions example.
### Source code
```html
```
```javascript
import lemonade from 'lemonadejs';
export default function Width() {
const self = this;
self.init = function(element) {
// Initial values
var w = element.offsetWidth;
var h = element.offsetHeight;
// Track the changes
element.onmousemove = function(e) {
if (e.which) {
if (w !== element.offsetWidth || h !== element.offsetHeight) {
w = element.offsetWidth;
h = element.offsetHeight;
self.onresize(element);
// Update dimensions label
self.dimensions = w + ',' + h;
}
}
}
}
self.onresize = function(element) {
console.log('DIV has new dimensions');
}
// Component template
return `
On resize on DIV elements: {{self.dimensions}}
`;
}
```
[See this example on codesandbox](https://codesandbox.io/s/div-onresize-uzci2q)
A pure vanilla implementation
-----------------------------
Although this site is dedicated to LemonadeJS, for education purposes, we present you with a pure javascript vanilla implementation as follow.
[DIV onresize example on jsfiddle](https://jsfiddle.net/lemonadejs/ugj7tc0f/)
### Source code
```html
Pure vanilla implementation
```
### The CSS used for this section
If you wish to test the examples of this section, please copy this CSS to your project.
```css
.resizable {
resize: both;
overflow: auto;
width: 200px;
border: 1px solid black;
padding: 20px;
}
```