In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > initOverflowEvent (event)

initOverflowEvent method (event)

Browser support:

Initializes an event object created by the createEvent method with type of 'OverflowEvent'.

An event object created by the createEvent method with type of 'OverflowEvent' implements the OverflowEvent interface.

After initialization, the event can be dispatched with the dispatchEvent method. Dispatching an event object with type of 'OverflowEvent' fires the overflowchanged event on the target element.

In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.

Syntax:

object.initOverflowEvent (orient, horizontalOverflow, verticalOverflow);

You can find the related objects in the Supported by objects section below.

Parameters:

orient

Required. Integer that identifies the scrollbars of which visibility are changed.

Sets the orient property of the event object. 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 <a href='/lagstsiq.php/#OverflowEvent'>OverflowEvent</a> interface.

The value can be one of the following values (the value of a predefined constant appears in parentheses after the constant):

HORIZONTAL (0)

The visibility of the vertical scrollbar is changed. It is a bug in Google Chrome and Safari, the HORIZONTAL and VERTICAL constants are defined in reverse!

VERTICAL (1)

The visibility of the horizontal scrollbar is changed. It is a bug in Google Chrome and Safari, the HORIZONTAL and VERTICAL constants are defined in reverse!

BOTH (2)

The visibility of the horizontal and vertical scrollbars is also changed.

horizontalOverflow

Required. Boolean that specifies whether the contents of the target element overflows horizontally. Sets the horizontalOverflow property of the event object.

One of the following values:

false

The contents of the event target element do not overflow horizontally.

true

The contents of the event target element overflow horizontally.

verticalOverflow

Required. Boolean that specifies whether the contents of the target element overflows vertically. Sets the verticalOverflow property of the event object.

One of the following values:

false

The contents of the event target element do not overflow vertically.

true

The contents of the event target element overflow vertically.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the initOverflowEvent method:

<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 AllowScrollBars () {
            var div = document.getElementById ("myDiv");
            div.style.overflow = "auto";
                // Modifying the overflow style property does not cause the overflowchanged event to be fired
            var eventObject = document.createEvent('OverflowEvent');
            eventObject.initOverflowEvent (OverflowEvent.BOTH, true, true);
            div.dispatchEvent(eventObject);
        }
    </script>
</head>
<body onload="Init ();">
    <div id="myDiv" style="width:100px;height:100px; overflow:hidden; 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="AllowScrollBars ();">Allow displaying scrollbars</button>
</body>