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();
    }

    3 thoughts on “JQuery News Ticker – Out of the box

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

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

    Google photo

    You are commenting using your Google 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 )

    Connecting to %s

    This site uses Akismet to reduce spam. Learn how your comment data is processed.