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>
Dave – Nice alternative. I’ll try it out and get back to you. One note: what does “cheaper” mean, in this context. — Mark
Pingback: Tweets that mention Dave Cavins » Blog Archive » SharePoint Vertical News Ticker -- Topsy.com
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.
Pingback: uberVU - social comments
This is great CEWP but I find that the scroll jitters when adding a new item to the bottom.
I noticed that as well. I thought it was just the browser I was using (IE6).
I am running IE7
@tecrms I am planning on rewriting the code to fix that issue. I’ll post the update soon.
Looking forward to it!
Are you still planning to rewrite? 🙂
@tecrms Been busy with school but I plan to do it in the next few weeks.
Hi,
I’m a novice developer and light on coding. I pasted the code above into my CEWP, added an ‘s’ to the link for google since I’m working in a secured environment (this has worked fine for other CEWP source code additions) and it is on the page. The only problem is that there is no content in it. I checked to confirm that the list it is looking to is ‘Announcements’ which is the same as mine. Why am I not seeing the existing content in my announcements list? What am I missing? Thanks!
@ Lisajo48 try linking to a local copy of jquery just to be sure that is not the issue. Also make sure the link to the ticker.js script is right on line #2.
I checked the jquery link and it opens the script OK so I don’t think it’s that. But, to be sure I saved the file to a doc lib and updated the link in the CEWP accordingly. I did the same for the ticker.js script which I’m assuming is the EasySlider1.7 (he updated 1.5 so I used it): I downloaded the EasySlider, found the .js file amongst the others, uploaded it to a doc lib, and updated the link in the CEWP. No change resulted. I get what looks like a table/frame structure in the CEWP, but no content. There was also mention of putting the code on the server (assuming SP WFE). If so, where? ?Would that make the difference for me? Again, I apologize for my newbie questions but your help would be greatly appreciated. Or, maybe some one else who’s used your ticker could answer these questions too?
@ Lisajo48 The ticker.js script is from here
OK, I was using jquery-1.3.2.min.js rather than jquery.js which caused the issue with the scrolling… but I still have an issue with some of the text associated with the 1st announcement being displayed “behind” the scrolling text..
Mouseover doesn’t appear to stop the scrolling; which is pretty “jumpy” as noted before.
Does this require AJAX? I am also a novice developer – and I do not have AJAX installed (our application team refuses to install it).
Is there a Non-AJAX version?
Thanks
@Hank AJAX is not something you need to install on the server. This script uses some techniques that could be refered to as AJAX but it should work fine on your server without anything being installed.
Pingback: A Better Annoucements Ticker | Dave Cavins
the only issue with the code is it jumps when it tries to add the first record back to the list. I tried a lot of stuff like changing duration, distance, using size of the container, but they just fail to work. Please let me know if you have found a solution or have a new code.
I’ve tried to use this in a SharePoint 2010 site, but it just comes up as a blank box.
Sorry – Don’t really know what I’m doing – thought this would just paste and work.
Any suggstions?
@ Simon I have not tried to implement this solution in SP2010 yet. But here are a few things to check.
Make sure you list name matches what is defined in the script on line #9
Make sure you are referencing the JavaScript files correctly. If the links are wrong nothing will work.
Add an alert to the script after line 51 just to verify it is firing properly.