|
|
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):
|
Directions

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() :
new sagscroller() options
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({
id: 'mysagscroller'
})
This is the only required "option" that must be defined when calling
sagscroller() . 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> |
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 "
stunted ": the script is initialized immediately,
without pre-fetching the heights of each LI content within the scroller. As
the user requests a particular content, the script gets the height of
that content at that time. The advantage of this method is faster
initialization times. The disadvantage is that if your contents do not
have explicit heights defined and one hasn't loaded fully at the time of
request, the script may miscalculate that content's height and scroll to
an incorrect position.
- In "
onload ": the script is initialized when the
page has fully loaded. The advantage of this method is that it minimizes
any chances of the script retrieving the incorrect heights of each LI
content. The disadvantage is higher initialization time.
In general the "stunted " method can be used safely as
long as you make sure any image(s) within your LI contents are given
explicit width and height attributes, or alternatively, the LIs
themselves via CSS. |
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({
id: 'mysagscroller',
mode: 'auto',
pause: 2000
})
|
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({
id: 'mysagscroller',
ajaxsource: 'http://ferchi01.eshost.es/sagacontent.txt',
mode: 'auto',
pause: 2000
})
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">
<!--This should be empty!-->
</div> |
rssdata
v1.3 feature |
null |
If defined, displays RSS entries from one or
more RSS sources using Google Ajax API. The syntax is:
rssdata:{
feeds: [
['Feed Label 1', 'feed_URL1'],
['Feed Label 2', 'feed_URL2']
etc //<--no comma following last feed array!
],
linktarget: '_new',
displayoptions: 'datetime label snippet',
entries: 2, //entries to show per feed
groupbylabel: true //<--no comma following last option
},
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({
id: 'mysagscroller',
ajaxsource: 'files/sagcontent.txt',
mode: 'auto',
refreshsecs: 300,
pause: 2000
})
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.
This script consists of an index page plus two supplementary pages:
|