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

You are here: Reference > JavaScript > client-side > event handling > events > onstart

onstart event | start event

Browser support:

Occurs when a marquee element begins the scrolling animation and when a new loop starts.

When a new loop starts and the behavior property of the marquee element is set to 'alternate', an onbounce event is fired instead of an onstart event. If behavior property of the marquee element is set to 'scroll' or 'slide', an onstart event is fired each time when a new loop starts.

How to register:

In HTML:

In JavaScript:

object.onstart = handler;

object.addEventListener ("start", handler, useCapture);

9

object.attachEvent ("onstart", handler);

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

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	Event

Actions that invoke the onstart event:

When a marquee element begins the scrolling animation.
When a new loop starts and the behavior property of the marquee element is set to 'scroll' or 'slide'.

Marquee specific events:

onbounce, onfinish, onstart.

Example HTML code 1:

This example illustrates the use of the onstart event:

<head>
    <script type="text/javascript">
        function WriteInfo (event) {
            var marquee = event.target ? event.target : event.srcElement;
            var info = marquee.parentNode.getElementsByTagName ("div")[0];
            info.innerHTML += event.type + ", ";
        }
    </script>
</head>
<body>
    <div>
        behavior="alternate"<br />
        <marquee behavior="alternate" loop="3" width="300" style="border:1px solid red"
                onbounce="WriteInfo (event)" onfinish="WriteInfo (event)" onstart="WriteInfo (event)">
            Hi There!
        </marquee>
        <div style="color:blue"></div>
    </div>
    <br /><br />
    <div>
        behavior="scroll"<br />
        <marquee behavior="scroll" loop="3" width="300" style="border:1px solid red"
                onbounce="WriteInfo (event)" onfinish="WriteInfo (event)" onstart="WriteInfo (event)">
            Hi There!
        </marquee>
        <div style="color:blue"></div>
    </div>
    <br /><br />
    <div>
        behavior="slide"<br />
        <marquee behavior="slide" loop="3" width="300" style="border:1px solid red"
                onbounce="WriteInfo (event)" onfinish="WriteInfo (event)" onstart="WriteInfo (event)">
            Hi There!
        </marquee>
        <div style="color:blue"></div>
    </div>
</body>