You are here: Reference > JavaScript > client-side > event handling > properties > horizontalOverflow (event)
horizontalOverflow property (event)
Retrieves a Boolean value that indicates the horizontal overflow state of an element when the overflowchanged event occurred.
Use the verticalOverflow property for vertical 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 horizontal overflow.
One of the following values:
| The contents of the event target element do not overflow horizontally. | |||||||
| The contents of the event target element overflow horizontally. |
Default: this property has no default value.
Example HTML code 1:
This example illustrates the use of the horizontalOverflow 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