Problem: you have too many items in a group – Twitter/Facebook messages, news headlines, spotlighted articles, etc. Including all of the items on a page would overwhelm the design, but you don’t wish to limit the items to a selection of just two or three.

Solution: limit the visible area of the group via CSS, and change the order of the items via JavaScript over time.

First, the basic HTML:

<h3>To-Do List For thenewcode.com</h3>
<ul id="to-do-list">
	<li><a href="to-do.html#pagination">Improve pagination</a>
	<li><a href="to-do.html#pagespeed">Improve Page Speed</a>
	<li><a href="to-do.html#optimize">Optimize images</a>
	<li><a href="to-do.html#redesign">Redesign site theme</a>
</ul>

We would normally never place height on an element (the body tag and a wrapper <div> being possible exceptions) but in this case we want to show a limited number of items, and hide the rest:

ul#to-do-list {
	border: 2px solid #000;
	padding: 1em;
	height: 3em;
	overflow: hidden;
	width: 16em;
}

Note that you could “even out” the perception of padding around the three visible list items by using an nth-child selector to influence the third list item:

ul#to-do-list li:nth-child(3) {
	margin-bottom: 1.2em;
}

Normally we want to direct the user to read more information on each news item on another page. If I wanted those words to accompany each link, I could use some generated content:

ul#to-do-list li a:before {
	content: "read more";
}

Now we need to remove the first list item using JavaScript. We’ll load in JQuery, then add an embedded script that does just that:

$(document).ready(function(){
function removeFirst(){
	first = $('ul#to-do-list li:first').html();
	$('ul#to-do-list li:first')
	.fadeOut('slow', function()
	{$(this).remove();});
	addLast(first);
}
interval = setInterval(removeFirst, 3000);
});

The first variable will be used to contain the content of the first list item, which will then be faded out. This will occur every 3 seconds (3000 milliseconds).

If you ran the code as it exists right now, you would find that the list was gradually consumed from the top until it disappears; you would also find that the JavaScript console window in your browser supplied a repeated error message that it could not find an addLast function. The role of that function is to take the content that we removed from the top (first) and append it to the bottom of the list. Let’s add that function above removeFirst():

$(document).ready(function(){
	function addLast(first) {
		last = '<li>'+first+'</li>';
		$('ul#to-do-list ').append(last);
		}
		function removeFirst(){
			first = $('ul#to-do-list li:first').html();
			$('ul#to-do-list li:first')
			.fadeOut('slow', function()
			{$(this).remove();});
			addLast(first);
		}
interval = setInterval(removeFirst, 3000);
});

The addLast() function takes the content of the first list item as a variable called first, concatenates <li> tags around it, and adds the result to the bottom of the list. In this way, the animation of the list is an infinite loop.

You could easily make the list items appear side-by-side, replace the text in the list with images, move the list elsewhere on your page, etc: that is all CSS and markup, not JavaScript.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.