orient property (event)
Retrieves whether the visibility of the horizontal or vertical scrollbar changed when the overflowchanged event occurred.
Use the horizontalOverflow and verticalOverflow properties to retrieve whether the contents of the event target element overflow or not.
Syntax:
You can find the related objects in the Supported by objects section below.
This property is read-only.
Possible values:
Integer that identifies the scrollbars whose visibility has changed.
Predefined constants are available for the possible values of this property, in the scope of the OverflowEvent interface. You can use them directly through the OverflowEvent interface (OverflowEvent.HORIZONTAL) or through an instance of the event object. For further details, please see the page for the OverflowEvent interface.
The value can be one of the following values (the value of a predefined constant appears in parentheses after the constant):
| The visibility of the vertical scrollbar has changed. It is a bug in Google Chrome and Safari, the HORIZONTAL and VERTICAL constants are defined in reverse! | |||||||
| The visibility of the horizontal scrollbar has changed. It is a bug in Google Chrome and Safari, the HORIZONTAL and VERTICAL constants are defined in reverse! | |||||||
| The visibility of both the horizontal and vertical scrollbars has changed. |
Default: this property has no default value.
Example HTML code 1:
This example illustrates the use of the orient 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