RSS Dave on Twitter

SharePoint Vertical News Ticker

Posted: November 17th, 2009 | Author: davecavins | Filed under: Uncategorized | Tags: , , , , | 9 Comments »

ticker1On a recent project I needed to create a simple news ticker do 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>
Bookmark and Share

Related posts:

  1. Image Slideshow with captions
  2. Adding Suggestions to the Sharepoint search box : Part 2
  3. Annoucements Slider using SP Web Services
  4. Styling SharePoint Blog Comments: Part 2
  5. Styling SharePoint Blog Comments

9 Comments on “SharePoint Vertical News Ticker”

  1. 1 Mark Miller, EndUserSharePoint.com said at 2:26 pm on November 17th, 2009:

    Dave – Nice alternative. I’ll try it out and get back to you. One note: what does “cheaper” mean, in this context. — Mark

  2. 2 Tweets that mention Dave Cavins » Blog Archive » SharePoint Vertical News Ticker -- Topsy.com said at 2:44 pm on November 17th, 2009:

    [...] This post was mentioned on Twitter by EndUserSharePoint, David Cavins. David Cavins said: New blog post: SharePoint Vertical News Ticker http://davecavins.com/2009/11/sharepoint-vertical-news-ticker/ [...]

  3. 3 davecavins said at 9:36 pm on November 17th, 2009:

    Thanks any feedback is greatly appreciated.

    ‘Cheaper’ should have been explained better, I should start proofreading my posts :-) . This is a free solution no signup or payment needed, no forum or support offered either. I also should have explained that this solution although similar does not include all the features that appear to be in the EUSP solution. This is very simple and not very flexible. So I guess instead of cheaper a better description would have been simpler, or more basic.

  4. 4 uberVU - social comments said at 12:19 am on November 18th, 2009:

    Social comments and analytics for this post…

    This post was mentioned on Twitter by davecavins: New blog post: SharePoint Vertical News Ticker http://davecavins.com/2009/11/sharepoint-vertical-news-ticker/...

  5. 5 tecrms said at 1:43 pm on January 13th, 2010:

    This is great CEWP but I find that the scroll jitters when adding a new item to the bottom.

  6. 6 davecavins said at 5:57 pm on January 13th, 2010:

    I noticed that as well. I thought it was just the browser I was using (IE6).

  7. 7 tecrms said at 7:26 am on January 14th, 2010:

    I am running IE7

  8. 8 davecavins said at 5:28 pm on January 14th, 2010:

    @tecrms I am planning on rewriting the code to fix that issue. I’ll post the update soon.

  9. 9 tecrms said at 6:44 am on January 19th, 2010:

    Looking forward to it!


Leave a Reply