A simple news ticker by querying SharePoint list items using jQuery

Following example is a simple news ticker web part, which uses the SharePoint’s Lists.asmx web service to retrieve all the list items of the “News” list.

First Create a custom list named “News” and add some list items.

Here we use jQuery in a Content Editor Web Part.

Add a Content Editor Web Part and add following jQuery. I have used a “marquee” tag with some styles.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript"> 

$(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>News</listName> \

                        <viewFields> \

                            <ViewFields> \

                               <FieldRef Name='Title' /> \

                           </ViewFields> \

                        </viewFields> \

                    </GetListItems> \

                </soapenv:Body> \

            </soapenv:Envelope>"; 

        $.ajax({

            url: "/_vti_bin/lists.asmx",

            type: "POST",

            dataType: "xml",

            data: soapEnv,

            complete: Result,

            contentType: "text/xml; charset=\"utf-8\""

        });

    }); 

    function Result(xData, status) {

        $(xData.responseXML).find("z\\:row").each(function() {

            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";

            $("# news ").append(liHtml);

        });

    }  

</script>               

<marquee onmouseover="this.stop();" onmouseout="this.start();">

                <ul id="news">  </ul>

</marquee>

               

<style>

         UL#news {

                     WIDTH: 620px;

                      OVERFLOW: hidden

         }

          UL#news LI {        

                       WIDTH: 600px;    

                       DISPLAY: inline;

                       HEIGHT: 99px;

        }

</style>