New Ticker

For this ticker I started out with a default Annoucements list. Because I wanted to display a thumbnail for each annoucement I added a signle line of text column called Subtitle and a Picture column called Picture. Here are the columns I used.

Here is the basic structure of the ticker.

<div id="actions">
<a class="prev">« Back</a>	<a class="next">More pictures »</a></div>
<div class="scrollable vertical">
    <div class="items">
      <div class="item">
           <img src="#" alt="Thumbnail Image" />
           <h3>Title</h3>
          <strong>
              <span>Subtitle Text</span>
          </strong>
        <p>First 200 Characters of the body</p>
       <p><a href="#">Read more</a></p>
    </div>
   </div>
</div>

Below is the xsl code I used to build the ticker.

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
				<xsl:param name="dvt_apos">'</xsl:param>
				<xsl:param name="url_PATH_INFO" />
				<xsl:param name="url_HTTP_HOST" />
	<xsl:param name="Today">CurrentDate</xsl:param>
				<xsl:variable name="dvt_1_automode">0</xsl:variable>
				<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
					<xsl:call-template name="dvt_1"/>
	</xsl:template>
				<xsl:template name="dvt_1">
					<xsl:variable name="dvt_StyleName">Table</xsl:variable>
					<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
						<script>
$(function() {
	$(".scrollable").scrollable({ vertical: true, mousewheel: true, circular: true, keyboard: true });
// scrollable has to match the class on the div you use to wrap your items.
});
</script> <div id="actions">
	<a class="prev">« Back</a>
	<a class="next">More pictures »</a>
</div>
		<div class="scrollable vertical">
		<div class="items">
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows"/>
			</xsl:call-template>
			</div>
			</div>
	</xsl:template>
				<xsl:template name="dvt_1.body">
					<xsl:param name="Rows"/>
					<xsl:for-each select="$Rows">
						<xsl:call-template name="dvt_1.rowview"/>
		</xsl:for-each>
	</xsl:template>
		<xsl:template name="dvt_1.rowview">
		<div class="item">
		<xsl:if test="not(normalize-space(@Picture) = '')"><img src="{substring-before(@Picture,',')}" /></xsl:if>
		<h3><xsl:value-of select="@Title"/></h3>

				<strong>
		<xsl:if test="not(normalize-space(@SubTitle) = '')"><span><xsl:value-of select="@SubTitle " disable-output-escaping="yes" /></span></xsl:if>
		</strong>

				<p><xsl:value-of select="substring(@Body,0,200)" disable-output-escaping="yes" /></p>
				<p><a href="http://{$url_HTTP_HOST}/{@FileDirRef}/DispForm.aspx?id={@ID}">Read more</a></p>
		</div>
	</xsl:template>
</xsl:stylesheet></Xsl>

If you try to run the page with just this XSL it will give an error. You will also need to add these two lines to the parameter bindings section of your dataview web part. I used these 2 parameters to get the URL of the current page in order to built the ‘read more’ link. This is what I would call a best practice because other wise you would have to hard code the URL to your site which makes it harder for others to use your code.

<ParameterBinding Name="url_PATH_INFO" Location="ServerVariable(PATH_INFO)" DefaultValue=""/><ParameterBinding Name="url_HTTP_HOST" Location="ServerVariable(HTTP_HOST)" DefaultValue=""/>

In addition to this code you will also need to add links to these two files.

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
/* css file to style the ticker */
<link rel="stylesheet" type="text/css" href="scroll.css" />

Here is the css I used to style my ticker.

/* root element for scrollable */
.vertical {
	/* required settings */
	position:relative;
	overflow:hidden;
	/* vertical scrollers have typically larger height than width */
	height: 665px;
	width: 700px;
	border-top:1px solid #ddd;
}

/* root element for scrollable items */
.items {
	position:absolute;
	/* this time we have very large space for height */
	height:20000em;	margin: 0px;
}

/* single scrollable item */
.item {
	border-bottom:1px solid #85b1ee;
	border-top:1px solid #85b1ee;
	margin:10px 0; padding:15px; font-size:12px;
	height:180px; background:#d6e8ff;
}

