jQuery News Ticker

1. Create a custom list with columns Title, Feedback and add some list items.
2. Download "jquery-1.6.2.min.js" and "jquery.newsticker.js" files from the jQuery website & and upload in your SharePoint site.
3. Add a Content Editor/Script Editor Web Part and add the following code inside
4. Give the “js” file reference in the script section
5. Save and Close your Web Part

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

<style type="text/css">
.newsticker {
 LIST-STYLE-TYPE: none; FONT-WEIGHT: normal
}
HR {
 BACKGROUND-COLOR: #fecb00; HEIGHT: 3px; COLOR: #fecb00
}</style>

<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>NewsTicker</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Feedback' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
        $.ajax({
            url: "SiteName/_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>" + "<strong>" + $(this).attr("ows_Title") + "</strong>" + "<hr/>" + $(this).attr("ows_Feedback") + "<br/><br/></li>";
            $("#news").append(liHtml);
        });
        $("#news").newsTicker();
    }
                </script>
                <div  width="50%" height="50%">
                <marquee onmouseover="this.stop();" onmouseout="this.start();" direction="up" scrollamount="3">
<ul id="news"></ul>
</div>
</marquee>

Comments

Popular posts from this blog

Switch from Classic to Claims Authentication in SharePoint 2010

How to query list data using web service