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);
});
- Make sure the first
<p>
element is visible - Function "timer" is defined
- If the last-child
<p>
element is NOT visible - Target the visible
<p>
element, set it's display to none and set the very next<p>
element'sdisplay
toblock
- Or else
- Target the visible
<p>
- Set it's
display
tonone
- Target the first
<p>
element set it'sdisplay
toblock
- Set the repeat interval of
$("#example").timer()
; to1000
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.