CSS-Plus
CSS-Plus
Play with web technologies

Create a simple jQuery looped timer

September 07, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.

Timers are useful things to have in your javascript toolbox of tricks. Common examples of looped timers are carousel plugins. These normally have a couple of options, and often one of them is to have the carousel window change every --insert amount of seconds here-- seconds. This is basically what we're going to go through during this tutorial.

This timer isn't going to be doing anything crazy, it's merely going to rotate between <p> tags every second. The rest is up to you and your imagination.

I'm going to keep this tutorial as simple as possible with regards to the HTML and CSS. This is the kind of thing I'm going to include within the Snippets section once it goes live.

The HTML

<div id="example">
    <p>A</p>
    <p>different</p>
    <p>word</p>
    <p>appears</p>
    <p>every</p>
    <p>one</p>
    <p>second!</p>
</div>

As you can see, this is absolute basic markup, nothing much to explain here.

The CSS

#example {
    background: white;
    border: 2px solid #333;
    display: block;
    margin: 0 auto;
    padding: 10px;
    width: 100px;
}
#example p {
    color: #333;
    display: none;
    font-weight: bold;
    text-align: center;
}
#example p:first-child {
    display: block;
}

The CSS is just styling the markup in a very basic manner. #example p is set to display: none so that the <p> elements aren't visible until the javascript needs it. We've added the :first-child pseudo class as a fallback in case the user's browser doesn't have javascript enabled. If javascript is disabled, the first <p> element will be visible as opposed to nothing at all.

The jQuery/Javascript

$(document).ready(function() {
    $("#example p:first").css("display", "block");

    jQuery.fn.timer = function() {
        if (
            !$(this)
                .children("p:last-child")
                .is(":visible")
        ) {
            $(this)
                .children("p:visible")
                .css("display", "none")
                .next("p")
                .css("display", "block");
        } else {
            $(this)
                .children("p:visible")
                .css("display", "none")
                .end()
                .children("p:first")
                .css("display", "block");
        }
    }; // timer function end

    window.setInterval(function() {
        $("#example").timer();
    }, 1000);
});
  1. Make sure the first <p> element is visible
  2. Function "timer" is defined
  3. If the last-child <p> element is NOT visible
  4. Target the visible <p> element, set it's display to none and set the very next <p> element's display to block
  5. Or else
  6. Target the visible <p>
  7. Set it's display to none
  8. Target the first <p> element set it's display to block
  9. Set the repeat interval of $("#example").timer(); to 1000 milliseconds (1 second)

If you don't already know, I'm slowly creating a jQuery carousel plugin and these little tutorials are things which I've ended up needing to include in the plugin.

If you have any questions or comments, feel free to leave them in the comment section below.

Demo