DHTMLCentral.com - Free Dynamic HTML Scripts

Login

Save Password - Forgot Pass?

Not a member?
Become a DC
member now!

Info

Author: Thomas Brattli

Works in: NS4+ IE4+

Downloaded:101402 times
View script

History
No history...

PageScroll
Written 05/14/2001 by Thomas Brattli. Last updated 09/23/2001.

This script is similar to the textscroll script except that this one has more scrollable layers, so when you change layer it looks like you load a new page inside the scroller.

Instructions
You could put the scroller in a table if you change the position of divCont, from absolute to relative. However, this will cause it to stop working in netscape 4. If you wish to support netscape 4, you will have to use absolute positioning.

Further instructions can be found in the source-code.

Source
You have two options on getting the source to this script.

1. Copy the source from the textboxes below and place the code inside the body textbox in the body of your document and the code in the head textbox in the head of your document. If there are images to the script right click on the images below the textboxes and choose "save as" to get them.

2. Download the sourcecode and images in a zip file

Head

//The speed of the timeout between each scroll.
timSpeed = 50

//The height of the container (change this when it scrolls to much or to little)
contHeight = 100

/*********************************************************************************
This is the object constructor function, which applies 
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(obj,nest){
	nest=(!nest) ? "":'document.'+nest+'.'		
	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
  	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;		
	this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
	this.top=b_gettop										
	return this
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

//Getting the top for the top method
function b_gettop(){
	var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
	clearTimeout(scrollTim)
	way = speed>0?1:0
	if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
		oScroll[active].css.top = (oScroll[active].top()+speed)+px
		scrollTim = setTimeout("scroll("+speed+")",timSpeed)
	}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
	clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
	oScroll[active].css.visibility = "hidden"
	active = num
	oScroll[active].css.top = 0+px
	oScroll[active].css.visibility = "visible"
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
	oScroll = new Array()
	
	// You can add and remove scrollObjects here.
	oScroll[0] = new makeScrollObj('divScroll1','divCont')
	oScroll[1] = new makeScrollObj('divScroll2','divCont')
	oScroll[2] = new makeScrollObj('divScroll3','divCont')
	oScroll[3] = new makeScrollObj('divScroll4','divCont')
	
	oScroll[0].css.left = 0+px
	oScroll[0].css.top = 0+px
	oScroll[0].css.visibility = "visible"
	oControl = new makeScrollObj('divControl')
	oControl.css.visibility = "visible"
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload = scrollInit;

/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
   1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
   2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
   Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>

Body

<div id="divControl">
	<a href="#" onclick="changeActive(0); return false">Page 1</a>
	<a href="#" onclick="changeActive(1); return false">Page 2</a>
	<a href="#" onclick="changeActive(2); return false">Page 3</a>
	<a href="#" onclick="changeActive(3); return false">Page 4</a>
	<br><br>
	<a href="#" onmouseover="scroll(5)" onmouseout="noScroll()" onclick="return false">up</a>
	<a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()" onclick="return false">down</a>
</div>
<div id="divCont">
	<div id="divScroll1" class="clScroll">
		This is "page" 1, here you place some content.
		You should place more content then this
		or it won't scroll..blablablabl<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
	</div>
	
	<div id="divScroll2" class="clScroll">
		This is "page" 2...........
		<br>text textdummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
		text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
		<br>text textdummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
		text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
	</div>

<div id="divScroll3" class="clScroll">
		This is "page" 3...........(can't scroll this one, to little content)
		<br>
	</div>

<div id="divScroll4" class="clScroll">
		Page 4 
		text text dummy texttext text dummy texttext text dummy text<br>
		<br>ext text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
	</div>
</div>

All the free scripts on this site may be reused as long the copyright notice is intact in the script source. If you wish to use any of the scripts without the copyright notice contact us at copyright@dhtmlcentral.com.

Donations

Though all scripts on this site is free you have the ability to donate to the site to help freeing up my time to make the scripts (and the rest of the site) better.

For more info see donations.

PageScroll Written 05/14/2001 by Thomas Brattli. Last updated 09/23/2001.

Donations

PageScroll
Written 05/14/2001 by Thomas Brattli. Last updated 09/23/2001.