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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitMarqueeDirection

webkitMarqueeDirection style property

Browser support:

Specifies or retrieves the scrolling direction of the marquee.

Syntax:

object.webkitMarqueeDirection;

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

This property is read/write.

CSS page for this property: -webkit-marquee-direction

Possible values:

The type of this property is string.

One of the following values:

ahead

The contents scroll from bottom to top.

auto

Default. Depending on the value of the direction property, it scrolls the contents from right to left (direction='ltr') or left to right (if direction='rtl').

backwards

The contents scroll from right to left, if the direction of the text is set to 'ltr'.

down

The contents scroll from top to bottom.

forwards

The contents scroll from left to right.

inherit

Takes the value of this property from the computed style of the parent element.

left

The contents scroll from right to left.

reverse

The contents scroll from right to left.

right

The contents scroll from left to right.

The contents scroll from bottom to top.

Default: auto.

Example HTML code 1:

This example illustrates the use of the -webkit-marquee-direction property:

<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee-direction: forwards;
            -webkit-marquee-increment: 1px;
            -webkit-marquee-repetition: infinite;
            -webkit-marquee-speed: fast;
            -webkit-marquee-style: scroll;
        }
    </style>
</head>
<body>
    <marquee id="myMarquee">
        first line<br />
        second line<br />
        third line
    </marquee>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitMarqueeDirection property in JavaScript:

<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee-direction: forwards;
            -webkit-marquee-increment: 1px;
            -webkit-marquee-repetition: infinite;
            -webkit-marquee-speed: fast;
            -webkit-marquee-style: scroll;
        }
    </style>
    <script type="text/javascript">
        function ChangeMarquee (select) {
            var marquee = document.getElementById ("myMarquee");
            var selected = select.selectedIndex;
            var newValue = select.options[selected].text;

            if ('webkitMarqueeDirection' in marquee.style) {
                marquee.style.webkitMarqueeDirection = newValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <marquee id="myMarquee">
        first line<br />
        second line<br />
        third line
    </marquee>
    <select onchange="ChangeMarquee (this);" size="9">
        <option />ahead
        <option />auto
        <option selected="selected" />backwards
        <option />down
        <option />forwards
        <option />left
        <option />reverse
        <option />right
        <option />up
    </select>
</body>