Horizontal News Ticker Using SharePoint 2010 CQWP
This post was triggered by a SharePoint forums post on creating a scroller or marquee. There are ready web parts (commercial) that provide this functionality, of course, but can we do it using the web browser alone?
Well, SharePoint has a content query web part (CQWP) that can be utilized to extract data from lists and libraries across the whole site collection and it presents entries in a standard html list format (
- …). There is a JQuery plugin that converts this structure into a news ticker (see the liScroll website for details and download). Notice that JQuery can also use a class to identify the
- element as described on the liScroll site and one of the classes used by CQWP is dfwp-list. The steps are simple: add your own CQWP to a page (in this example, I used Blog Posts) and set it up as titles only. Add a content editor web part (CEWP) above the CQWP and edit its source. Add the JQuery library (used 1.6 in this example, make sure your master pages does not reference one already), then add liScroll plugin and its associated style sheet. Here, I ctually uploaded the three of them to a document library and referenced them from there (a must if your site is not connected to the Internet). Then, add the short script that does the scrolling. You can hide the CEWP (set chrome type to none) and also configure the CQWP (ex. give it a better title).
Notice that you can control the scrolling speed by providing a “travelocity” parameter as explained on the liScroll website. You can also modify the CSS to change the interface.
Hi. Thanks for posting this. I am having an issue getting this to work, however…
I have followed the instructions; the jquery and iscroll js files are in the SiteAssets library along with the iscroll css file. I also created a marquee js file from your example and loaded that to the same library.
I created an Announcements list and seeded it with three announcements; I then created a CQWP and wired it to the Announcements list; the three announcements display fine. I then added a CEWP and referenced the marquee js file.
The marquee does not display.
From a little debugging the marque function is being called but it appears that the iscroll function is not – as if the ul.dfwp-list tage was not found.
Can you help?
Thanks
Paul
Hi again… bit more information, I get following error when the page renders…
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET4.0C; .NET4.0E; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.3)
Timestamp: Fri, 10 Jun 2011 13:04:30 UTC
Message: Object doesn’t support this property or method
Line: 698
Char: 2
Code: 0
URI: http://portal.ad2008r2.loc/members/test%20site/default.aspx?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage
This error references the following line…
$(“ul.dfwp-list”).liScroll();
Any assistance would be greatly appreciated.
Thanks
Paul
@Paul Bedford
There seems to be some misunderstanding. This solution does not involve a marquee js file. What you see in the image is the html source of the CEWP and that’s all needed. We reference the jq, the plugin and the css file then call the method. I also tested it on FF4 (something I did not do before) and it works as it does in IE9. Also, changed source to announcements list – just to make sure and no problem.
AK
hello, if I want to marquee the announcements list , is it using the “ul.dfwp-list” ? Thannks
@Elaine
The out of the box announcements list renders as table cells, so the described method won’t work. If you have SharePoint server you can use the CQWP or you can modify the xslt of the announcements (display linked titles only) as html unordered list (ul). See my blog on June 11, 2011 for more details.
AK
Thanks a lot Abed Khooli.. Worked perfect for me..
By the way i used ul.dfwp-list to apply scroll function for announcement list
Does this work on MOSS 2007 sites?
@tajma
I did not test it in MOSS 2007 but there is no reason why it should not work. Make sure the CQWP uses the same css classes (ex. dfwp-list).
AK
How does one go about making sure the CQWP uses the same CSS classes? Is this through Designer?
@tajma
The associated css are included in a separate file (see screenshot) and can be downloaded from the liscroll website above.
AK
Hi there, nice post Abed!
Check out my post in the subject, just published about how to use easySlider and create a template for a news ticker.
http://chrisstahl.wordpress.com/2011/07/18/display-news-pages-with-cqwp-–-part-3/
@Christian Ståhl
Nice CQWP series. Thank you for sharing.
AK
I am having the same issue Paul is having. I uploaded the .js and .css files to an assets library I named scripts, and followed the instructions, but the content query web part looks the same, and when I view the console using firebug, it says, “$(“ul.dfwp-list”).liscroll is not a function.” What am I doing wrong?
@Nick
JavaScript is case sensitive: $(“ul.dfwp-list”).liScroll();
Notice uppercase liScroll. Also, make sure you use normal (plain text) quotes. If you still have problems, try any function of jq to make sure your scripts work.
AK
I used this and it worked great. Thanks!
Thanks for this tutorial. It worked perfectly. The only thing I had to do different was to put the CSS stylesheet reference in the head section of the masterpage. It didn’t work when it was in the CEWP.
thanks for this article.
i did what you said but finally nothing happen ,i insert a CEWP and i made a .txt file for it which contain exactly this codes:
$(function(){
$(“ul.dfwp-list”).liScroll();
});
then i insert a CQWP and make a custom list for it with one column “Title”.
but nothing happen then!
what’s wrong with this?
please help me,
i really appreciate your help…
thanks for this article.
i did what you said but finally nothing happen ,i insert a CEWP and i made a .txt file for it which contain exactly this codes:
(i deleted from the code )
———————————–
script type=”text/javascript” src=”/sites/MyIrnaPortal/Style Library/other/jquery.li-scroller.1.0.js”
script type=”text/javascript” src=”/sites/MyIrnaPortal/Style Library/other/jquery-1.5.min.js”
script type=”text/javascript” src=”/sites/MyIrnaPortal/Style Library/other/jquery-1.6.js”
link type=”text/css” href=”/sites/MyIrnaPortal/Style Library/other/li-scroller.css” rel=”stylesheet” media=”screen”
$(function(){
$(“ul.dfwp-list”).liScroll();
});
———————————-
then i insert a CQWP and make a custom list for it with one column “Title”.
but nothing happen then!
what’s wrong with this?
please help me,
i really appreciate your help…
@elmira
There are a couple of obvious issues in your CEWP contents: you can’t reference more than one copy of the jquery library (it’s OK if you have several copies in the same folder, but can only reference one copy in a certain page. The other thing is order in js references: you reference the jquery library before you reference the scroller js library). See the screen image!
AK
thank you very much,it worked!
the problem was what you said,
another question,
i had 2 script tag in my master page which i used for a slide show in same page with this news tricker ,and now my slide show doesn’t work
i saw you mentioned “used 1.6 in this example, make sure your master pages does not reference one already”
what should i do for it?
2 script tags are:
script type=”text/javascript” src=”/sites/IrnaPortal/SitePages/jquery.min.js”
script type=”text/javascript” src=”/sites/IrnaPortal/SitePages/jquery-ui.min.js”
@elmira
If jquery library is referenced in the master page, you can remove it from the CEWP. The 1.6 version I used was just a random choice.
AK
I got this to work but I’m only seeing two items scroll, regardless of how many are in the list. If I remove the CEWP, the CQWP is showing all items so I know that portion is working properly. Any ideas how to fix this?