Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hack a DHTML scroller...

Status
Not open for further replies.
grahamarrowsmith

grahamarrowsmith

Technical User
May 23, 2002
11
GB
Hi,

I've been looking at Mike Hall's brilliant DHTML library - unfortunately it's a vertical scroller and I really need a horizontal scroller.
Would it take some simple code mods to make it move in the X axis as opposed to the Y? I don't have the skill myself otherwise I'd give it a go... Also is it possible to run multiple instances scrolling on the same page? (I'd ideally like 2 scrollers) Sounds hideous I know but the finished effect will be great.

Alternatively does anyone know of a good browser compatible script that allows multiple instances animating on the same page in the X axis.

Any help much appreciated!

Graham.
 
Sort by date Sort by votes
It's easier to look at the link but I've included the 2 js files below.

Be warned there's a lot!

CODE FOR HEAD of page to include banner

<script language=&quot;javascript&quot; src=&quot;scroller_js/dhtmllib.js&quot;></script>
<script language=&quot;javascript&quot; src=&quot;scroller_js/scroller.js&quot;></script>
<script language=&quot;javascript&quot;>
<!--
var myScroller1 = new Scroller(0, 0, 200, 215, 1, 0);
myScroller1.setColors(&quot;#0a2b88&quot;, &quot;#0a2b88&quot;, &quot;#0a2b88&quot;);
myScroller1.setFont(&quot;Verdana,Arial,Helvetica&quot;, 1);
myScroller1.setSpeed(120);
myScroller1.setPause(3500);
myScroller1.addItem(&quot;<a href='page.htm'><img src='images/boards/image.gif' width=200 height=215 border=0></a>&quot;);
myScroller1.addItem(&quot;<a href='page.htm'><img src='images/image.gif' width=200 height=215 border=0></a>&quot;);
myScroller1.addItem(&quot;<img src='images/image.gif' width=200 height=215 border=0>&quot;);

function init() {

var img;
var x, y;
img = getImage(&quot;placeholder&quot;);
x = getImagePageLeft(img);
y = getImagePageTop(img);
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(x, y);
myScroller1.setzIndex(100);
myScroller1.show();
//-->
</script>

CODE FOR BODY:
<body onload=&quot;init();&quot; ....>

MORE CODE FOR BODY:
There needs to be an image located on the page using the tag:
<img name=&quot;placeholder&quot; src=&quot;images/placeholder.gif&quot; width=&quot;200&quot; height=&quot;215&quot; >
The script will locate the image and overlay the scroller.


// CODE FROM scroller.js
//*****************************************************************************
// Scroller constructor.
//*****************************************************************************

function Scroller(x, y, width, height, border, padding) {

this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.border = border;
this.padding = padding;

this.items = new Array();
this.created = false;

// Set default colors.

this.fgColor = &quot;#000000&quot;;
this.bgColor = &quot;#ffffff&quot;;
this.bdColor = &quot;#000000&quot;;

// Set default font.

this.fontFace = &quot;Arial,Helvetica&quot;;
this.fontSize = &quot;2&quot;;

// Set default scroll timing values.

this.speed = 50;
this.pauseTime = 2000;

// Define methods.

this.setColors = scrollerSetColors;
this.setFont = scrollerSetFont;
this.setSpeed = scrollerSetSpeed;
this.setPause = scrollersetPause;
this.addItem = scrollerAddItem;
this.create = scrollerCreate;
this.show = scrollerShow;
this.hide = scrollerHide;
this.moveTo = scrollerMoveTo;
this.moveBy = scrollerMoveBy;
this.getzIndex = scrollerGetzIndex;
this.setzIndex = scrollerSetzIndex;
this.stop = scrollerStop;
this.start = scrollerStart;
}

//*****************************************************************************
// Scroller methods.
//*****************************************************************************

function scrollerSetColors(fgcolor, bgcolor, bdcolor) {

if (this.created) {
alert(&quot;Scroller Error: Scroller has already been created.&quot;);
return;
}
this.fgColor = fgcolor;
this.bgColor = bgcolor;
this.bdColor = bdcolor;
}

function scrollerSetFont(face, size) {

if (this.created) {
alert(&quot;Scroller Error: Scroller has already been created.&quot;);
return;
}
this.fontFace = face;
this.fontSize = size;
}

function scrollerSetSpeed(pps) {

if (this.created) {
alert(&quot;Scroller Error: Scroller has already been created.&quot;);
return;
}
this.speed = pps;
}

function scrollersetPause(ms) {

if (this.created) {
alert(&quot;Scroller Error: Scroller has already been created.&quot;);
return;
}
this.pauseTime = ms;
}

function scrollerAddItem(str) {

if (this.created) {
alert(&quot;Scroller Error: Scroller has already been created.&quot;);
return;
}
this.items[this.items.length] = str;
}

function scrollerCreate() {

var start, end;
var str;
var i, j;
var x, y;

if (!isMinNS4 && !ie && !dom)
return;

// On first scroller, start interval timer.

if (scrollerList.length == 0)
setInterval('scrollerGo()', scrollerInterval);

// Create the scroller only once.

if (this.created) {
alert(&quot;Scroller Error: Scroller has already been created.&quot;);
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 = '<table border=0'
+ ' cellpadding=' + (this.padding + this.border)
+ ' cellspacing=0'
+ ' width=' + this.width
+ ' height=' + this.height + '>'
+ '<tr><td>'
+ '<font'
+ ' color=&quot;' + this.fgColor + '&quot;'
+ ' face=&quot;' + this.fontFace + '&quot;'
+ ' size=' + this.fontSize + '>';
end = '</font></td></tr></table>';

// Build the layers.

if (isMinNS4) {
this.baseLayer = new Layer(this.width);
this.scrollLayer = new Layer(this.width, this.baseLayer);
this.scrollLayer.visibility = &quot;inherit&quot;;
this.itemLayers = new Array();
for (i = 0; i < this.items.length; i++) {
this.itemLayers = new Layer(this.width, this.scrollLayer);
this.itemLayers.document.open();
this.itemLayers.document.writeln(start + this.items + end);
this.itemLayers.document.close();
this.itemLayers.visibility = &quot;inherit&quot;;
}

// Set background colors.

setBgColor(this.baseLayer, this.bdColor);
setBgColor(this.scrollLayer, this.bgColor);
}

if (ie||dom) {
i = scrollerList.length;
str = '<div id=&quot;scroller' + i + '_baseLayer&quot;'
+ ' style=&quot;position:absolute;'
+ ' background-color:' + this.bdColor + ';'
+ ' width:' + this.width + 'px;'
+ ' height:' + this.height + 'px;'
+ ' overflow:hidden;'
+ ' visibility:hidden;&quot;>\n'
+ '<div id=&quot;scroller' + i + '_scrollLayer&quot;'
+ ' style=&quot;position:absolute;'
+ ' background-color: ' + this.bgColor + ';'
+ ' width:' + this.width + 'px;'
+ ' height:' + (this.height * this.items.length) + 'px;'
+ ' visibility:inherit;&quot;>\n';
for (j = 0; j < this.items.length; j++) {
str += '<div id=&quot;scroller' + i + '_itemLayers' + j + '&quot;'
+ ' style=&quot;position:absolute;'
+ ' width:' + this.width + 'px;'
+ ' height:' + this.height + 'px;'
+ ' visibility:inherit;&quot;>\n'
+ start + this.items[j] + end
+ '</div>\n';
}
str += '</div>\n'
+ '</div>\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.tempholder.innerHTML=str
else if (dom)
document.getElementById(&quot;tempholder&quot;).innerHTML=str
//EDIT HERE//////////////////////////////////////////////////////////////////////////////
if (!(ie&&window.print))
window.scrollTo(x, y);

// Get handles to each layer.

this.baseLayer = getLayer(&quot;scroller&quot; + i + &quot;_baseLayer&quot;);
this.scrollLayer = getLayer(&quot;scroller&quot; + i + &quot;_scrollLayer&quot;);
this.itemLayers = new Array();
for (j = 0; j < this.items.length; j++)
this.itemLayers[j] = getLayer(&quot;scroller&quot; + i + &quot;_itemLayers&quot; + 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.

x = 0;
y = 0;
for (i = 0; i < this.items.length; i++) {
moveLayerTo(this.itemLayers, x, y);
clipLayer(this.itemLayers, 0, 0, this.width, this.height);
y += this.height;
}

// Set up scrolling parameters.

this.stopped = false;
this.currentY = 0;
this.stepY = this.speed / (1000 / scrollerInterval);
this.stepY = Math.min(this.height, this.stepY);
this.nextY = this.height;
this.maxY = this.height * (this.items.length - 1);
this.paused = true;
this.counter = 0;

// Add to global list.

scrollerList[scrollerList.length] = this;

// Display it.

showLayer(this.baseLayer);
}

function scrollerShow() {

if (this.created)

showLayer(this.baseLayer);
}

function scrollerHide() {

if (this.created)
hideLayer(this.baseLayer);
}

function scrollerMoveTo(x, y) {

if (this.created)
moveLayerTo(this.baseLayer, x, y);
}

function scrollerMoveBy(dx, dy) {

if (this.created)
moveLayerBy(this.baseLayer, dx, dy);
}

function scrollerGetzIndex() {

if (this.created)
return(getzIndex(this.baseLayer));
else
return(0);
}

function scrollerSetzIndex(z) {

if (this.created)
setzIndex(this.baseLayer, z);
}

function scrollerStart() {

this.stopped = false;
}

function scrollerStop() {

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 scrollerList = new Array();
var scrollerInterval = 20;

function scrollerGo() {

var i;

// Update each scroller object in the list.

for (i = 0; i < scrollerList.length; i++) {

// If stopped, skip.

if (scrollerList.stopped);

// If paused, update counter.

else if (scrollerList.paused) {
scrollerList.counter += scrollerInterval;
if (scrollerList.counter > scrollerList.pauseTime)
scrollerList.paused = false;
}

// Scroll it.

else {
scrollerList.currentY += scrollerList.stepY;

// Pause it if the next item has scrolled into view.

if (scrollerList.currentY >= scrollerList.nextY) {
scrollerList.paused = true;
scrollerList.counter = 0;
scrollerList.currentY = scrollerList.nextY;
scrollerList.nextY += scrollerList.height;
}

// When we reach the end, start over.

if (scrollerList.currentY >= scrollerList.maxY) {
scrollerList.currentY -= scrollerList.maxY;
scrollerList.nextY = scrollerList.height;
}

scrollLayerTo(scrollerList.scrollLayer,
0, Math.round(scrollerList.currentY),
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 = scrollerReload;

function scrollerReload() {

// 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;
}



Here's the file dhtmllib.js
/***********************************************************
*dhtmllib.js
* Copyright 1999 by Mike Hall.
* Visit for full script
* Last update: July 21st, '02 by Dynamic Drive for NS6 functionality.
* Provides basic functions for DHTML positioned elements which will work on
* both Netscape Communicator and Internet Explorer browsers (version 4.0 and up).

// Determine browser.

var isMinNS4 = document.layers
var ie=document.all&&navigator.userAgent.indexOf(&quot;Opera&quot;)==-1
var dom=document.getElementById&&!ie&&navigator.userAgent.indexOf(&quot;Opera&quot;)==-1

//-----------------------------------------------------------------------------
// Layer visibility.
//-----------------------------------------------------------------------------

function hideLayer(layer) {

if (isMinNS4)
layer.visibility = &quot;hide&quot;;
if (ie||dom)
layer.style.visibility = &quot;hidden&quot;;
}

function showLayer(layer) {

if (isMinNS4)
layer.visibility = &quot;show&quot;;
if (ie||dom)
layer.style.visibility = &quot;visible&quot;;
}

function inheritLayer(layer) {

if (isMinNS4)
layer.visibility = &quot;inherit&quot;;
if (ie||dom)
layer.style.visibility = &quot;inherit&quot;;
}

function getVisibility(layer) {

if (isMinNS4) {

if (layer.visibility == &quot;show&quot;)
return &quot;visible&quot;;
if (layer.visibility == &quot;hide&quot;)
return &quot;hidden&quot;;
return layer.visibility;
}
if (ie||dom)
return layer.style.visibility;
return &quot;&quot;;
}

function isVisible(layer) {

if (isMinNS4 && layer.visibility == &quot;show&quot;)
return(true);
if (ie||dom && layer.style.visibility == &quot;visible&quot;)
return(true);

return(false);
}

//-----------------------------------------------------------------------------
// Layer positioning.
//-----------------------------------------------------------------------------



function moveLayerTo(layer, x, y) {

if (isMinNS4)
layer.moveTo(x, y);
if (ie||dom) {
layer.style.left = x;
layer.style.top = y;
}
}

function moveLayerBy(layer, dx, dy) {

if (isMinNS4)
layer.moveBy(dx, dy);
if (ie||dom) {
layer.style.left= parseInt(layer.style.left)+dx;
layer.style.top= parseInt(layer.style.top)+dy;
}
}

function getLeft(layer) {

if (isMinNS4)
return(layer.left);
if (ie||dom)
return(parseInt(layer.style.left));
return(-1);
}

function getTop(layer) {

if (isMinNS4)
return(layer.top);
if (ie||dom)
return(parseInt(layer.style.top));
return(-1);
}

function getRight(layer) {

if (isMinNS4)
return(layer.left + getWidth(layer));
if (ie||dom)
return(parseInt(layer.style.left) + getWidth(layer));
return(-1);
}

function getBottom(layer) {

if (isMinNS4)
return(layer.top + getHeight(layer));
else if (ie||dom)
return(parseInt(layer.style.top) + getHeight(layer));
return(-1);
}

function getPageLeft(layer) {

if (isMinNS4)
return(layer.pageX);
if (ie||dom)
return(layer.offsetLeft);
return(-1);
}

function getPageTop(layer) {

if (isMinNS4)
return(layer.pageY);
if (ie||dom)
return(layer.offsetTop);
return(-1);
}

function getWidth(layer) {

if (isMinNS4) {
if (layer.document.width)
return(layer.document.width);
else
return(layer.clip.right - layer.clip.left);
}
if (ie||dom) {
if (layer.style.width)
return(layer.style.width);
else
return(layer.offsetWidth);
}
return(-1);
}

function getHeight(layer) {

if (isMinNS4) {
if (layer.document.height)
return(layer.document.height);
else
return(layer.clip.bottom - layer.clip.top);
}
if (ie||dom) {
if (false && layer.style.height)
return(layer.style.height);
else
return(layer.offsetHeight);
}
return(-1);
}

function getzIndex(layer) {

if (isMinNS4)
return(layer.zIndex);
if (ie||dom)
return(layer.style.zIndex);

return(-1);
}

function setzIndex(layer, z) {

if (isMinNS4)
layer.zIndex = z;
if (ie||dom)
layer.style.zIndex = z;
}

//-----------------------------------------------------------------------------
// Layer clipping.
//-----------------------------------------------------------------------------

function clipLayer(layer, clipleft, cliptop, clipright, clipbottom) {

if (isMinNS4) {
layer.clip.left = clipleft;
layer.clip.top = cliptop;
layer.clip.right = clipright;
layer.clip.bottom = clipbottom;
}
if (ie||dom)
layer.style.clip = 'rect(' + cliptop + ' ' + clipright + ' ' + clipbottom + ' ' + clipleft +')';
}

function getClipLeft(layer) {

if (isMinNS4)
return(layer.clip.left);
if (ie||dom) {
var str = layer.style.clip;
if (!str)
return(0);
var clip = getIEClipValues(layer.style.clip);
return(clip[3]);
}
return(-1);
}

function getClipTop(layer) {

if (isMinNS4)
return(layer.clip.top);
if (ie||dom) {
var str = layer.style.clip;
if (!str)
return(0);
var clip = getIEClipValues(layer.style.clip);
return(clip[0]);
}
return(-1);
}

function getClipRight(layer) {
if (isMinNS4)
return(layer.clip.right);
if (ie||dom) {
var str = layer.style.clip;
if (!str)
return(layer.style.width);
var clip = getIEClipValues(layer.style.clip);
return(clip[1]);
}
return(-1);
}

function getClipBottom(layer) {

if (isMinNS4)
return(layer.clip.bottom);
if (ie||dom) {
var str = layer.style.clip;
if (!str)
return(layer.style.height);
var clip = getIEClipValues(layer.style.clip);
return(clip[2]);
}
return(-1);
}

function getClipWidth(layer) {
if (isMinNS4)
return(layer.clip.width);
if (ie||dom) {
var str = layer.style.clip;
if (!str)
return(layer.style.width);
var clip = getIEClipValues(layer.style.clip);
return(clip[1] - clip[3]);
}
return(-1);
}

function getClipHeight(layer) {

if (isMinNS4)
return(layer.clip.height);
if (ie||dom) {
var str = layer.style.clip;
if (!str)
return(layer.style.height);
var clip = getIEClipValues(layer.style.clip);
return(clip[2] - clip[0]);
}
return(-1);
}

function getIEClipValues(str) {

var clip = new Array();
var i;

// Parse out the clipping values for IE layers.

i = str.indexOf(&quot;(&quot;);
clip[0] = parseInt(str.substring(i + 1, str.length), 10);
i = str.indexOf(&quot; &quot;, i + 1);
clip[1] = parseInt(str.substring(i + 1, str.length), 10);
i = str.indexOf(&quot; &quot;, i + 1);
clip[2] = parseInt(str.substring(i + 1, str.length), 10);
i = str.indexOf(&quot; &quot;, i + 1);
clip[3] = parseInt(str.substring(i + 1, str.length), 10);
return(clip);
}

//-----------------------------------------------------------------------------
// Layer scrolling.
//-----------------------------------------------------------------------------

function scrollLayerTo(layer, x, y, bound) {

var dx = getClipLeft(layer) - x;
var dy = getClipTop(layer) - y;

scrollLayerBy(layer, -dx, -dy, bound);
}

function scrollLayerBy(layer, dx, dy, bound) {

var cl = getClipLeft(layer);
var ct = getClipTop(layer);
var cr = getClipRight(layer);
var cb = getClipBottom(layer);

if (bound) {
if (cl + dx < 0)

dx = -cl;

else if (cr + dx > getWidth(layer))
dx = getWidth(layer) - cr;
if (ct + dy < 0)

dy = -ct;

else if (cb + dy > getHeight(layer))
dy = getHeight(layer) - cb;
}

clipLayer(layer, cl + dx, ct + dy, cr + dx, cb + dy);
moveLayerBy(layer, -dx, -dy);
}

//-----------------------------------------------------------------------------
// Layer background.
//-----------------------------------------------------------------------------

function setBgColor(layer, color) {

if (isMinNS4)
layer.bgColor = color;
if (ie||dom)
layer.style.backgroundColor = color;
}

function setBgImage(layer, src) {

if (isMinNS4)
layer.background.src = src;
if (ie||dom)
layer.style.backgroundImage = &quot;url(&quot; + src + &quot;)&quot;;
}

//-----------------------------------------------------------------------------
// Layer utilities.
//-----------------------------------------------------------------------------

function getLayer(name) {
if (isMinNS4)
return findLayer(name, document);
if (ie)
return eval('document.all.' + name);
if (dom)
return document.getElementById(name);
return null;
}

function findLayer(name, doc) {

var i, layer;

for (i = 0; i < doc.layers.length; i++) {
layer = doc.layers;
if (layer.name == name)
return layer;
if (layer.document.layers.length > 0) {
layer = findLayer(name, layer.document);
if (layer != null)
return layer;
}
}

return null;
}

//-----------------------------------------------------------------------------
// Window and page properties.
//-----------------------------------------------------------------------------

function getWindowWidth() {

if (isMinNS4||dom)
return(window.innerWidth);
if (ie)
return(document.body.clientWidth);
return(-1);
}

function getWindowHeight() {

if (isMinNS4||dom)
return(window.innerHeight);
if (ie)
return(document.body.clientHeight);
return(-1);
}

function getPageWidth() {

if (isMinNS4||dom)
return(document.width);
if (ie)
return(document.body.scrollWidth);
return(-1);
}

function getPageHeight() {

if (isMinNS4||dom)
return(document.height);
if (ie)
return(document.body.scrollHeight);
return(-1);
}

function getPageScrollX() {

if (isMinNS4||dom)
return(window.pageXOffset);
if (ie)
return(document.body.scrollLeft);
return(-1);
}

function getPageScrollY() {

if (isMinNS4||dom)
return(window.pageYOffset);
if (ie)

return(document.body.scrollTop);
return(-1);
}
 
Upvote 0 Downvote


try changing this line

scrollLayerTo
(scrollerList.scrollLayer,0, Math.round(scrollerList.currentY),false);

to this

scrollLayerTo
(scrollerList.scrollLayer,Math.round(scrollerList.currentX),0,false);
 
Upvote 0 Downvote
Hi Jeff,

thanks for the urls but I need a solution that has a scroll after a time delay and multiple instances of the scroll. Use flash for gods sake I hear you say... however the client wishes to have a great effect without the use of plugins and who am I to argue :)

Thanks for the tip simon, I hope it is as simple as that and will give it a go,

Cheers,

Graham.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
599
trevil620
trevil620
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
659
malpa
malpa
TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
200
gmmastros
gmmastros
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
900
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top