Create an Auto-Scrolling Record Viewer
This article shows you how to format a Results page as an embedded panel that will automatically scroll between individual records. Auto-scrolling results pages are great way to display news announcements, recent comments or posts, etc.
Steps to implement an auto-scrolling viewer:
Create a Search and Report DataPage to show your records. You can create either a list or a gallery Report. Make sure Advanced Options are enabled. Create the Report as normal, the rest of this article will show you how to customize this report to auto-scroll between individual records.
To be visible in this scrolling display, records must appear on the first page of results. By default first results page is limited to 25 records.
Go to the Search Results Options screen of the wizard. On this screen you can set the number of columns and records per page to create a long list, or large grid of results. Also under the Advanced tab you can cap the total number of records returned to the exact number of records visible on the first page (to improve load time). At this point you can also hide the record count if desired.
Navigate to the Configure Results Page Fields screen. This screen should already contain the fields you would like to display for each record. You will now need to add a header and footer to the DataPage, as well as one HTML block at the beginning of your fields and one HTML block at the end:
Insert the following script into each section as indicated:
DataPage Header:
Customize the height and width of your scrolling panel here.
HTML Block 1:
<div style="padding:0px 100px 10px 20px;">
<!– Top, Right, Bottom, Left –>
The padding values here allow you to create a buffer around each individual results record (so that only one record is visible at a time). You can adjust each value individually to create the appropriate space around each record. The variables indicate the padding on the top, right, bottom and then left side of the record.
HTML Block 2:
DataPage Footer:
</div>
<script>
var length = $('#navigation a.anchor').length;
var current = -1;
$('#navigation').scrollTo( $('#navigation a.anchor:eq(0)'), {duration:0});
(function looping(){
current++;
if(current > length-1)
current = 0;
$('#navigation').scrollTo( $('#navigation a.anchor:eq('+current+')'), {duration:800}, {axis:'xy', margin:true, easing:'easeInOutQuad'} );
setTimeout(looping,3000);
})()
/*
(function looping(){
$('#navigation').scrollTo( $('#navigation a.anchor:eq('+Math.round(Math.random()*length)+')'), {duration:800}, {axis:'xy', margin:true, easing:'easeInOutQuad'} );
setTimeout(looping,3000);
})()
*/
</script>
This code uses the “In-Order” scrolling option. You can switch to the “Random” option by surrounding the first looping function with comment tags (/* */) and removing the comment tags from the second looping function.
You can also customize the time between scrolling (3000) and the time it takes to scroll (800).
Webpage Header
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
Insert these script references into your Webpage header. While testing inside of Caspio Bridge you can also include these two lines inside of the DataPage header, but remember to remove them when you embed your DataPage.
Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.