onresize
onresize event
The onresize event handler in HTML is activated when the window or an element is resized. It allows developers to perform specific actions or execute scripts in response to size changes, enabling dynamic adjustments to the layout or content.
Syntax
In HTML
<element onresize="myScript">
In JS
object.onresize = function(){myScript};
In JavaScript, the addEventListener() function is used.
object.addEventListener("resize", myScript);
Example
<!DOCTYPE html>
<html>
<body onresize="myFunction()">
<p>Try to resize the browser window to display the windows height and width.</p>
<p id="demo"></p>
<script>
function myFunction() {
let w = window.outerWidth;
let h = window.outerHeight;
let txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
In this example, the Handleresize feature runs whenever the browser window size changes. It dynamically updates the text on the page, displaying the current width and height of the window. This functionality is useful in responsive web design, especially when testing how the layout adjusts to different screen sizes, such as those commonly found on smartphones in Pakistan.
Values
Conclusion
The onresize event in HTML is triggered when the browser window or an element is resized. It enables developers to dynamically adjust content or layout based on the new size. This event is commonly used in responsive web design to ensure proper rendering on different screen sizes.
onload
The onload event is triggered when an object has finished loading. It is most commonly used within the <body> element to execute a script once a web page has fully loaded.
onscroll
The onscroll event in HTML is triggered when the content of an element is scrolled, allowing developers to execute scripts in response to changes in the scroll position.