Hide
Stay up to dateembedded code automagically updates, each snippet and article has a feed Join Siafoo Now or Learn More

Fading Content Rotator Using SharePoint Data Zoom Web Part Atom Feed 0

In Brief See this script working in a live demonstration.
# 's
 1## Get the Testimonials list
2#set( $list = $web.lists.get_item("Testimonials") )
3
4## Get the items in the 'All Items' view
5#set( $itemsView = $list.Views.get_item("All Items") )
6#set( $listItems = $list.GetItems($itemsView ) )
7
8<style type="text/css">
9.attentionclass {
10 width:250px;
11 border:1px solid black;
12 text-align:center;
13 padding:10px 0 10px 0;
14 background-color:#FFFFFF;
15 color:#000000;
16 }
17</style>
18
19<script type="text/javascript">
20
21// The id of the div or other container with text to fade in/out.
22var containerId = 'attentionid';
23
24// In the color mask, put an 0 for the color digits that will change and otherwise for digits that will remain static.
25var colorMask = '#000000';
26
27// Specify the number of milliseconds to wait between each fade in/out step.
28var fadePause = 225;
29
30var currentContentIdx = 1;
31var totalContentItems = $listItems.Count;
32var previousContentIdx = totalContentItems;
33var pointer = 25;
34var numlist = "00000000000123456789ABCDEF".split("");
35var direction = 'up';
36var counter = 0;
37var maxChanges = 0;
38
39if( fadePause < 1 )
40 { fadePause = 1; }
41
42// This function handles fading the content in and out
43function fadeContentInOut() {
44 if( pointer == 25 )
45 { direction = 'down'; contentRotate(); }
46 else if( pointer == 0 )
47 { direction = 'up'; }
48 if( direction == 'up' )
49 { pointer++; }
50 else
51 { pointer--; }
52 counter++;
53 if( maxChanges > 0 && counter > maxChanges )
54 { clearInterval(Changing); }
55 re = /0/g;
56 var thiscolor = colorMask.replace(re,numlist[pointer]);
57 document.getElementById(containerId).style.color = thiscolor;
58}
59
60// This function hides the previous content, then displays the next one
61function contentRotate() {
62 var cid = "placeholderdiv_" + currentContentIdx;
63 document.getElementById(cid).style.display = 'block';
64 var lid = "placeholderdiv_" + previousContentIdx;
65 document.getElementById(lid).style.display = 'none';
66 previousContentIdx = currentContentIdx;
67 currentContentIdx = (currentContentIdx == totalContentItems ) ? 1 : currentContentIdx + 1;
68}
69
70setInterval("fadeContentInOut()", fadePause);
71
72</script>
73
74## Load all content items from SharePoint list into hidden divs
75## These divs will alternate from hidden to visible
76#foreach($item in $listItems)
77 #beforeall
78 <div id="attentionid">
79 #each
80 <div style="display:none;" id="placeholderdiv_${velocityCount}">$item.get_item('Quote')</div>
81 #afterall
82 </div>
83 #nodata
84 No quotes found.
85#end

See this script working in a live demonstration.