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 🙂

http://jquery-1.6.2.min.js
http://jquery.newsticker.js

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

$(document).ready(function() {
var soapEnv =
” \
\
\
Customer \
\
\
\
\
\
\
\
“;

$.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 = “

  • ” + $(this).attr(“ows_Title”) + “
  • “;
    $(“#news”).append(liHtml);
    });

    $(“#news”).newsTicker();
    }

    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: