Absolutely Positioned Scrollable Area

liunx · Jan 10, 2008

I am trying to implement a DHTML scrollable area into my site and have found one on <a class="postlink" href="http://www.z3roadster.net/dreamweaver">www.z3roadster.net/dreamweaver</a>. The JavaScript is within a file written in HTML. It works fine when I test it in IE6 and Mozilla 1.3. When I try and copy it into my XHTML script, it results in the scrollable area not working in Mozilla, yet it still works fine in IE6. Can anyone help me? I can't see what I need to alter in order to make it work in Mozilla. Thanks in advance. The script is as follows: 
 
<head> 
<style type="text/css"> 
#divUpControl{position:absolute; width:400; left:40; top:200; z-index:1;} 
#divDownControl{position:absolute; width:400; left:40; top:490; z-index:1;} 
#divContainer{position:absolute; width:500; height:281; overflow:hidden; top:200; left:40; clip:rect(0,400,281,0); visibility:hidden} 
#divContent{position:absolute; top60; left:0;font-size:11px;font-family:Verdana;line-height:18px;text-align:justify;} 
</style> 
<script language="JavaScript"> 
 
function MM_preloadImages() { //v3.0 
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=http://www.webdeveloper.com/forum/archive/index.php/a;}} 
} 
 
function MM_swapImgRestore() { //v3.0 
var i,x,a=document.MM_sr; 
for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) { 
x.src=http://www.webdeveloper.com/forum/archive/index.php/x.oSrc; 
} 
CeaseScroll(); 
} 
 
function MM_findObj(n, d) { //v4.01 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; 
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); 
if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 
 
function MM_swapImage() { //v3.0 
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; 
for(i=0;i<(a.length-2);i+=3) 
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=http://www.webdeveloper.com/forum/archive/index.php/x.src; x.src=a[i+2];} 
if (a[0]=='Image2') PerformScroll(7); 
else PerformScroll(-7); 
} 
 
 
// begin absolutely positioned scrollable area object scripts 
/* 
Extension developed by David G. Miles (<a class="postlink" href="http://www.z3roadster.net/dreamweaver">www.z3roadster.net/dreamweaver</a>) 
Original Scrollable Area code developed by Thomas Brattli 
To add more shock to your site, visit <a class="postlink" href="http://www.DHTML">www.DHTML</a> Shock.com 
*/ 
function lib_bwcheck(){ //Browsercheck (needed) 
this.ver=navigator.appVersion 
this.agent=navigator.userAgent 
this.dom=document.getElementById?1:0 
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0 
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; 
this.ie4=(document.all && !this.dom && !this.opera5)?1:0; 
this.ie=this.ie4||this.ie5||this.ie6 
this.mac=this.agent.indexOf("Mac")>-1 
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
this.ns4=(document.layers && !this.dom)?1:0; 
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) 
return this 
} 
var bw=lib_bwcheck() 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(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.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
this.up=MoveAreaUp;this.down=MoveAreaDown; 
this.MoveArea=MoveArea; this.x; this.y; 
this.obj = obj + "Object" 
eval(this.obj + "=this") 
return this 
} 
function MoveArea(x,y){ 
this.x=x;this.y=y 
this.css.left=this.x 
this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
divUpArrow.css.visibility='visible' 
this.MoveArea(0,this.y-move) 
if(loop) setTimeout(this.obj+".down("+move+")",speed) 
} 
else divDownArrow.css.visibility='hidden' 
} 
function MoveAreaUp(move){ 
if(this.y<0){ 
divDownArrow.css.visibility='visible' 
this.MoveArea(0,this.y-move) 
if(loop) setTimeout(this.obj+".up("+move+")",speed) 
} 
else divUpArrow.css.visibility='hidden' 
} 
 
function PerformScroll(speed){ 
if(initialised){ 
loop=true; 
if(speed>0) objScroller.down(speed) 
else objScroller.up(speed) 
} 
} 
 
function CeaseScroll(){ 
loop=false 
if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
objContainer=new ConstructObject('divContainer') 
objScroller=new ConstructObject('divContent','divContainer') 
objScroller.MoveArea(0,0) 
objContainer.css.visibility='visible' 
initialised=true; 
divUpArrow=new ConstructObject('divUpControl') 
divDownArrow=new ConstructObject('divDownControl') 
divUpArrow.css.visibility='hidden' 
} 
// end absolutely positioned scrollable area object scripts 
 
window.focus(); 
 
</script> 
</head> 
 
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF" onLoad="InitialiseScrollableArea()"> 
 
 
 
<div id="divUpControl" align="center" style="visibility:hidden;"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"java script:;" onMouseOver="MM_swapImage('Image1','','images/scrollup_r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scrollup.gif" width="400" height="11" alt="" border="0" name="Image1"></a></div> 
<div id="divDownControl" align="center"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"java script:;" onMouseOver="MM_swapImage('Image2','','images/scrolldown_r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scrolldown.gif" width="400" height="11" alt="" border="0" name="Image2"></a></div> 
<div id="divContainer"> 
<div id="divContent"> 
 
Content here! 
 
</div> 
</div> 
 
 
 
</body> 
</html>Easier way. 
<div style="height:400px; width:400px; overflow:auto;">content will scroll when it is bigger then the div</div>

Absolutely Positioned Scrollable Area

liunx

Guest