Print

[siteFEEDS]

How to Create a Simple News Ticker
19 August 2009, 8:14 am

In this tutorial we’ll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents. Some news tickers are horizontal and some are vertical; the one that we’re going to create today will be vertical.





The context of the example is a news scroller so we’ll be working with plain text, but we should be able to put whatever we wanted into the underlying mark-up; images, or links, or whatever. We’ll be using jQuery as the underlying JS library, and a little HTML and CSS. Let’s make a start.



The Underlying HTML

In a new page in your text editor add the following code:

This is a news title!

This is a snippet of the news. It could be the whole news item or it could link to another page containing...

News Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

News Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

News Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This item is long!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Save this as simpleTicker.html in a directory containing jQuery 1.3.2. As well as the usual page furniture – the DOCTYPE, META content-type, title, etc – we have a custom style sheet that we’ll create in just a moment and we link to jQuery at the end of the body (for performance reasons).



On the page is the content that we’ll progressively enhance into the news ticker; it’s made up of a simple definition-list element, which feels appropriate for our purposes. Although only inline content can be placed in each

element, block-level content can be put in the

elements.

The code is minimal and highly accessible; browsers, mobile devices and screen-readers should all have no difficulty interpreting and rendering it. With no styling however, it does look pretty shocking:

Providing Default Styling

Let’s add some basic styling; even with JavaScript switched off, no one wants to see the list as it is at the moment. In a new file in your text editor add the following code:

#ticker {

width:180px; height:300px; overflow:auto; border:1px solid #aaaaaa;

}

#ticker dt {

font:normal 14px Georgia; padding:0 10px 5px 10px;

background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;

border-bottom:none; border-right:none;

}

#ticker dd {

margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;

border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;

border-left:1px solid #ffffff;

}

#ticker dd.last { border-bottom:1px solid #ffffff;

Save this file in the same directory as the page and call it simpleTicker.css. We give the list a set width and height and set the overflow property to auto; the height of the ticker is less than the space required to show all of the news items so the scrollbar will allow visitors with JavaScript disabled to view all of the content.



Some of the styles are purely presentational; anything that sets a background-color, border or font is totally arbitrary and is used to make the example a little more attractive. The widget should now look like this:

However minimal we choose to make it, it’s a big improvement on the default rendering; it would quite happily fit into a sidebar or column now; it’s an acceptable fallback from the finished widget and a great foundation from which to progressively enhance.

Progressively Enhancing the Ticker

Now we can move on to the fun part – adding the JavaScript that will turn this from a simple list into an automatic ticker; in the empty