JQuery News Ticker

http://www.jquerynewsticker.com/

Render a list as a news ticker using XSLT

Details

Published on Sunday, 24 July 2011 22:30

Charging on with more XSLT and ContentQuery goodness, here is an example of how to render a news ticker from a simple sharepoint list using XSLT, ContentQuery, and Jquery.
Note: For this demo I will assume you have jquery already loading on your site pages.

Step 1: Create and populate a simple list

Create a new list called "ticker". Add a new column called "link". This step can be skipped if you have another list with a title and a separate hyperlink field to use but for this instructional we will be referring to the ticker list.
Add a few items with titles and hyperlinks to the list.

Step 2: Download this beautiful jquery newsticker plugin

Download plugin files here.
Once downloaded, unzip and upload them to your server.

Step 3: Add link references to the files in your master page

Actually you can do this however you like but for ease of demonstration Im adding mine to the master page.
You will need to add css links to the ticker-style.css file and script links to the jquery.ticker.js... where ever you put them on your server.

Step 4: Pass through the current row to the itemStyle.xsl

NOTE: Never alter the standard itemStyle.xsl or ContentQueryMain.xsl files themselves. Make a copy of it and have your webpart reference the copy instead.
To output the ticker we need to make sure the custom ContentQueryMain.xsl passes through the current position when calling the custom itemStyle.xsl templates.This blog post shows you quickly and simply how to achieve this.

Step 5: Adding the ticker itemstyle.

Make sure you have open your itemStyle.xsl. Add the following code to your custom itemStyle.xsl file just before the last closing </xsl:stylesheet> tag.

<xsl:template name="ticker" match="Row[@Style='ticker']" mode="itemstyle">
 <xsl:param name="CurPos" />
 
 <xsl:variable name="SafeLinkUrl">
  <xsl:call-template name="OuterTemplate.GetSafeLink">
   <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
  </xsl:call-template>
 </xsl:variable> 
 
 <xsl:if test="$CurPos='1' "> 
  <xsl:variable name="JScript">
   <![CDATA[
    $(document).ready(function(){
     
     $('.ticker-news-item').each(function(){
      var newItemString = "<li class='news-item'>" + $(this).html()+ "</li>";
      $('#js-news').append(newItemString);
      $(this).remove();
     }); 
        
        $('#js-news').ticker({
        });      
    });
   ]]>
  </xsl:variable> 
  
  <script type='text/javascript'>
   <xsl:value-of select="$JScript" disable-output-escaping="yes"/>
  </script>
  <div id="ticker-wrapper" class="no-js"><ul id="js-news" class="js-hidden"></ul></div>
                 
 </xsl:if>
 
 <div class='ticker-news-item' ><a href='{$SafeLinkUrl}' target='_blank'><xsl:value-of select="@Title" /></a></div> 
</xsl:template>

Step 6: Add the List to the page via a Content query web part.

Add a content query webpart to a page and click to configure it via the tool pane.
Set the source to "Show items from the following list" then browse to find the ticker list you created.
Then select your ticker style from the item style dropdown.
In the fields to display Link box, type "link".
In the fields to display title box, type "title".
Click ok and then save the page.

Voila... all should be well.

Check out the Jquery news ticker plugin website for informatin on how to customise the plugin further.
I will quickly go through the parts of the items style to explain whats going on.
First we ensure the current position variable is passed in. This enables us to output the necessary javascript and outer shell of the ticker once only.

<xsl:template name="ticker" match="Row[@Style='ticker']" mode="itemstyle">
 <xsl:param name="CurPos" />

Inside the if statement, the code block is only run if its the first item.
Because the itemstyle is run for each item in the content query, we need a check to make sure the javascript is only output once.
Then the javascript is output and so is the shell UL tag that is used for creating the ticker.

 <xsl:if test="$CurPos='1' "> 
  <xsl:variable name="JScript">
   <![CDATA[
    $(document).ready(function(){
     //this builds the list items that are used for the ticker
     $('.ticker-news-item').each(function(){
      var newItemString = "<li class='news-item'>" + $(this).html()+ "</li>";
      $('#js-news').append(newItemString);
      $(this).remove();  // remove the old item
     }); 
        
        $('#js-news').ticker({
        });      
    });
   ]]>
  </xsl:variable> 
  
  <script type='text/javascript'>
   <xsl:value-of select="$JScript" disable-output-escaping="yes"/>
  </script>
  <div id="ticker-wrapper" class="no-js"><ul id="js-news" class="js-hidden"></ul></div>
                 
 </xsl:if>

Then for each item, a temporary div item is output. This gets removed upon build by the javascript.

 <div class='ticker-news-item' ><a href='{$SafeLinkUrl}' target='_blank'><xsl:value-of select="@Title" /></a></div> 
</xsl:template>