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>
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
Post a Comment