You are here: Reference > JavaScript > client-side > event handling > properties > verticalOverflow (event)
verticalOverflow property (event)
Retrieves a Boolean value that indicates the vertical overflow state of an element when the overflowchanged event occurred.
Use the horizontalOverflow property for horizontal overflow and the orient property to detect whether the horizontal or vertical overflow state has changed.
Syntax:
You can find the related objects in the Supported by objects section below.
This property is read-only.
Possible values:
Boolean that represents the state of the vertical overflow.
One of the following values:
| The contents of the event target element do not overflow vertically. | |||||||
| The contents of the event target element overflow vertically. |
Default: this property has no default value.
Example HTML code 1:
This example illustrates the use of the verticalOverflow property:
|
|
||||
<head> <script type="text/javascript"> function Init () { var div = document.getElementById ("myDiv"); if (div.addEventListener) { div.addEventListener ('overflowchanged', OnOverflowChanged, false); } } function OnOverflowChanged (event) { switch (event.orient) { case OverflowEvent.HORIZONTAL: alert ("The visibility of the vertical scrollbar has changed."); break; case OverflowEvent.VERTICAL: alert ("The visibility of the horizontal scrollbar has changed."); break; case OverflowEvent.BOTH: alert ("The visibility of both the horizontal and vertical scrollbars has changed."); break; } if (event.horizontalOverflow) { alert ("The contents overflow horizontally."); } else { alert ("The contents do not overflow horizontally."); } if (event.verticalOverflow) { alert ("The contents overflow vertically."); } else { alert ("The contents do not overflow vertically."); } } function ResizeTo (w, h) { var div = document.getElementById ("myDiv"); div.style.width = w + "px"; div.style.height = h + "px"; } </script> </head> <body onload="Init ();"> <div id="myDiv" style="width:200px;height:200px; overflow:auto; background-color:#e0a0a0;"> <nobr>Text of the first line.</nobr><br/> <nobr>Text of the second line.</nobr><br/> <nobr>Text of the third line.</nobr><br/> <nobr>Text of the fourth line.</nobr><br/> <nobr>Text of the fifth line.</nobr><br/> <nobr>Text of the sixth line.</nobr><br/> </div> <br /><br /><br /> <button onclick="ResizeTo (100, 100);">Resize to 100*100</button> <button onclick="ResizeTo (200, 100);">Resize to 200*100</button> <button onclick="ResizeTo (100, 200);">Resize to 100*200</button> <button onclick="ResizeTo (200, 200);">Resize to 200*200</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Supported by objects:
Related pages:
User Contributed Comments