Create a simple jQuery looped timer

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.

Any questions or comments?

  1. Mitch says:

    Thanks Jamy. This is a perfectly simple building block for a new project I’m working on. Just what I needed.

  2. Zeshan says:

    Dude
    You are greak 😉
    Yoo ROCKS ………………..
    JQUERY ROCKS
    its a great thing which resolves my issue good work dude again

  3. Welington Cruz says:

    You can count one more on the list of people happy because of your help. Thank you.

    1. Jamy Golden says:

      No problem! I’m glad I could help out :)

  4. Kuhinje says:

    Can you do same wxample but this time with pasue on timer (on hover or so), thx.

  5. Massimo says:

    Thanks Jamy, very helpful, just starting with JQuery and this is exactly what I was looking for.

  6. M says:

    this website is amazing. i dont know who made this website but man you guys are awesome!

  7. M says:

    my bad, just read the footer of the webpage, thanks Jamy!

    1. Jamy Golden says:

      Glad you find it useful! :)