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.

<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:

Image Slideshow with captions Annoucements Slider using SP Web Services A Better Annoucements Ticker