SharePoint Ticker Web Part from Existing Data
Posted by matthew | Posted in Code Snippets | Posted on 01-12-2009
Tags: AJAX, Javascript, jQuery, SharePoint, SOAP, XML
1
Ever wanted to create a ticker in SharePoint without having to buy the $99 add-on from Microsoft, well here’s the code:
Simply create a new Web Part using the ‘Content Editor’ and open the ‘Source Editor…’ view. Then paste in this code:
<style type="text/css">
#ticker-area, #ticker-area ul li a {font-size:18px;font-family:Verdana;font-style:italic;color:#3565A5;font-weight:bold;text-transform:uppercase;}
#ticker-area {padding:2px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function createTicker(){
// put all list elements within #ticker-area into array
var tickerLIs = $("#ticker-area ul").children();
tickerItems = new Array();
tickerLIs.each(function(el) {
tickerItems.push( jQuery(this).html() );
});
i = 0
rotateTicker();
}
function rotateTicker(){
if( i == tickerItems.length ){
i = 0;
}
tickerText = tickerItems[i];
c = 0;
typetext();
setTimeout( "rotateTicker()", 5000 );
i++;
}
var isInTag = false;
function typetext() {
var thisChar = tickerText.substr(c, 1);
if( thisChar == '<' ){ isInTag = true; }
if( thisChar == '>' ){ isInTag = false; }
$('#ticker-area').html(" " + tickerText.substr(0, c++));
if(c < tickerText.length+1)
if( isInTag ){
typetext();
}else{
setTimeout("typetext()", 28);
}
else {
c = 1;
tickerText = "";
}
}
$(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='Link' /> \
</ViewFields> \
</viewFields> \
<rowLimit>5</rowLimit> \
</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 liHtml = "<li><a href='/sites/studenthome/Lists/Announcements/Overview.aspx'>" + $(this).attr("ows_Title") + "</a></li>";
$("#listticker").append(liHtml);
});
createTicker();
}
</script>
<div id="ticker-area">
<ul id="listticker"></ul>
</div>
It will display the latest 5 results in a ticker, to change this change the insides of the tag ‘rowLimit’ to what ever number you like. If you would like to show a different list, simply change it from ‘announcements’ to ‘tasks’ for example or anything you like really.
This is a straight forward piece of code, and can be transformed as desired, but the beauty is you don’t need to make any changes to SharePoint or upload any other content what-so-ever, sweet huh?




Plz explain how if i want the ticker with marquee effect