/******************************************************************************
* hscroller.js (modified version of scroller.js for horizontal scroll) *
* *
* Copyright 1999 by Mike Hall. *
* Visit http://www.dynamicdrive.com *
* Last update: July 21st, '02 by Dynamic Drive for NS6 functionality. *
* *
* Allows you to create scrolling displays on a page. Multiple scrollers can *
* be defined, each with it's own parameters and list of items. Item text can *
* include basic HTML tags, including links and images. *
* Note: requires dhtmllib.js. *
******************************************************************************/
//*****************************************************************************
// HScroller constructor.
//*****************************************************************************
function HScroller(x, y, width, height, border, padding, section) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.border = border;
this.padding = padding;
this.section = section;
this.items = new Array();
this.created = false;
// Set default colors.
this.fgColor = "#000000";
this.bgColor = "#e6e6e6";
this.bdColor = "#000000";
// Set default font.
this.fontFace = "Arial,Helvetica";
this.fontSize = "2";
// Set default scroll timing values.
this.speed = 0;
//this.pauseTime = 1000;
this.pauseTime = 100;
this.direction = "left";
// Define methods.
this.setColors = HscrollerSetColors;
this.setFont = HscrollerSetFont;
this.setSpeed = HscrollerSetSpeed;
this.setPause = HscrollerSetPause;
this.setDirection = HscrollerSetDirection;
this.addItem = HscrollerAddItem;
this.create = HscrollerCreate;
this.show = HscrollerShow;
this.hide = HscrollerHide;
this.moveTo = HscrollerMoveTo;
this.moveBy = HscrollerMoveBy;
this.getzIndex = HscrollerGetzIndex;
this.setzIndex = HscrollerSetzIndex;
this.stop = HscrollerStop;
this.start = HscrollerStart;
}
//*****************************************************************************
// HScroller methods.
//*****************************************************************************
function HscrollerSetColors(fgcolor, bgcolor, bdcolor) {
if (this.created) {
alert("HScroller Error: HScroller has already been created.");
return;
}
this.fgColor = fgcolor;
this.bgColor = bgcolor;
this.bdColor = bdcolor;
}
function HscrollerSetFont(face, size) {
if (this.created) {
alert("HScroller Error: HScroller has already been created.");
return;
}
this.fontFace = face;
this.fontSize = size;
}
function HscrollerSetSpeed(pps) {
this.speed = pps;
}
function HscrollerSetPause(ms) {
this.pauseTime = ms;
}
function HscrollerSetDirection(dir) {
this.direction = dir;
}
function HscrollerAddItem(str) {
if (this.created) {
alert("HScroller Error: HScroller has already been created.");
return;
}
this.items[this.items.length] = str;
}
function HscrollerCreate() {
var start, end;
var str;
var i, j;
var x, y;
if (!isMinNS4 && !ie && !dom)
return;
// On first scroller, start interval timer.
if (HscrollerList.length == 0)
setInterval('HscrollerGo()', HscrollerInterval);
// Create the scroller only once.
if (this.created) {
alert("HScroller Error: HScroller has already been created.");
return;
}
this.created = true;
// Copy first item to the end of the list, this lets us scroll from the last
// defined item to the first without jumping.
this.items[this.items.length] = this.items[0];
// Set up HTML code for item text.
start = '
'
+ '
'
+ '';
end = '
';
// Build the layers.
if (isMinNS4) {
this.baseLayer = new Layer(this.width);
this.scrollLayer = new Layer(this.width, this.baseLayer);
this.scrollLayer.visibility = "inherit";
this.itemLayers = new Array();
for (i = 0; i < this.items.length; i++) {
this.itemLayers[i] = new Layer(this.width, this.scrollLayer);
this.itemLayers[i].document.open();
this.itemLayers[i].document.writeln(start + this.items[i] + end);
this.itemLayers[i].document.close();
this.itemLayers[i].visibility = "inherit";
}
// Set background colors.
setBgColor(this.baseLayer, this.bdColor);
setBgColor(this.scrollLayer, this.bgColor);
}
if (ie||dom) {
i = HscrollerList.length;
str = '
\n';
// Insert HTML code at end of page. For IE4, need to scroll window to
// end of page, insert and scroll back to correct bug.
if (!(ie&&window.print)) {
x = getPageScrollX();
y = getPageScrollY();
window.scrollTo(getPageWidth(), getPageHeight());
}
if (ie)
document.all.Htempholder.innerHTML=str
else if (dom)
document.getElementById("Htempholder").innerHTML=str
//EDIT HERE//////////////////////////////////////////////////////////////////////////////
if (!(ie&&window.print))
window.scrollTo(x, y);
// Get handles to each layer.
this.baseLayer = getLayer("Hscroller" + i + "_baseLayer");
this.scrollLayer = getLayer("Hscroller" + i + "_scrollLayer");
this.itemLayers = new Array();
for (j = 0; j < this.items.length; j++)
this.itemLayers[j] = getLayer("Hscroller" + i + "_itemLayers" + j);
}
// Position and clip base and scroll layers.
moveLayerTo(this.baseLayer, this.x, this.y);
clipLayer(this.baseLayer, 0, 0, this.width, this.height);
moveLayerTo(this.scrollLayer, this.border, this.border);
clipLayer(this.scrollLayer, 0, 0, this.width - 2 * this.border, this.height - 2 * this.border);
// Position and clip each item layer.
if (this.direction == "left"){
x = 0;
}else x = this.width * (this.items.length - 1);
y = 0;
for (i = 0; i < this.items.length; i++) {
moveLayerTo(this.itemLayers[i], x, y);
clipLayer(this.itemLayers[i], 0, 0, this.width, this.height);
if (this.direction == "left") x += this.width;
else x -= this.width;
}
// Set up scrolling parameters.
this.stopped = false;
//this.stepX = this.speed / (5000 / HscrollerInterval);
this.stepX = this.speed / (2000 / HscrollerInterval);
this.stepX = Math.min(this.width, this.stepX);
this.maxX = this.width * (this.items.length - 1);
this.minX = 0;
this.paused = true;
this.counter = 0;
if (this.direction == "left") {
this.currentX = 0;
this.nextX = this.width / this.section;
}
else {
this.currentX = this.width * (this.items.length - 1);
this.nextX = this.currentX - (this.width / this.section);
}
// Add to global list.
HscrollerList[HscrollerList.length] = this;
// Display it.
showLayer(this.baseLayer);
}
function HscrollerShow() {
if (this.created)
showLayer(this.baseLayer);
}
function HscrollerHide() {
if (this.created)
hideLayer(this.baseLayer);
}
function HscrollerMoveTo(x, y) {
if (this.created)
moveLayerTo(this.baseLayer, x, y);
}
function HscrollerMoveBy(dx, dy) {
if (this.created)
moveLayerBy(this.baseLayer, dx, dy);
}
function HscrollerGetzIndex() {
if (this.created)
return(getzIndex(this.baseLayer));
else
return(0);
}
function HscrollerSetzIndex(z) {
if (this.created)
setzIndex(this.baseLayer, z);
}
function HscrollerStart() {
this.stopped = false;
}
function HscrollerStop() {
this.stopped = true;
}
//*****************************************************************************
// Code for scrolling.
//*****************************************************************************
// An array is used to hold a pointer to each scroller that is defined. The
// scrollerGo() function runs at regular intervals and updates each scroller
// in this list.
var HscrollerList = new Array();
//var HscrollerInterval = 10;
var HscrollerInterval = 20;
function HscrollerGo() {
var i;
// Update each scroller object in the list.
for (i = 0; i < HscrollerList.length; i++) {
// If stopped, skip.
if (HscrollerList[i].stopped);
// If paused, update counter.
else if (HscrollerList[i].paused) {
HscrollerList[i].counter += HscrollerInterval;
if (HscrollerList[i].counter > HscrollerList[i].pauseTime)
HscrollerList[i].paused = false;
}
// Scroll it.
else {
if (HscrollerList[i].direction == "left") {
HscrollerList[i].currentX += HscrollerList[i].stepX;
// Pause it if the next item has scrolled into view.
if (HscrollerList[i].currentX >= HscrollerList[i].nextX) {
HscrollerList[i].paused = true;
HscrollerList[i].counter = 0;
//HscrollerList[i].currentX = HscrollerList[i].nextX;
HscrollerList[i].nextX += (HscrollerList[i].width / HscrollerList[i].section);
}
// When we reach the end, start over.
if (HscrollerList[i].currentX >= HscrollerList[i].maxX) {
HscrollerList[i].currentX -= HscrollerList[i].maxX;
HscrollerList[i].nextX = HscrollerList[i].width / HscrollerList[i].section;
}
}
else {
HscrollerList[i].currentX -= HscrollerList[i].stepX;
// Pause it if the next item has scrolled into view.
if (HscrollerList[i].currentX <= HscrollerList[i].nextX) {
HscrollerList[i].paused = true;
HscrollerList[i].counter = 0;
// HscrollerList[i].currentX = HscrollerList[i].nextX;
HscrollerList[i].nextX -= HscrollerList[i].width / HscrollerList[i].section;
}
// When we reach the end, start over.
if (HscrollerList[i].currentX <= HscrollerList[i].minX) {
HscrollerList[i].currentX += HscrollerList[i].maxX;
HscrollerList[i].nextX = HscrollerList[i].currentX - (HscrollerList[i].width / HscrollerList[i].section);
}
}
scrollLayerTo(HscrollerList[i].scrollLayer, Math.round(HscrollerList[i].currentX), 0, false);
}
}
}
//*****************************************************************************
// Code to handle a window resize.
//*****************************************************************************
// These variables are used to determine if a resize event is a true one.
// Necessary due to a bug in older NS4 releases.
var origWidth;
var origHeight;
// Fix for resize bug.
if (isMinNS4) {
origWidth = window.innerWidth;
origHeight = window.innerHeight;
}
//window.onresize = HscrollerReload;
function HscrollerReload() {
// Reload page in case of a browser resize. First make sure it's a true
// resize.
if (isMinNS4 && origWidth == window.innerWidth && origHeight == window.innerHeight)
return;
window.location.href = window.location.href;
}