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.