DHTMLCentral.com - Free Dynamic HTML Scripts

Login

Save Password - Forgot Pass?

Not a member?
Become a DC
member now!

Info

Author: Thomas Brattli
Modifications by Michael van Ouwerkerk

Works in: NS4+ IE4+

Downloaded:67492 times
View script

History
No history...

SideScrollMenu
Written 09/07/2001 by Thomas Brattli. Last updated 09/07/2001.

A menu that scrolls links horizontally.

Instructions
Instructions in 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

#divBg           {position:absolute; z-index:10; width:2000px; left:0px; height:100px; clip:rect(0px 10px 10px 0px); visibility:hidden;}
#divMenu         {position:absolute; z-index:11; left:11px; top:1px; color:#333333; font-size:13px; font-family:verdana,arial,helvetica,sans-serif; visibility:inherit;}
#divArrowLeft    {position:absolute; z-index:12; width:11px; height:20px; left:0px; top:0px; visibility:inherit;}
#divArrowRight   {position:absolute; z-index:12; width:11px; height:20px; top:0px; visibility:inherit;}
</style>

/**************************************************************************
Scrolling functions
***************************************************************************/
var tim = 0
var noScroll = true
function mLeft(){
	if (!noScroll && oMenu.x<sArrowwidth){
		oMenu.moveBy(sScrollPx,0)
		tim = setTimeout("mLeft()",sScrollspeed)
	}
}
function mRight(){
	if (!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){
		oMenu.moveBy(-sScrollPx,0)
		tim = setTimeout("mRight()",sScrollspeed)
	}
}
function noMove(){
	clearTimeout(tim);
	noScroll = true;
	sScrollPx = sScrollPxOriginal;
}
/**************************************************************************
Object part
***************************************************************************/
function makeObj(obj,nest,menu){
	nest = (!nest) ? "":'document.'+nest+'.';
	this.elm = bw.ns4?eval(nest+"document.layers." +obj):bw.ie4?document.all[obj]:document.getElementById(obj);
   	this.css = bw.ns4?this.elm:this.elm.style;
	this.scrollWidth = bw.ns4?this.css.document.width:this.elm.offsetWidth;
	this.x = bw.ns4?this.css.left:this.elm.offsetLeft;
	this.y = bw.ns4?this.css.top:this.elm.offsetTop;
	this.moveBy = b_moveBy;
	this.moveIt = b_moveIt;
	this.clipTo = b_clipTo;
	return this;
}
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){
	if (x!=null){this.x=x; this.css.left=this.x+px;}
	if (y!=null){this.y=y; this.css.top=this.y+px;}
}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_clipTo(t,r,b,l){
	if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l;}
	else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
/**************************************************************************
Object part end
***************************************************************************/

/**************************************************************************
Init function. Set the placements of the objects here.
***************************************************************************/
var sScrollPxOriginal = sScrollPx;
function sideInit(){
	//Width of the menu, Currently set to the width of the document.
	//If you want the menu to be 500px wide for instance, just 
	//set the pageWidth=500 in stead.
	pageWidth = (bw.ns4 || bw.ns6 || window.opera)?innerWidth:document.body.clientWidth;
	
	//Making the objects...
	oBg = new makeObj('divBg')
	oMenu = new makeObj('divMenu','divBg',1)
	oArrowRight = new makeObj('divArrowRight','divBg')
	
	//Placing the menucontainer, the layer with links, and the right arrow.
	oBg.moveIt(sLeft,sTop) //Main div, holds all the other divs.
	oMenu.moveIt(sArrowwidth,null)
	oArrowRight.css.width = sArrowwidth;
	oArrowRight.moveIt(pageWidth-sArrowwidth,null)
	
	//Setting the width and the visible area of the links.
	if (!bw.ns4) oBg.css.overflow = "hidden";
	if (bw.ns6) oMenu.css.position = "relative";
	oBg.css.width = pageWidth+px;
	oBg.clipTo(0,pageWidth,sMenuheight,0)
	oBg.css.visibility = "visible";
}

//executing the init function on pageload if the browser is ok.
if (bw.bw) onload = sideInit;
</script>

Body

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.

SideScrollMenu Written 09/07/2001 by Thomas Brattli. Last updated 09/07/2001.

Donations

SideScrollMenu
Written 09/07/2001 by Thomas Brattli. Last updated 09/07/2001.