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!
Update 29 March 2009:
You can get your news items from your XML / RSS feed, and have it tick out on your site. To do this, you can use the ajax() function in combination with the ticker. Note that you cannot use this for a feed on another domain - you’d need JSON to get data from a different site. Alternatively, you could use another method (server-side) to retrieve the XML and save it locally to your site (e.g. wget). For the live example I’m using this site’s feed.
Here’s some sample code:
$(document).ready(function() {
var options = {
newsList: "ul#news",
startDelay: 10
}
$.ajax({
type: "GET",
url: "news.xml",
dataType: "xml",
success: function(xml) {
$('<ul id="news"></ul>').appendTo('body');
$(xml).find('item').each(function(){
var desc = $(this).find('description').text();
var link = $(this).find('link').text();
$('<li><a href="'+link+'">'+desc+'</a></li>').appendTo('ul#news');
});
$().newsTicker(options);
}
});
});
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
Hi, has anybody had trouble with opening links in a new window (target=_blank”)? Can’t seem to get it to work for links within the ticker… My client is very un-happy, he actually works for the BBC news website!
Comment by Martin Classiclpscouk — February 6, 2009 @ 12:03 pm
Hi, I have two tickers on the same page. When I use only one, there is no problem, it works perfectly, but when I use two at the same time (two ul lists with different IDs and two different calls to the same javascript function newsTicker), one interferes with the timing of the other. Is there a simples solution for this issue? Thanks.
Comment by Marcos Buarque — February 9, 2009 @ 6:02 am
@Martin - The ticker doesn’t support attributes on the anchors (other than the href of course!). It would be straightforward for you to add a version of line 91 for the target attribute, and to embed the target into line 50 in a similar way to the href if you wished, however.
However, bear in mind that the target attribute is deprecated and doesn’t meet modern web standards, and that for accessibility reasons it’s better to allow users to choose whether to open a link in a new tab or window.
@Marcos - I’ve just tried two tickers on a single page and it seems to work fine as long as the startDelay variable is the same for each. The rate and other variables can differ. Don’t forget to give your variables for the options different names, though.
Comment by bryan — February 9, 2009 @ 11:53 pm
Hi, is there a way of adding list items without a link which will therefore only display as text. For example:
Foo
Bar
So, the first item will be rendered as a link, the second as plain text? Thanks
Comment by John — February 13, 2009 @ 10:58 am
Hi guys, I REALLY want to use this script (it looks great) but I’m having realy trouble getting it to work.
I know next to nothing about javascript (to be honest I’ve intentionally avoided it) and have never use jquery before, so I’d really appreciate it if someone might be able to take the time to walk me through setting it up step-by-step. I’ve been banging my head against a brick wall for 3 hours!!
So far, I’ve linked the jquery and newsticker .js files correctly (I think) and added the javascript code in the header but it still doesn’t do anything.
Would anyone mind having a look at http://www.invisibleinkwebdesigns.com/chase/world_news2.html and telling me what I’m doing wrong??
It would be GREATLY appreciated! Thanks.
Comment by Luke Sheppard — February 15, 2009 @ 3:52 am
Hi Luke,
You’re getting a javascript error ‘$ is not defined’ because the path to the javascript files is wrong (or they’re missing).
By the way, I would recommend using Firebug along with Firefox if you’re doing development - you can get very useful information from this to help find the source of any issues.
Hope that helps,
Bryan
Comment by bryan — February 15, 2009 @ 11:02 am
@John - as the plugin stands, it expects - and needs - the links. I’ll look into an update to allow for the mixture as there have been other requests along these lines.
Updated: John, please find a new release at http://plugins.jquery.com/project/BBCnewsTicker - let me know how you get on!
Bryan
Comment by bryan — February 15, 2009 @ 12:22 pm
Thanks very much - I was using relative paths to the javascript - I must have done something wrong there - I’ve put in the absolute paths and it works fine. I have no idea why the relative paths didn’t work - I’m sure I got them right!! How wierd.
Oh well, thanks very much.
Sorry, next question, how would I go about altering the script slightly to display just text, rather than links??
Thanks again for your help - very kind of you!
Comment by Luke Sheppard — February 15, 2009 @ 12:37 pm
Bryan, I had to comment out line 41 of the updated js file for it to work (//console.log(settings);)), but it works like a charm. Many, many thanks!
Comment by John — February 15, 2009 @ 1:19 pm
@John - oops, sorry about that. Teach me to rush a release…! I’ve updated the plugin. Thanks.
Comment by bryan — February 15, 2009 @ 3:48 pm
Hi Bryan
This is just what i’m looking for but having problems implementing it.
I’m new to jQuery and wondered if there is some ready to use bundled code (for dummies)?
When I add you code I get an error but maybe this is because I’m guessing what I’m doing. (!)
Thanks in advance
Matt
Comment by Matt — March 4, 2009 @ 5:37 pm
Hi Matt,
If you’d like to post a copy of the code you’re using, I’d be happy to take a look and help you out. What’s the error you’re getting?
It sometimes helps to look at the code in action, too - take a look at how it’s done on http://www.makemineatriple.com/jquery/?newsTicker as an example. (Or to see it “in the wild” you could look, for example, at http://www.campaign.ox.ac.uk/.)
A common mistake which leads to an actual error message is in not properly including the jquery javascript files (so the functions aren’t available).
Bryan
Comment by bryan — March 4, 2009 @ 8:16 pm
Hi Bryan,
Many thanks for getting back to me.
Here is the link i’m testing to try and get the ticker to work.
http://mattstorey.co.uk/ticker/test.html
I’m sure its something stupid on my part but if you can point me in the direction of whats going wrong that would be great.
Matt
Comment by Matt — March 5, 2009 @ 9:03 pm
Hi Matt,
You’re getting 2 javascript errors. The first one is the key here: “jQuery is not defined”. This shows that the jQuery library is not available. Looking at your source code, the jquery.js file is referenced correctly - but you’ve called it after the newsticker rather than before it. If you move that line to just before the line calling the newsticker js file, you should find it all works. (Basically, that loads up all of the jQuery stuff before the newsticker functionality tries to load.)
I highly recommend Firebug as a tool to help you debug your webpages. It’s a Firefox plugin.
Hope that helps - good luck!
Comment by bryan — March 5, 2009 @ 9:48 pm
Brilliant! All working now.
Thanks for a great script and getting back to me so quickly.
Comment by Matt — March 7, 2009 @ 10:05 am
help…i can do this news ticker..
i copy paste it to my site but it wont work…
can anyone help me with this ???
Comment by kamal — March 18, 2009 @ 10:15 am
Hi Bryan,
Very nice newsticker. By any chance can this be updated by an xml feed and if yes how would you do it?
Comment by Aodan — March 20, 2009 @ 10:55 am
Hi Bryan
Great work…. Just a quick question
How would it be possible to cycle through the news items using Links to view the next news item that in your array.
Cheers
Mike
Comment by Mike — March 25, 2009 @ 10:54 am
@kamal - if you’d like to post a link to your code, I’d be happy to take a quick look for you.
Comment by bryan — March 28, 2009 @ 3:30 am
@Aodan - I would suggest that the best route to doing this would be to separately grab the xml with a jQuery AJAX call, and have that create the news list for you. Then call the newsticker function on that list.
There may be a plugin to do the xml stuff for you. However, I’m giving that a quick look into, as I could create one myself if not
Drop me a line if that would be of use to you and I’ll keep you updated on progress.
Bryan
Comment by bryan — March 28, 2009 @ 3:38 am
@Mike - One way to do this would be to add back and forward links within the javascript; these would have to call the ticker plugin with an appropriately adjusted ‘currentItem’ setting. Within the ‘runTicker’ function you’d then need to amend the links so that the ‘currentItem’ setting associated with each one were updated as the ticker cycles itself round.
To do it on a completely manual cycle would need a more heavily modified version of the ticker code, combined with another plugin such as jCarouselLite (or indeed your own function). This would probably be more complex to do, so perhaps the first route, with a very long ‘loopDelay’, would be best.
Hope that helps,
Bryan
Comment by bryan — March 28, 2009 @ 3:57 am
Sweet, is all that needs to be said.
Comment by SB — March 28, 2009 @ 7:38 pm
Hi Bryan,
How do i remove the dot sign(.) in a first row of line?Do i need to remove from the script itself?
Comment by shah — March 30, 2009 @ 7:44 pm
Additional question from dot sign,how do i remove if i were need to remove from script and can you show me the steps need to be done.TQ.
Comment by shah — March 30, 2009 @ 7:46 pm
@shah,
I’m afraid I’m not quite clear what you mean, unless you’re referring to the default bullet point for an unordered list (which you’d control with your CSS). If your webpage is available online, perhaps you could post a link to it to illustrate the issue you’re having?
The behaviour of the news ticker is that it will print out each item of a list one by one, looping round them. All of the content and styling is then down to you. To start off with, I would recommend that you use a list with a single item, and without the ticker plugin enabled. Get that looking as you want with CSS, and then add more items and enable the ticker.
Hope that helps,
Bryan
Comment by bryan — March 30, 2009 @ 11:51 pm
Hi Bryan,
That would be a great help if you let me know on your progress on the xml stuff. Much appreciated.
Comment by Aodan — March 31, 2009 @ 10:45 am
Sorry for the confusing statement,what i meant is the bullet itself..how can i disable it?and by the way what do mean by single item and without the ticker plugin..im so sorry as im not very familiar with CSS tweaking..can you elaborate more..thanks.
Comment by shah — April 1, 2009 @ 12:27 am
@Aodan - I’ve updated the blog post to include information on tying in xml feed -> news ticker. Hope it helps - be interested to hear how you get on.
Comment by bryan — April 3, 2009 @ 10:00 pm
@shah - thanks for clarifying that. Don’t worry, we were all beginners at some point
What you’re after is the “list-style-type” property. The default setting is “disc”, which is what you’re seeing. To get rid of the bullet, set it to “none”: ul { list-style-type: none; }
There are various sites with details (only once you know what to search for in the first place though!) - try http://www.w3schools.com/CSS/CSS_reference.asp as a start point.
Comment by bryan — April 3, 2009 @ 10:09 pm
Hi Bryan,
Sorry for not getting back sooner but just wanted to say thanks for the help with the xml. It works a treat:) Thanks again.
Comment by Aodan — April 20, 2009 @ 4:01 pm
Superb script Bryan! Something I’ve noticed when viewing it in Mac browsers (Firefox, Opera and Safari, all OSX) - links don’t ‘work’ until each list item has finished scrolling/revealing. You can click in the meantime, but it’s as good as clicking on a # link - it doesn’t go anywhere. It’s only when each item is fully revealed that the links work. No problem on Windows IE, FF or Op - you can click at whatever stage of the scroll. Any idea if there could be a simple fix for this?
Other than that, thanks for a great script.
Comment by Steve — May 12, 2009 @ 7:01 pm
@Steve - I’ve just realised that I never replied to your comment - sorry about that!
I’ve come across the issue before (at the time the same thing happened on the BBC one - don’t know if that’s still the case). When I first looked at it I didn’t have an immediate solution, but I’ve a couple of further thoughts to look into, and I’ll keep you posted.
Comment by bryan — June 19, 2009 @ 7:20 pm