demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

  • Improve pagination
  • Work on comment system
  • Add favorites
  • Allow users to add a profile
  • Redesign blog theme

A Simple JQuery News Ticker With CSS3 and Generated Content

javascript / animation

Estimated reading time: 2 minutes, 30 seconds

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 , and change the order of the items via over time.

First, the basic HTML:

<h3>To-Do List For demosthenes.info</h3>
<ul id=to-do-list>
<li> <a href="to-do.html#pagination">Improve pagination</a>
<li><a href="to-do.html#comments">Work on comment system</a></li>
<li><a href="to-do.html#favorites">Add favorites</a>
<li><a href="to-do.html#profiles">Allow users to add a profile</a>
<li><a href="to-do.html#redesign">Redesign blog 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:

<script>
$(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);
});
</script>

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():

<script>
$(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);
});
</script>

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.