/* elements inside single item */
.item img {
	float:left;
	margin-right:20px;
	height:180px;
	width:240px;
	border:5px solid #fff;
}

.item h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#4a6499;
	font-weight:normal;
}

.item p a{padding:3px;}

.item p a:hover{ background:#fff; text-decoration:none;}

.item p { padding:3px; margin:5px;}

/* the action buttons above the scrollable */
#actions { width:700px; margin:30px 0 10px 0;}

#actions a {font-size:11px;	cursor:pointer; color:#666;}

#actions a:hover {text-decoration:underline; color:#000;}

.disabled {visibility:hidden;}

.next {float:right;}

Notes

• The XSL is setup so that if no thumbnail is provided it will automatically adjust. The same is true if no subtitle is entered.  This is done using conditional formating.
• Only the first 200 characters of the body are shown. To change this amount you can just change this line of code xsl:value-of select=”substring(@Body,0,200)”.
• You do not need the whole jQuery library in order for this to run.

Resources

• jQuery Scrollable Plugin
  http://plugins.jquery.com/project/scrollable
• How to get the Current URL in XSL

  http://www.jwc3.net/2008/05/how-to-get-url-in-xsl.html

Related posts:

1. Zoomable Photo Grid
2. Anything Slider in SharePoint – Update
3. CSS-Tricks AnythingSlider in SharePoint

A few features of the ticker:

• The ticker pulls its contents from the default SharePoint Announcements list using jQuery.
• The title of the announcement links to the display form for the item
• Ticker pauses on mouseover
• For each Announcement the first 500 characters are shown as an intro.

Here is the code it can just be pasted in a content editor web part. The only dependency is jQuery. The code for the ticker came from this post on Net Tuts Plus. I removed the comments but you can see the commented code and an explanation here.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="ticker.js"></script>
	<script type="text/javascript">
       $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Announcements</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='Body' /> \
                               <FieldRef Name='ID' /> \
								<FieldRef Name='FileDirRef' /> \
								<FieldRef Name='Created' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
        	var teaser = $(this).attr("ows_Body");
        	var teaserText = teaser.slice(0,500);
        	var urlValue = $(this).attr("ows_FileDirRef");
			var urlArray;
			var urlName;
			     if (urlValue == undefined)
	    	{
      		urlName = "";
        	}
        	else {
        		urlArray = urlValue.split(";#");
        		urlName= urlArray[1];
        	}     	

            var liHtml = "<dt class='newsItem'><a href='/" + urlName + "/Dispform.aspx?ID=" + $(this).attr("ows_ID") + "'>"
            + $(this).attr("ows_Title") + "</a></dt><dd>" + teaserText + "</p></dd>";
            $("#ticker").append(liHtml);
        });
	$(function() {
		var ticker = $("#ticker");
		ticker.children().filter("dt").each(function() {
		  var dt = $(this),
		    container = $("<div>");
		  dt.next().appendTo(container);
		  dt.prependTo(container);
		  container.appendTo(ticker);
		});
		ticker.css("overflow", "hidden");
		function animator(currentItem) {
		  var distance = currentItem.height();
			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
			animator(currentItem.parent().children(":first"));
		  });
		};
		animator(ticker.children(":first"));
		ticker.mouseenter(function() {
		  ticker.children().stop();
		});
		ticker.mouseleave(function() {
		  animator(ticker.children(":first"));
		});
	  });
        }
</script>
<style type="text/css">
#ticker {
  width:180px; height:420px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
  font:normal 14px Georgia; padding:0 10px 5px 10px;
  background:#e5e5e5 url('/_layouts/images/keyword.gif') no-repeat left 60%; padding-top:10px; padding-left:22px;
  border:1px solid #ffffff; border-bottom:none; border-right:none;
}
#ticker dd {
  margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
  border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
  border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;  }
#ticker div { margin-top:0; }
</style>

<div class="myclass">
		<dl id="ticker"/>
</div>

Related posts:

1. A Better Annoucements Ticker
2. Image Slideshow with captions
3. Adding Suggestions to the Sharepoint search box : Part 2