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

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

webkitMarquee style property

Browser support:

Specifies or returns up to five separate marquee properties, in a shorthand form.

With this property you have control over how text within the marquee element should be scrolled. You can set the direction, repetition time, distance between each step and the speed of the marquee. Furthermore, you can set how the marquee should behave at the beginning and end points of each repetition (scroll like news-scrollers, slide like presentation slideshows, or it can bounce back from the side of the marquee, like a ball does).

Syntax:

object.webkitMarquee;

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

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

1.	<-webkit-marquee-direction>
2.	<-webkit-marquee-increment>
3.	<-webkit-marquee-repetition>
4.	<-webkit-marquee-speed>
5.	<-webkit-marquee-style>

•

inherit

Description of values:

-webkit-marquee-direction

Specifies or retrieves the scrolling direction of the marquee.

-webkit-marquee-increment

Specifies or retrieves the distance between each step of the scrolling marquee in pixels.

-webkit-marquee-repetition

Specifies or retrieves the number of times the marquee should repeat.

-webkit-marquee-speed

Specifies or retrieves the speed of the scrolling mechanism in a marquee element.

-webkit-marquee-style

Specifies or retrieves the style of scrolling in a marquee element.

inherit

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

Default: auto medium infinite normal scroll.

Example HTML code 1:

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

<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee: up medium 2 normal 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 webkitMarquee property in JavaScript:

<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee: up medium 2 fast scroll;
        }
    </style>
    <script type="text/javascript">
        function ChangeMarquee () {
            var marquee = document.getElementById ("myMarquee");

            if ('webkitMarquee' in marquee.style) {
                marquee.style.webkitMarquee = "down medium 3 slow slide";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <marquee id="myMarquee">
        first line<br />
        second line<br />
        third line
    </marquee>
    <button onclick="ChangeMarquee ()">Change marquee properties</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of all available values of the webkitMarquee 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 () {
            var marquee = document.getElementById ("myMarquee");
            var selects = document.getElementsByTagName ("select");
            var newValue = "";
            for (var i=0; i < selects.length; i++) {
                var selected = selects[i].selectedIndex;
                newValue += selects[i].options[selected].text + " ";
            }

            if ('webkitMarquee' in marquee.style) {
                marquee.style.webkitMarquee = 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>
    <br />

    Set direction:
    <select onchange="ChangeMarquee ();" size="9">
        <option />ahead
        <option />auto
        <option selected="selected" />backwards
        <option />down
        <option />forwards
        <option />left
        <option />reverse
        <option />right
        <option />up
    </select>
    Set Increment:
    <select onchange="ChangeMarquee ();" size="7">
        <option />large
        <option />medium
        <option />small
        <option selected="selected" />1px
        <option />6px
        <option />16px
        <option />60px
    </select>
    Change the time of repeats
    <select onchange="ChangeMarquee ();" size="7">
        <option selected="selected" />infinite
        <option />1
        <option />2
        <option />3
        <option />4
        <option />5
        <option />6
    </select>
    Set Speed:
    <select onchange="ChangeMarquee ();" size="7">
        <option />slow
        <option />normal
        <option />fast
        <option selected="selected" />1
        <option />10
        <option />100
        <option />1000
    </select>
    Set style:
    <select onchange="ChangeMarquee ();" size="4">
        <option />alternate
        <option />none
        <option selected="selected" />scroll
        <option />slide
    </select>
</body>