SharePoint Vertical News Ticker

On a recent project I needed to create a simple vertical news ticker to display announcements from a SharePoint list. It was easy to do because I just used some of the code from the announcements slider I built a while back so I did not bother to write a post about it. Yesterday I saw a post on EndUserSharePoint.com about how to setup something similar so I figured I would share my (cheaper) solution.

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.

[sourcecode language=”plain”] <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>
[/sourcecode]