Home > CEWP, CQWP, SharePoint Server 2010 > Horizontal News Ticker Using SharePoint 2010 CQWP

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.

Categories: CEWP, CQWP, SharePoint Server 2010 Tags: Marquee, News scroller,
  1. Paul Bedford
    June 10th, 2011 at 12:50 | #1

    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

  2. Paul Bedford
    June 10th, 2011 at 13:06 | #2

    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

  3. Abed Khooli
    June 10th, 2011 at 16:17 | #3

    @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

  4. June 11th, 2011 at 10:48 | #4

    hello, if I want to marquee the announcements list , is it using the “ul.dfwp-list” ? Thannks

    • Abed Khooli
      June 11th, 2011 at 13:52 | #5

      @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

  5. siri
    June 16th, 2011 at 15:52 | #6

    Thanks a lot Abed Khooli.. Worked perfect for me..

    By the way i used ul.dfwp-list to apply scroll function for announcement list

  6. tajma
    June 25th, 2011 at 00:49 | #7

    Does this work on MOSS 2007 sites?

  7. Abed Khooli
    June 25th, 2011 at 07:26 | #8

    @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

  8. tajma
    July 11th, 2011 at 20:34 | #9

    How does one go about making sure the CQWP uses the same CSS classes? Is this through Designer?

  9. Abed Khooli
    July 14th, 2011 at 08:13 | #10

    @tajma
    The associated css are included in a separate file (see screenshot) and can be downloaded from the liscroll website above.
    AK

  10. July 18th, 2011 at 16:38 | #11

    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/

  11. Abed Khooli
    July 18th, 2011 at 19:18 | #12

    @Christian Ståhl
    Nice CQWP series. Thank you for sharing.
    AK

  12. Nick
    July 27th, 2011 at 18:43 | #13

    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?

  13. Abed Khooli
    July 29th, 2011 at 13:32 | #14

    @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

  14. Matt
    November 9th, 2011 at 17:11 | #15

    I used this and it worked great. Thanks!

  15. Mercy
    November 16th, 2011 at 17:23 | #16

    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.

  16. elmira
    November 26th, 2011 at 18:59 | #17

    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…

  17. elmira
    November 26th, 2011 at 19:04 | #18

    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…

  18. Abed Khooli
    November 28th, 2011 at 14:39 | #19

    @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

  19. elmira
    November 28th, 2011 at 20:58 | #20

    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”

  20. Abed Khooli
    November 30th, 2011 at 18:20 | #21

    @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

  21. Mark
    March 12th, 2012 at 19:44 | #22

    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?

  1. June 11th, 2011 at 13:41 | #1
    SharePoint 2010 Help » the SPXSLT Project And How To Turn Announcements Into Marquee
Add A Daily Quote To Your SharePoint Site