The undeflow event is fired when an element is no longer overflowed by its content (only works for elements styled with overflow != visible).
General info
- Specification
- None, Mozilla specific
- Interface
- UIEvent
- Bubbles
- Yes
- Cancelable
- Yes
- Target
- Document, Element
- Default Action
- None.
Properties
{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}
Example
<div id="wrapper">
<div id="child"></div>
</div>
<br/>
<label><input type="checkbox" id="toggle" checked/> Overflow</label>
<style>
#wrapper {
width: 20px;
height: 20px;
background: #000;
padding: 5px;
overflow: hidden;
}
#child {
width: 40px;
height: 40px;
border: 2px solid grey;
background: #ccc;
}
</style>
<script>
var wrapper = document.getElementById("wrapper"),
child = document.getElementById("child"),
toggle = document.getElementById("toggle");
wrapper.addEventListener("overflow", function( event ) {
console.log( event );
}, false);
wrapper.addEventListener("underflow", function( event ) {
console.log( event );
}, false);
toggle.addEventListener("change", function( event ) {
if ( event.target.checked ) {
child.style.width = "40px";
child.style.height = "40px";
} else {
child.style.width = "10px";
child.style.height = "10px";
}
}, false);
</script>