Few days ago I saw this neat Flash news sticker. It changed news previews every 6-7sec, background was image from news and it had soft black transparent line on which news title and description were shown.
I liked it a lot but it was in flash and I hate flash, so I decided to create JavaScript version of that news sticker.

Download

Latest builds

Simple Demonstration

How does it work?

Include required JavaScript

Before we start we need to include required JS files in our html document. Best place to do this is between head tags. JS News Sticker requires Prototype.

Defining the sticker box

We will create html structure where we want sticker to be placed. Structure should always look like this:

Content will be copied in this structure.

Generated content

Sticker relies on html list for content. You need to create a list that looks something like this:

FC Read Star vs FC Rangers
The Scottish club survived an early scare before producing a solid defensive performance to take their place in Thursday's draw and deny the Serbian champions a first appearance in the UEFA Champions League proper.
http://www.hazaah.com/etc/sticker/images/0708_cz_rendzers_16.jpg


Rangers through with Belgrade draw
The Scottish club survived an early scare before producing a solid defensive performance to take their place in Thursday's draw and deny the Serbian champions a first appearance in the UEFA Champions League proper.
http://www.hazaah.com/etc/sticker/images/0708_cz_rendzers_18.jpg


FC Red Star vs AC Milan
Goals from Filippo Inzaghi and Clarence Seedorf gave the six-times European champions a 2-1 second-leg victory in front of a passionate 55,000 crowd in Belgrade.
http://www.hazaah.com/etc/sticker/images/delije2.jpg

You will notice that every list element (li) has 3 components, title (h3), description (p) and background (div). Each of these components has it’s own unique ID. Title id would be title_ fallowed by the number (position in the list) first one is 1, second 2 and so on (notice, no zero element). Same rule applies for description and background, ID prefix for description is text_ and for background bg_.
You can create this list however you wish, static, php generated… it doesn’t matter. Sticker will be created based on this list.

Init news sticker

Last thing we need to do is call load function from sticker object. The best place to do this is just before last body tag. It should look like this:

Now you are all done and ready to go ;)

Download

Latest builds