JQuery News Ticker – Out of the box

Following code is a simple news ticker OOB web part, which uses the SharePoint’s Lists.asmxweb service to retrieve all the list items of the SharePoint list.

  • First Create a custom list and add some list items.
  • Download “jquery-1.6.2.min.js”  “jquery.newsticker.js” files from the JQuery website & and upload in your SharePoint site
  • Add a Content Editor Web Part and add the following code inside
  • Give the “js” file reference in the script section
  • Save and Close your Content Editor Web Part
  • That’s all your News Ticker WebPart is Ready 🙂

<script src=”jquery-1.6.2.min.js” type=”text/javascript”></script>
<script src=”jquery.newsticker.js” type=”text/javascript”></script>

<style type=”text/css”>
.newsticker {
list-style-type: none;
}
</style>

<script type=”text/javascript”>
$(document).ready(function() {
var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
<soapenv:Body> \
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \
<listName>Customer</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name=’Title’ /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>”;

$.ajax({
url: “/sites/JRDW/_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>” + $(this).attr(“ows_Title”) + “</li>”;
$(“#news”).append(liHtml);
});

$(“#news”).newsTicker();
}
</script>

<div id=”newsticker”>
<ul id=”news”/>
</div>

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

3 Responses to JQuery News Ticker – Out of the box

  1. Joseph — I’m newer to SP2010. I’ve tried to implement this – to no avail.
    – I’ve uploaded the js files
    – I specified the js locations in the script statements
    Am I missing anything?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: