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

webkitMarqueeIncrement style property

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

Syntax:

object.webkitMarqueeIncrement;
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-increment

Possible values:

The type of this property is string.
 One of the following values: 
distance in length
The distance between successive displays of the contents in the marquee object in length units. For the supported length units, see the length page.
distance in percentage
The distance is the specified percentage of the width of the object.
inherit
Takes the value of this property from the computed style of the parent element.
large
Same as '36px'.
medium
Same as '6px'.
small
Same as '1px'.
Default: medium.

Example HTML code 1:

This example illustrates the use of the -webkit-marquee-increment 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>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitMarqueeIncrement 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 ('webkitMarqueeIncrement' in marquee.style) {
                marquee.style.webkitMarqueeIncrement = 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="7">
        <option />large
        <option />medium
        <option />small
        <option selected="selected" />1px
        <option />6px
        <option />16px
        <option />60px
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content