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. More details and the download are on the jQuery plugin page, and I’ve included the documentation on this site. Hope you find it useful - please let me know if you do (or if you have any problems) - and a vote for it on the project page is always welcome :-)
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); } }); });
Update 28 March 2010: There’s now a new version (2.0) available. This includes accessibility controls (stop and resume) and the ability to include stop-on-hover to make the links easier to click (both enabled by default). A ‘next’ button to manually loop round the items is to follow very soon.
Additional update 28 March 2010: There’s now manual “next” functionality in release 2.1
Update 4 April 2010: There’s now a new version, release 2.2 which includes improved interactions and “previous” functionality.
Important: version 2 and up of the ticker plugin require at least jQuery 1.4.x. See details on how to use the ticker in Drupal.
Comments (82 so far)
great plugin - i have a requirement to pause the ticker on mouseover and also reveal all of the text for that item instantly. is there a way to do this.
thanks
michelle
Hi,
Thanks for the great plugin! I was wondering if there is any way I can direct the newsticker to a UL in a different location, i.e. the ticker is in the header but the UL I’d like to use is on one of my pages. Right now I’m just copying my UL and inputting the it manually below the ticker in the header…
Hi,
I wanted to use two tickers on one page as well, so fixed this issue :) You can even use 2 different startDelays if you like.
Just create two separate tickers and call the $().newsticker for each ticker-div.
The diff:
# This patch file was generated by NetBeans IDE
# This patch can be applied using context Tools: Apply Diff Patch action on respective folder.
# It uses platform neutral UTF-8 encoding.
# Above lines and this line are ignored by the patching process.
– jquery.newsTicker1.2.2.js
+++ jquery.newsTicker1.2.2.multi.js
@@ -38,9 +38,11 @@
(function($) {
function runTicker(settings) {
+
+ var currentLength = settings.currentLength;
+ var currentItem = settings.currentItem;
+
if(settings.firstRun == 1){
- currentLength = settings.currentLength;
- currentItem = settings.currentItem;
settings.firstRun = 0;
}
if(currentItem == settings.newsItemCounter + 1){
@@ -56,6 +58,7 @@
}
}
+ var placeHolder;
if( currentLength % 2 == 0) {
placeHolder = settings.placeHolder1;
}
@@ -72,6 +75,8 @@
$(settings.newsList + ’ li’).text(tickerText + placeHolder);
}
currentLength ++;
+ settings.currentLength = currentLength;
+
setTimeout(function(){runTicker(settings); settings = null;},settings.tickerRate);
}
else {
@@ -83,6 +88,8 @@
}
currentLength = 0;
currentItem ++;
+ settings.currentItem = currentItem;
+
\ No newline at end of file
setTimeout(function(){runTicker(settings); settings = null;},settings.loopDelay);
}
}
It would be nice to have a ‘use_html’ option in the settings.
If true, the content should be processed using .html() instead of .text()
Thanks for the excellent script! Took me a little while to set up but it’s great. Thank you very much! (:
Can anybody please tell me how do i write the functionality to pause,play,next and previous items for a scrolling news ticker coming in the form of rss
good work!
try to make it availble for php and mysql.
Hi Stuart,
It’s been a while coming but there’s a new release now at http://plugins.jquery.com/node/13987 which includes stop-on-hover and also stop and resume controls. When stopping the animation, it shows the full text of the current item, and resuming will start from the next one.
Hope that helps!
Bryan
Hi Steve,
It’s been a while coming but there’s a new release now at http://plugins.jquery.com/node/13987 which includes stop-on-hover and also stop and resume controls. When stopping the animation, it shows the full text of the current item, and resuming will start from the next one.
Hope that helps!
Bryan
Hi Kruti,
There’s a new release now at http://plugins.jquery.com/node/13987 which includes stop-on-hover and also stop and resume controls for the news ticker. When stopping the animation, it shows the full text of the current item, and resuming will start from the next one.
The ‘next’ button is planned for the very near future :-)
Hope that helps!
Bryan
Hi Michelle,
The latest release of the plugin now gives this functionality, so if that’s still relevant for you, I hope it’ll help.
Bryan
Hi Jeroen,
Using .html() to include the tickered content wouldn’t work: because the content is typed out one character at a time, the HTML would get broken as it started to write out any HTML tags.
I’m afraid I don’t currently have any plans to extend the functionality to allow for more complex content.
Bryan
{Amazing|Amazing Dude|Wow dude|Thanks dude|Thankyou|Wow man|Wow}, {that is|this is|that’s} {extremely|very|really} {good|nice|helpful} {info|information}, {thanks|cheers|much appreciated|appreciated|thankyou}.
Kudos for developing such a great ticker plugin Bryan. I’m a novice to Jquery dom. Is it possible to show each line of my SP list as a separate bullet point? E.g. once the first bullet is scrolled, the next bullet is populated and so on.. I’d really appreciate your feedback on this. Thanks!
Hi Bryan,
and many thanks for your plugin.
I, however, needed the links to open in a new tab/window.
I agree with your previous remarks on the deprecated “target” attribute and have chosen to use JS instead. I have therefore modified the latest version of your BBC-like news ticker.
Here it is: http://us.fotolibra.com/js/jquery.newsTicker-2.2.js
I have introduced a new option “openInNewTab” which is set to “false” by default.
A bit quick and dirty (it could be more jquery-ish/optimised), but it does the job I (and Martin) needed!
You may find it interesting.
Many thanks.
Damien
hi, many thanks for the plugin!
I have a little problem .. I need to add a css class to my list markup to control link behaviour : e.g. handle internal links / external links ..
but the plugin strips the anchor tag!
I start with : <a class=”internalAJaxLink” href=”/resource/124/”>headline test</a>
and its rendered like: <a href=”/resource/124/”>headline test</a>
Am I missing something in the docs ? …or maybe there is a quick fix..?
cheers
zack
Thanks Bryan! Before your newsticker, I used jquery liscroll. I really prefer newsticker.
Hi Damien,
Thanks for your comment. While - as you know from my comments about use of “target” and the related post http://www.makemineatriple.com/2009/02/link-target - I hadn’t any plans to enable this within the plugin and am not a fan of this behaviour, I’ll be interested to take a look and will consider whether to include this functionality as a [non-recommended :-) ] option: I appreciate that sometimes people nevertheless do decide to implement that. I’ll let you know if I do.
Thanks, Bryan
Hi Zack,
It’s a known “feature” - or to put it better, I only supported the actual href attribute in the original ticker and have not yet extended that side of things. Most recently my focus was to add accessibility enhancements.
I’d like to support additional attributes, and may be able to roll this out relatively soon (I can’t promise a specific timeline but I’ll try to take a look this coming weekend).
In the meantime, I’m guessing that your internal / external classes are for decorative purposes (e.g. an icon for external links)? If so, you could potentially use CSS attribute selectors instead. For example, to match all links which are not internal to makemineatriple.com (for the sake of illustration we’ll assume all of my internal links are not prefixed with the domain - i.e. all of the form /foo/bar), I could do:
a[href^=”http://”] {}
to match all links where the href attribute does start with “http://” and which we can then regard as external. See http://www.w3.org/TR/css3-selectors/#attribute-substrings for more information.
I’ll post an update on this page about any new features for attributes…
Bryan
Great plugin, how could i make it work with an XML file from another domain? I have never used JSON and im a bit stuck! I want to feed in from my blog on a different domain.
HELP!
Can you guide me how to make it work in drupal, i have tried to include jquery 1.4 but it will not work.. so i san to know how to include 2 jquery in drupal
Great plugin. Thank you very much.
Is it possible to resume the ticker after hover-out?
Thanks - that works fine, using xml feeds from remote sites cached locally on my asp.net server.
I like the way I can stick my own static items in there too.
For the “flash of unstyled content” thing, I just hide the UL in the CSS with display:none and then show it with j(‘ul#news’).show(); after the j.ajax grab of the xml completes. Set the start delay to zero, and it works the way I want it to.
Kudos. Great Plugin and Ticker.
I’m having problems adding 2 tickers on one page.
I have two different options variables and have called $().newsTicker(opts); twice (once for each options variable).
There is a JS error on the page:
Uncaught TypeError: Cannot read property ‘newsList’ of null
Can you help with this?
Thanks,
MJ
Hi,
found this plugin via gooooogle.
Love how it intracts. but there is a problem in browsers that
links with “?” mark gets disabled (ex. http://blog.com/index.html?page=2). Could you give a quick patch?
Hi Bryan,
Nice script. I needed to use external RSS feeds with it, so I came up with this. It uses google RSS feed aggregator to convert the XML to an JSON object. Enjoy!
$(document).ready(function () {
var options = {
newsList: “ul#news”,
startDelay: 10,
tickerRate: 20,
limit: 10,
key: null
}
var api = “http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=” + escape(“http://travel.state.gov/_res/rss/TWs.xml”) +
(options.limit != null ? “&num=” + options.limit : “”) +
(options.key != null ? “&key=” + options.key: ”“);
$.getJSON(api, function(data){
// Check for error
if (data.responseStatus == 200) {
// Process the feeds
var ent = data.responseData.feed.entries;
$(‘<ul id=”news”></ul>’).appendTo(‘#TickerDIV’);
$(ent).each(function () {
$(‘<li><a href=”’ + this.link + ‘”>’ + this.contentSnippet + ’</a></li>’).appendTo(‘ul#news’);
});
$().newsTicker(options);
} else {
// Handle error if required
if (options.showerror) {
if (options.errormsg != ”) {
var msg = options.errormsg;
} else {
var msg = data.responseDetails;
};
$(“#TickerDIV”).html(‘<div class=”rssError”><p>’+ msg +’</p></div>’);
}
};
});
});
-Doug
Hi Brian!
I love the plugin! However, I have not been able to get it to work? (Stupid, probably….my apologies….) I also installed Firebug, and found out that it says “$().newsTicker is not a function; $().newsTicker(options); ”
I do not know how to solve this?
Example page is located at: http://www.mbarch.nl/new/
At http://www.mbarch.nl/new/test.html, the example is working with the same script references?
Your help would be greatly appreciated!
Kind regards from the Netherlands,
Anja
Hi Bryan
Re. your post 28 March 2010 - apologies for this belated reply! This is a really cool update, so many thanks!
Just got one question (and I’m no js expert so please excuse me if this is silly)…
Is there any way to have the ticker animation resume on a mouseleave event instead of a click event? So in other words, animation stops when you mouseover the link, but resumes when you mouseleave it?
That would go some way to solving the Firefox non-responsive link issue that I mentioned earlier (Post 12 May 2009 - 19:01) without having to resort to adding a Resume button.
I had a look at the code but couldn’t manage it. Do you know if it would be possible?
Also eager to know how I can bind mouseout or leave to resume
Hi Peter,
Sorry for the delayed reply. There’s a post about using this in Drupal at http://www.makemineatriple.com/2010/06/using-bbc-style-news-ticker-drupal
Hope it helps,
Bryan
Hi Anja,
Glad you like the plugin! Sorry for the hold-up in getting back to you. I’ve taken a look at your example page, and the problem is that the ticker javascript file is being called before the jquery one. You need to call jquery.js before any javascript which uses jquery.
Hope that helps!
Bryan
Hi Steve and Darren,
I’ve got a dev version of the ticker with resume on mouseout (essentially it repeats the mouseover binding for mouseout, and triggers the resume function if the ticker is not animating). However, I’ve not got the behaviour working to a suitable level for release: the mouseout and mouseover events appear to be getting triggered in quick succession by the browser as the mouseout action is performed.
I’ve not really had a chance recently to look at this in any detail, but I’ll post an update on here if it’s added in the future.
Bryan
Post new comment