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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > direction (marquee)

direction property (marquee)

Browser support:

Specifies or retrieves in which direction the marquee should scroll.

Note that the browser support of the direction property in JavaScript and the browser support of the direction attribute in HTML are different. While the direction attribute is supported by all commonly used browsers, the direction property is not supported in Safari and Google Chrome. For details, see Example 2.

Syntax:

object.direction;

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

This property is read/write.

HTML page for this property: direction

Possible values:

String that sets or retrieves the direction of the scrolling.

One of the following values:

down

marquee scrolls down.

left

marquee scrolls left.

right

marquee scrolls right.

marquee scrolls up.

Default: left.

Example HTML code 1:

This example illustrates the use of the direction attribute:

<marquee id="myMarquee" style="width:200px;" direction="down">Hi There!</marquee>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the direction property:

<head>
    <script type="text/javascript">
        function SetScrollDir (elem) {
            var marquee = document.getElementById ("myMarquee");

            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            if ('direction' in marquee) {
                marquee.direction = elem.options[whichSelected].text;
            } else {
                    // Google Chrome and Safari
                marquee.setAttribute ("direction", elem.options[whichSelected].text);
            }
        }
    </script>
</head>
<body>
    <marquee id="myMarquee" style="width:200px; height:150px" direction="down">Hi There!</marquee>

    <br />
    Change the scroll direction!
    <select onchange="SetScrollDir (this);" size="4">
        <option selected="selected" />down
        <option />left
        <option />right
        <option />up
    </select>
</body>