SAG Content Scroller v1.3
Aug 27th, 10 (v1.3): Scroller now integrates with Google Feeds API to easily show RSS content as well. Adds ability to refresh the contents every x seconds (in "ajax" or "rss" mode).
Description: SAG- or Stop and Go Scroller- takes a regular UL list and scrolls it upwards, one LI at a time and pausing in between. It lets you showcase content that can either be defined inline on the page, or in an external file and fetched via Ajax instead. The scroller can be set to either auto scroll, or on user demand via the navigation panel as part of its interface. Either way, the contents are scrolled in an infinite, wrapping manner, so there are no breaks between the last and first LI contents. Cool!
Starting in v1.3, you can now easily show RSS feeds inside SAG scroller. It comes integrated with Google Feeds API to display RSS entries from multiple sources without the need to install any server side scripts. See "Displaying RSS feeds using SAG Scroller" for more info.
Demo:
Manual scroller:
|
Automatic scroller (contents defined inside
external
file): |
RSS Scroller (5 entries, 1 source): |
RSS Scroller (10 entries, 2 sources): |
Step 1: Insert the below code in the <head> section of your page:
The above references the following a few external files plus two images, which you should download (right click, and select "Save As"):
Step 2: Then, inside the BODY section of your page, to display a ticker, simply use the below example code:
The HTML markup of your SAG scroller should be a DIV with a unique ID plus a regular UL list containing the contents you want to show:
<div id="mysagscroller" class="sagscroller">
<ul>
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
<li>Message 4</li>
<li>Message 5</li>
</ul>
</div>
Then in the HEAD section of your page, initialize the
scroller by calling the constructor function new sagscroller()
:
var uniquevar=new sagscroller({ id: 'mysagscroller', option1: 'value1', option2: 'value2' //etc })
Where the "ID
" option should be set to the ID of your
SAG scroller's DIV container, with additional options to follow if desired. Below describes all
the options for sagscroller()
:
option | Default | Description |
id required |
The ID of the DIV container you define on the
page that contains your SAG scroller, for example: var
sagscroller1=new sagscroller({ This is the only required "option" that must be defined when calling
<div id="mysagscroller" class="sagscroller"> |
|
mode |
"manual" | Sets the display mode of the scroller- "manual "
or "auto ". In the later, the scroller scrolls
automatically, pausing at each LI for the duration specified by the "pause "
option below. |
inittype v1.3 feature |
"stunted" | Determines how long the script should wait to
retrieve the height of each LI content (for calculation purposes) within
the scroller before initializing and running. Set to either "stunted "
or "onload ". The differences are:
In general the " |
pause |
3000 | Applicable when the "display "
mode option is set to "auto ", this option defines the pause
between messages in milliseconds (ie: 3000=3 seconds), for example:var
sagscroller1=new sagscroller({ |
animatespeed |
500 | Sets the speed in which each LI is scrolled into view, in milliseconds, in other words, the duration of the animation. A smaller value increases the speed, while a larger decreases it. |
ajaxsource |
null | If defined, populates the SAG scroller DIV
with the contents of a .txt file as defined inside "ajaxsource". This
should be the path to the external .txt file on your server containing
the entire UL markup of your scroller: var
sagscroller1=new sagscroller({ Here's an example of a sample txt file, which as mentioned should just be a regular UL containing the contents you wish to show each as an LI element. The script will use Ajax to dynamically fetch and populate the scroller DIV with the retrieved UL, replacing anything originally in the DIV with it. As such, your SAG DIV should initially be empty on the page: <div id="mysagscroller" class="sagscroller"> |
rssdata v1.3 feature |
null | If defined, displays RSS entries from one or
more RSS sources using Google Ajax API. The syntax is:
rssdata:{ For full instructions, please see the supplementary page "Displaying RSS feeds using SAG Scroller". |
refreshsecs v1.3 feature |
0 (no refresh) | Applicable when either the ajaxsource
or rssdata option is defined, this option sets the delay
between refeteching of the external content (refresh), in seconds. A
value of 0 means never. The following defines an Ajax source based SAG
Scroller that automatically reloads the contents every 5 minutes:var
sagscroller1=new sagscroller({ In other words, "sagcontent.txt" is re-requested every 5 minutes, and should the file change during that time, the scroller will show the updated content. Warning: Do not set this value to too low a value, such as 5. It could mean unnecessary trips to the server, and in the case of the RSS option, may cause you to violate Google's TOS (too many requests to Google Ajax API in such a short time period). |
navpanel |
{show:true, cancelauto:false} | Sets whether to show the navigational panel that appears at the bottom of the scroller interface, and if it should cancel the automatic sliding of the scroller in the event the "mode" option is set to "auto". |
Modifying global settings
You should open up sagscroller.js
and edit the sagscroller_constants global
variable located near the top:
var sagscroller_constants={
navpanel: {height:'16px', downarrow:'down.gif', opacity:0.6, title:'Go to
Next Content', background:'black'},
loadingimg: {src:'ajaxloading.gif', dimensions:[100,15]}
}
"navpanel
" sets the style of the bottom navigational panel for
the scroller- make sure "down.gif" correctly points to the full path or URL to
the down image on your server. "loadingimg
" points to the ajax
loading image, shown while a SAG scroller is loading. Configure it appropriately
as well.
Table Of Contents
This script consists of an index page plus two supplementary pages: