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

You are here: Reference > JavaScript > client-side > style handling > properties > pauseAfter

pauseAfter style property

Browser support:

Specifies or returns that the browser should insert a pause after speaking the element's content.

With the pauseBefore and pauseAfter properties you can specify pauses before and after speaking the element's content.

The pause, pauseBefore and pauseAfter properties are similar to the rest, restBefore and restAfter properties. The only difference when a sound file needs to play before or after the element (cue, cueBefore and cueAfter properties). In that case, the pauseBefore property specifies the pause immediately before and the restBefore property specifies the pause immediately after playing the sound file that belongs to the cueBefore property. Similarly, the restAfter property specifies the pause immediately before and the pauseAfter property specifies the pause immediately after playing the sound file that belongs to the cueAfter property.

Note: Unfortunately, the pauseBefore and restAfter properties currently do not work for sound files in Opera, and the pause, pauseBefore, pauseAfter and rest, restBefore, restAfter properties have some other bugs (do not work for several valid time values).

Syntax:

object.pauseAfter;

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

This property is read/write.

CSS page for this property: pause-after

Possible values:

The type of this property is string.

One of the following values:

inherit

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

pause in percentage

The pause is calculated from the speech-rate property. The speech-rate defines how much time a word takes, the pause is the percentage of this value.

time(s|ms)

Integer, followed by a time unit (s,ms). The pause in absolute time.

Default: 0.

Example HTML code 1:

This example illustrates the use of the pause-after property:

<head>
    <style>
        .pause {
            pause-before: 5s;
            pause-after: 3s;
        }
    </style>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text and select the speak menu item in the popup context menu.
    <br /><br />
    Five seconds pause before speaking the header element.
    <h2 class="pause">Header element</h2>
    There was three seconds pause after speaking the header element.
</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 pauseAfter property in JavaScript:

<head>
    <style>
        #pause {
            pause: 5s 3s;
        }
    </style>
    <script type="text/javascript">
        function ChangePause () {
            var heading = document.getElementById ("pause");
            var pauseInput = document.getElementById ("pauseInput");

            if ('pauseAfter' in heading.style) {
                heading.style.pauseAfter = pauseInput.value;
            } 
            else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text and select the speak menu item in the popup context menu.
    <br /><br />
    Five seconds pause before speaking the header element.
    <h2 id="pause">Header element</h2>
    There was three seconds pause after speaking the header element.
    <br /><br />
    <input id="pauseInput" type="text" value="3s" />
    <button onclick="ChangePause ();">Change the pause after!</button>
</body>