I am using SharePoint 2013 with the following scripts stored in a doc library:
<script type="text/javascript" src="/Scripts/jquery.SPServices-2013.02.js"></script>
<script type="text/javascript" src="/Scripts/jshowoff.min.js" ></script>
<link type="text/css" href="/Scripts/jshowoff.css">
<style type="text/css">
.sliderDiv {margin-left:5px; overflow:hidden;margin-top:5px;}
.announceTitle {font-weight:bold; border-bottom:3px red solid;}
.announceBody {padding-left:20px;}
.announceFooter {font-size:8pt; color:gray;}
.announceFooter span {font-style:italic;}
</style>
- jquery-1.10.2.min.js
- jquery.SPServices-2013.02.js
-
jshowoff.min.js
Added a Script Editor WP, and made reference to these above. Do I need to add the Announcements list (AL) to the page too? Right now, with/without AL I do not get it to work.: I do not get any errors, but it does not display anything either...
I tested & the script is loading though… Please any help is highly appreciated! Thank you!
<script type="text/javascript" src="/Scripts/jquery.SPServices-2013.02.js"></script>
<script type="text/javascript" src="/Scripts/jshowoff.min.js" ></script>
<link type="text/css" href="/Scripts/jshowoff.css">
<style type="text/css">
.sliderDiv {margin-left:5px; overflow:hidden;margin-top:5px;}
.announceTitle {font-weight:bold; border-bottom:3px red solid;}
.announceBody {padding-left:20px;}
.announceFooter {font-size:8pt; color:gray;}
.announceFooter span {font-style:italic;}
</style>
<script type="text/javascript">
$(document).ready(function () {
// Check that jQuery is loaded:
// alert(typeof($));
var emptyResults = "<div class='sliderDiv'><p class='announceTitle'>There are no current announcements.</p></div>";
var maxVal = 0;
var toShow = false;
var heightTemp = 0;
$().SPServices({
operation : "GetListItems",
async : false,
listName : "Announcements",
CAMLViewFields : "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Image' /><FieldRef Name='Body' /><FieldRef Name='Modified' /></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>",
completefunc : function (xData, Status) {
var itemCount = $(xData.responseXML).SPFilterNode('rs:data').attr("ItemCount");
if (itemCount > 0) {
toShow = true;
$(xData.responseXML).SPFilterNode('z:row').each(function () {
var modDate = $(this).attr("ows_Modified");
modDate = modDate.substr(5, 2) + "/" + modDate.substr(8, 2) + "/" + modDate.substr(0, 4);
var titleHtml = "<div class='sliderDiv'><p class='announceTitle'>" + $(this).attr("ows_Title") + "</p>";
var imgBody = "<img class='anImage' src='" + $(this).attr("ows_Image").split(',')[0] + "'></img>";
var bodyHtml = "<p class='announceBody'>" + $(this).attr("ows_Body") + "</p>";
var expireHtml = "<p class='announceFooter'>Modified: <span>" + modDate + "</span></p></div>";
//div announcements is added by jshowoff js.
$("#announcements").append(titleHtml + imgBody + bodyHtml + expireHtml);
});
} else {
$("#announcements").append(emptyResults);
}
} //completefunc
}); //SPServices
// Check that a specific function is loaded:
alert(typeof(completefunc));
if (toShow == true) {
$('.sliderDiv').each(function () {
heightTemp = $(this).height();
if (heightTemp > maxVal) {
maxVal = heightTemp
};
});
$('#announcements').css('min-height', maxVal);
$('#announcements').jshowoff({
speed : 12000,
changeSpeed : 3000,
controls : true,
animatePause : false,
effect : 'fade',
cssClass : true,
links : true
});
} //if stm
}); //ready
</script>