BBC style news ticker
Wanting to create a news ticker along the lines of that used on the BBC news site, I took a look around for a handy plugin to do it, but with no success. So… I created my own, as a jQuery plugin.
A quick sample of how to use it follows, or you can see the news ticker in action.
$(document).ready(function() {
var options = {
newsList: "#news",
startDelay: 10,
placeHolder1: " []”
}
$().newsTicker(options);
});
For news items along the lines of:
<ul id="news">
<li><a href="http://www.makemineatriple.com">MakeMineATriple.com</a></li>
<li><a href="http://www.jquery.com">jQuery</a></li>
</ul>
The ticker will write out each news item in turn, and keep looping. Various parameters can be specified for things such as the pause between news items and the speed of the ticker. Full details and the download are on the jQuery plugin page. Hope you find it useful!
I love it! Using on my web app now. But one problem though I tried applying it to more than one unordered lists and it seems to conk out. What could be the problem?
Comment by jamongkad — October 30, 2007 @ 1:32 pm
Glad you like it - really good to know it’s been useful!
I hadn’t - until now - tried using it on more than one unordered list, but there are a couple of possible situations I can think of:
Hope that helps - if not, please feel free to post more detail (code or a link) and I’ll see what I can do!
Comment by bryan — October 30, 2007 @ 8:18 pm
Thanks man will try to do that! thanks for the quick feedback!
Comment by jamongkad — November 1, 2007 @ 5:47 am
your newsticker is great - just wanted to pass on my appreciative thanks to you
All the best,
Stu.
Comment by stuart — November 28, 2007 @ 2:00 pm
Very cool!
In IE, the full text of all the items list briefly as a stack. Then the first one comes up and paints with the typewriter effect.
How do I stop the brief appearance as a list?
Comment by barry — February 3, 2008 @ 6:44 pm
Hi Barry,
What you’re seeing there is a brief delay before the javascript has loaded (try disabling javascript and you’ll see the full unordered list).
In theory you could adjust your CSS to hide subsequent items, and once the javascript loads fully it should show only the correct one as normal - but don’t forget to consider the accessibility implications of this
Perhaps in your case having just the first item for non-js users is acceptable?
Comment by bryan — February 6, 2008 @ 11:40 pm
That’s exactly what I’m looking for. Haven’t tried the stuff yet; but will do that in a short while. Thanks!
Comment by Kashif S. Malik — February 22, 2008 @ 1:52 pm
Hi Bryan,
nice plugin! It was exactly the thing I was lookin for, but i found one problem: you can’t use more than one ticker on a page… Is there a quick fix for this? thanks!
Comment by MrT Icker — March 10, 2008 @ 5:16 pm
Hi “Mr Icker”
You can put two tickers on a page by declaring two sets of options variables and calling the ticker function twice, once for each set. You might find the visual effect doesn’t work so well but it should function. Have fun!
Comment by bryan — March 10, 2008 @ 8:16 pm
Regarding Barry’s question, how do you adjust the CSS to hide the subsequent items? Thanks!
Comment by Jack — August 14, 2008 @ 6:13 pm
Hi Jack,
You could hide all list items in your list and then use li:first-child to show the first one only. e.g.
ul#news li {
display:none;
}
ul#news li:first-child {
display:block;
}
While the CSS above will work for showing only the first item of an unordered list of id “news”, I haven’t done any thorough testing with the news ticker (or indeed cross-browser, though you should find that’s OK).
One thing you will need to do is have your javascript load CSS to override the display:none declaration: the news ticker needs all of the list items to be display:block, or you won’t see anything.
As mentioned before, remember that this will make all but the first item unavailable to users with CSS but without javascript. As long as they can get that hidden information in an alternative way you should be OK from an accessibility perspective.
Hope that helps!
Comment by bryan — August 16, 2008 @ 12:10 am
Hi Bryan,
Thanks for getting back to me about that. Although initially I couldn’t get my head around a suitable piece of CSS, I actually came up with an alternative piece of code that people may find easier to implement. Although I’m not the best when it comes to following standards and the like so let me know if it’s bad practise!
#newsticker ul {
width: 953px;
height: 18px;
overflow: hidden;
}
#newsticker li {
padding-bottom: 10px; /* to make sure you can’t see tops of words as it loads */
}
I’ve placed the newsticker in a ”. But this way you don’t need any javascript to adjust the CSS and it seems to work pretty well.
Thanks so much for the script! It’s brilliant and it’s made my website look so much better than it did.
Comment by Jack — August 16, 2008 @ 4:27 am
Sorry, where it says “newsticker in a ””, it’s meant to say that it’s in a DIV where the id=”newsticker”.
Comment by Jack — August 16, 2008 @ 4:29 am
Really good plugin - how easy is it to modify it so that it doesn’t require the list elements to be links (I just wanted to use text)?
Comment by Al Jenkins — August 20, 2008 @ 3:36 pm
Hi, this plugin is so cool, but im having problems with merging it with click functions and stuff from jquery, its me or its a bug?
Comment by Andres Luque — August 22, 2008 @ 12:43 am
@Al - if you were to put a p or span in place of the anchor it would be very straightforward to do. Naturally you’d want to consider the semantics of the markup you go for
@Andres - I’ve used this ticker on pages with lots of other jQuery stuff going on. “Merging” suggests you’re trying to adapt the plugin itself though?
(Sorry for the excessively delayed response by the way!)
Comment by bryan — October 23, 2008 @ 10:31 pm