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

webkitMarqueeStyle style property

Browser support:
Specifies or retrieves the style of scrolling in a marquee element.
To get similar functionality in all commonly used browsers, use the behavior property instead.

Syntax:

object.webkitMarqueeStyle;
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-style

Possible values:

The type of this property is string.
 One of the following values: 
alternate
The contents 'bounce'. Scrolls the contents to the end and then in the opposite direction.
inherit
Takes the value of this property from the computed style of the parent element.
none
Does not scroll the contents.
scroll
Starts to scroll the contents to the end and starts over.
slide
Starts to scroll the contents to the end and stops.
Default: scroll.

Example HTML code 1:

This example illustrates the use of the -webkit-marquee-style property:
<head>
    <style>
        .myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee-direction: forwards;
            -webkit-marquee-increment: 6px;
            -webkit-marquee-repetition: infinite;
            -webkit-marquee-speed: fast;
        }

        .scroll {
            -webkit-marquee-style: scroll;
        }

        .slide {
            -webkit-marquee-style: slide;
        }
    </style>
</head>
<body>
    <marquee class="myMarquee scroll">
        scoll marquee<br />
        scoll marquee<br />
        scoll marquee
    </marquee>

    <marquee class="myMarquee slide">
        slide marquee<br />
        slide marquee<br />
        slide marquee
    </marquee>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitMarqueeStyle property in JavaScript:
<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee-direction: forwards;
            -webkit-marquee-increment: 3px;
            -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 ('webkitMarqueeStyle' in marquee.style) {
                marquee.style.webkitMarqueeStyle = 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="4">
        <option />alternate
        <option />none
        <option selected="selected" />scroll
        <option />slide
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content