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="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]
@Dave
Thans for that – I’ve tried it all but with nothing has worked.
To try to resolve this, I followed this approach with your code for the simple news ticker: http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/ . The results were confusing – when I add the text file to the CEWP as a link, and then test the link I see the page with the scrolling box, but when I then refresh the SP2010 page, its just a static block of text.
Is there some way that SP2010 is blocking the javascript?
Hi,
I suppose this blog is not updated anymore. Anyway, I tried to get this working in SharePoint 2010 and end up with a white box without any content.
Checked and double checked the links to the JS files which I uploaded to a local doc library. Still no result.
Would you have any idea?
@Deiderik I will try this in 2010 and post an update soon.
Hi Dave,
I tried get the newsticker working, but I didn’t managed it.
I’m getting an syntax error for the ticker.js and next an error that “slice” is not defined. The newsticker stays empty.
I tried on Sharepoint 2010, maybe that’s the problem? Is it so much different?
Can you please help?
You may need to use a different javascript. I will post an article soon about how to do this in SP2010.
[…] have written about making a News Ticker before but it looks like the code is not working anymore so why not make something better. News […]