SharePoint 2010: Display scrolling list items using jQuery and SPServices

This is a pretty common requirement for intranet administrators, so today I thought I'd share how to display the contents of a SharePoint list using jQuery. The good part about this is you need to have some knowledge on the CAML query and that's it.

First download these 3 components and store it somewhere accessible on SharePoint. Thanks to the wonderful folks who did the hard work and came up with those great components!
jQuery - http://jquery.com/
jQuery.SPServices - http://spservices.codeplex.com (read documentation thoroughly for compatibility)
jQuery.Marquee from givainc - http://www.givainc.com/labs/marquee_jquery_plugin.cfm
(in the case of jQuery Marquee, make sure you also include the css file for default styling)

Create a simple text file and include references to those components. I am using a plain text file so that I could include it later in a Content Editor Webpart.

 <link rel="stylesheet" href="/sites/SiteCollectionDocuments/jquery.marquee.min.css" />   
 <script src="/sites/SiteCollectionDocuments/jquery-1.8.3.js"></script>  
 <script src="/sites/SiteCollectionDocuments/jquery.marquee.min.js"></script>  
 <script src="/sites/SiteCollectionDocuments/jquery.SPServices-2013.01.min.js"></script>  

Next, add the javascript that does all the magic. I am going to read content from the Announcements list, and take only items that have not expired/empty expiry date. When users click on the item, it will display the list item in a dialog box.

 <script type="text/javascript">   
  $(document).ready(function (){  
   var emptyResults = "<li>There are no current announcements.</li>";  
   var toShow = false;  
   $().SPServices({  
   operation: "GetListItems",  
   async: false,  
   listName: "Announcements",  
   CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ID' /></ViewFields>",  
   CAMLQuery: "<Query><OrderBy><FieldRef Name='Created' /></OrderBy>" +  
         "<Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'>" +  
         "<Today /></Value></Geq><IsNull><FieldRef Name='Expires' /></IsNull></Or></Where></Query>",  
   CAMLQueryOptions: "<QueryOptions><ViewAttributes Scope='Recursive' /></QueryOptions>",  
   completefunc: function (xData, Status) {  
           $(xData.responseXML).SPFilterNode("z:row").each(function() {  
                var id = $(this).attr("ows_ID");  
                var url = $().SPServices.SPGetCurrentSite() + "/Lists/Announcements/DispForm.aspx?ID=" + id;  
                var bodyHtml = "<li><a href=\"javascript:SP.UI.ModalDialog.ShowPopupDialog('" + url + "', null, 800, 600);\">" + $(this).attr("ows_Title") + "</a></li>";  
                $("#marquee").append(bodyHtml);  
           });  
    }  
   });  
   $("#marquee").marquee();  
  });   
 </script>  

Finally, after closing the javascript tags, include this line for displaying the items, marquee style.

 <ul id="marquee" class="marquee" />  

If you would like to alter the style of the marquee, open up jquery.marquee.min.css and apply changes.

Now you are ready to add this to any SharePoint web part page! Upload the text file you have created to SharePoint.
Open the page in Edit mode, click on Add a web part anywhere, and add a CEWP. Point the URL to the text file you have just uploaded.