Share/Bookmark

Featured Posts

SharePoint Ticker Web Part from Existing Data 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...'...

Read more

Sony E3 Prediction 2010 With E3 upon us in the coming weeks, and Sony keeping tight lipped about their schedule I think it's time we started predicting the outcome, the announcements and surprises with educated and industry sector...

Read more

Sony E3 Prediction 2010 With E3 upon us in the coming weeks, and Sony keeping tight lipped about their schedule I think it's time we started predicting the outcome, the announcements and surprises with educated and industry sector...

Read more

Whats next for Nintendo? Today I noticed that Nintendo have had falling profits for 2010 and predict even less sales for next year. The Wii 2 hasn`t been officially announced and from what I can see is not really on the radar....

Read more

7 Great Free Android Apps The Android mobile operating system is both fast, reliable and can do everything that the Apple OS can and a little more (all for normally a fraction of the price.) plus it supports Flash and soon Flash...

Read more

SharePoint Ticker Web Part from Existing Data

Posted by matthew | Posted in Code Snippets | Posted on 01-12-2009

Tags: , , , , ,

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("&nbsp;" + 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?

Comments (1)

Plz explain how if i want the ticker with marquee effect

Write a comment