New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE6+ Opr8+

SAG Content Scroller v1.3

Author: Dynamic Drive

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:

  • Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications.
  • XML's design goals emphasize simplicity, generality, and usability over the Internet.
  • SVG and HTML5's canvas element allow for the creation of simple graphical objects using programming.
  • The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.
  • CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.

 
Automatic scroller (contents defined inside external file):


 
RSS Scroller (5 entries, 1 source):

RSS Scroller (10 entries, 2 sources):


Directions Developer's View

Step 1: Insert the below code in the <head> section of your page:

Select All

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:

Select All

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: 'files/sagcontent.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.

Table Of Contents

This script consists of an index page plus two supplementary pages: