|
Tigra Scroller is free JavaScript widget for web sites that scrolls text or html in the box. Moving content saves the space on the page and attracts visitor's attention. Script is ideal for displaying long lists like hot news, events, slide shows, ads etc.
Tigra Scroller works with any browser that supports DOM (Document Object Model). Below is a table of the application compatibility:
| Platform | Browser | |||
|---|---|---|---|---|
| MS IE | Netscape | Mozilla | Safari | |
| Windows 95/98/ME/2000/XP | 4.0+ | 6.0+ | 0.9+ | 3+ |
| Mac OS 8/9/X | 5.0+ | 7.0+ | 1.2+ | 1+ |
| KDE on Linux/FreeBSD | n/a | n/a | 1.1+ | n/a |
Tigra Scroller script consists of several files. This makes script maintenance easier and reduces network load.
Default distribution package contains:
Where ? and * are wildcards for single character and substring respectively.
There is no naming or location requirements for data being scrolled. Configuration and script files can also be located anywhere in the site hierarchy, but they should remain in same directory and naming convention should be carefully followed. To rename or move default script directory modify Tscroll_path_to_files variable in scroll.js file:
// set correct path to Tigra Scroller files var Tscroll_path_to_files = 'ts_files/'
Only one file should be attached to HTML document with appropriate tag in the header, others will be linked automatically:
<head> <!-- some header data --> <script language="javascript" src="ts_files/scroll.js"></script> </head>
The size script scrolling area is set in scroll.tpl?.js with LOOK variable:
var LOOK = {
// scroller box size: [width, height]
'size': [300, 100]
},
Box size is specified in pixels
Below is the list of supported scroller options with descriptions:
| Key | Description | Accepted Values | Default Value | |
|---|---|---|---|---|
| General | ||||
| auto | autoscrolling of the content; if set to true, then makes content scroll automatically; if set to false, then content will be scrolled on demand | A positive integer number | none | |
| vertical | vertical scrolling; if set to true, scrolling direction will be vertical; to false - horizontal | A positive integer number | none | |
| speed | scrolling speed, pixels per 40 milliseconds | numeric value; for auto mode use negative value to reverse scrolling direction | none | |
These options are set in scroll.tpl?.js with BEHAVE variable:
BEHAVE = {
// autoscroll - true, on-demand - false
'auto': true,
// vertical - true, horizontal - false
'vertical': true,
// scrolling speed, pixels per 40 milliseconds;
// for auto mode use negative value to reverse scrolling direction
'speed': 2
},
Content scrolled is blocks of HTML code that can be described directly in the configuration files or can be picked from external files.
Below is the list of supported keys with descriptions:
| Key | Description | Accepted Values | Default Value | |
|---|---|---|---|---|
| General | ||||
| file | file to get content for item from | A positive integer number | none | |
| content | scroller item content (only body of HTML document) | A positive integer number | none | |
| Pauses | ||||
| pause_b | pause duration in seconds when item top gets top of the scroller box; ignored in on-demand mode while scrolling forward | none | ||
| pause_a | pause duration in seconds when item bottom gets bottom of the scroller box; ignored in on-demand mode while scrolling backward | none | ||
These items are listed in scroll.tpl?.js with ITEMS variable:
ITEMS = [
{
// external file
'file': '../s0_data/cont2.html',
'content': '',
// pause in seconds before the item
'pause_b': 2,
// pause in seconds after the item
'pause_a': 1
},
{
'file' : '',
// direct content
'content' : '<img src="../s1_data/k001.jpg" height="225" width="300">',
'pause_b' : 0.5,
'pause_a' : 0
}
]
Notes:
Visual aspects of the Tigra Scroller are set in a familiar to most webmasters way: with CSS. Below find the list of CSS classes used by Tigra Scroller:
/* scroller background - BODY */
.Back {
background: white;
}
/* for on-demand mode only:
control (arrow) to scroll items backward - DIV
use to position the control */
.ArrowUp {
top: 4px;
left: 280px;
height: 16px;
width: 16px;
}
/* for on-demand mode only:
control (arrow) to scroll items forward - DIV
use to position the control */
.ArrowDn {
top: 205px;
left: 280px;
height: 16px;
width: 16px;
}
/* style to be applied to all items' bodies - DIV
all local stylesheets of external files if any are to be ignored */
.ItemBody {
font-family: Verdana;
}
Find more examples with the demo scrollers from the distribution package.
Script initialization block creates scroller instance. It can be called within table cell or any other relatively positioned HTML element. Initialization function is passed only one parameter - scroller index. This numeric value is used to associate scroller instance with the configuration files i.e. if index specified is 0 then files ts_files/scroll.tpl0.js and ts_files/scroll0.css will be used for this scroller.
<script language="JavaScript"> <!-- // Tscroll_init(0); // --> </script>
Tigra Menu is FREE for any kind of applications. There is no license fee or royalty fee to be paid
at any time for using the Tigra Menu
You may include the source code or modified source code within your
own projects for either personal or commercial use but excluding the restrictions outlined below.
The following restrictions apply to all parts of the component, including all source code,
samples and documentation:
