Hide
Siafoo is here to make coding less frustrating and to save you time. 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.