affordable web development services
| About Us | Services | Download | Order | Support | Subscribe to News Feed Follow us on Twitter Join us on Facebook |
 

Tigra Scroller

Table of Contents

Description

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.

Features

Compatibility Table

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

Files

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>

Box Setup

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

Options Setup

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 Setup

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:

Styles Settings

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.

Initialization

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>

Terms and Conditions

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:

Links and References