kovacon
03-26-2003, 10:10 PM
hi,
im trying to create a horizontal scroller with heaps of images but when the page loads, it comes up with a default horizontal scroll bar the length of the images. Then when you rollover the text buttons it disappears.
Is there any way to get the page to load without the default scroll bar coming up and without having to rollover the buttons to make it disappear?
below is the script i have been using..
THANKS!!!!!!!!!!!!!!!!!!!!!!!!!
<html>
<head>
<title>Horizontal Scroller</title>
<style type="text/css">
#contentLayer { position:absolute; width:400px; z-index:1; left: 0px; top: 0px; height: 80px}
body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}
</style>
<link rel="stylesheet" href="../../browndog%20-%20final/LLB_SUNDAY/assets/llb.css" type="text/css">
<link rel="stylesheet" href="../../browndog%20-%20final/portfolio%20section/body.css" type="text/css">
<script language="JavaScript">
<!--
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function P7_HScroller(el,dr,tx,ox,spd) { //v1.7 by PVII
var g,gg,fr,sp,pa='',slw=true,m=false,w,ww,lx,rx;tx=parseInt(tx);
if((g=MM_findObj(el))!=null){gg=(document.layers)?g:g.style;}else{return;}
if(dr=="Stop"){if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1){slw=false;}
if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;}else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
}else{sp=(slw)?8:4;fr=(slw)?40:10;}if(spd=="Warp"){sp=5000;}var xx = parseInt(gg.left);if(isNaN(xx)){
if(g.currentStyle){xx=parseInt(g.currentStyle.left);}else if(document.defaultView&&document.defaultView.getComputedStyle){
xx=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("left"));}else{xx=0;}}
if(document.all || document.getElementById){w=parseInt(g.offsetWidth);if(!w){w=parseInt(g.style.pixelWidth);}
if(g.hasChildNodes){for(wx=0;wx<g.childNodes.length;wx++){ww=parseInt(g.childNodes[wx].offsetWidth);
if(ww>w){w=ww;}}}}else if(document.layers){w=parseInt(g.clip.width);}lx=tx-w+parseInt(ox);rx=tx;
if(dr=="Right"){if(xx>lx){m=true;xx-=sp;if(xx<lx){xx=lx;}}}
if(dr=="Left"){if(xx<rx){m=true;xx+=sp;if(xx>rx){xx=rx;}}}
if(dr=="Reset"){gg.left=tx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
if(m){gg.left=xx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=true;
eval("g.p7Magic=setTimeout(\"P7_HScroller('"+el+"','"+dr+"',"+tx+","+ox+",'"+spd+"')\","+fr+")");
}else{g.toMove=false;}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="containLayer" style="position:absolute; width:141px; z-index:1; left: 100px; top: 27px; height: 151px; overflow: hidden; clip: rect(0px 80px 80px 0px)">
<div id="contentLayer" style="left: 01px; top: 0px">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/access/access_01.jpg" width="188" height="292"></td>
<td><img src="images/access/access_02.jpg" width="188" height="292"></td>
<td><img src="images/access/access_03.jpg" width="188" height="292"></td>
<td><img src="images/access/access_04.jpg" width="188" height="292"></td>
<td><img src="images/access/access_05.jpg" width="188" height="292"></td>
</tr>
</table>
</div>
</div>
<div id="controlLayer" style="position:absolute; width:200px; z-index:2; left: 40px; top: 190px">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="javascript:;" onMouseOver="P7_HScroller('contentLayer','Right',0,80,'Medium')" onMouseOut="P7_HScroller('contentLayer','Stop',0,0,'Medium')" onClick="return false">LEFT</a></td>
<td align="center"><a href="javascript:;" onClick="P7_HScroller('contentLayer','Reset',0,0,'Warp');return false">RESET</a></td>
<td align="center"><a href="javascript:;" onMouseOver="P7_HScroller('contentLayer','Left',0,0,'Medium')" onMouseOut="P7_HScroller('contentLayer','Stop',0,0,'Medium')" onClick="return false">RIGHT</a></td>
</tr>
</table>
</div>
</body>
</html>
im trying to create a horizontal scroller with heaps of images but when the page loads, it comes up with a default horizontal scroll bar the length of the images. Then when you rollover the text buttons it disappears.
Is there any way to get the page to load without the default scroll bar coming up and without having to rollover the buttons to make it disappear?
below is the script i have been using..
THANKS!!!!!!!!!!!!!!!!!!!!!!!!!
<html>
<head>
<title>Horizontal Scroller</title>
<style type="text/css">
#contentLayer { position:absolute; width:400px; z-index:1; left: 0px; top: 0px; height: 80px}
body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}
</style>
<link rel="stylesheet" href="../../browndog%20-%20final/LLB_SUNDAY/assets/llb.css" type="text/css">
<link rel="stylesheet" href="../../browndog%20-%20final/portfolio%20section/body.css" type="text/css">
<script language="JavaScript">
<!--
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function P7_HScroller(el,dr,tx,ox,spd) { //v1.7 by PVII
var g,gg,fr,sp,pa='',slw=true,m=false,w,ww,lx,rx;tx=parseInt(tx);
if((g=MM_findObj(el))!=null){gg=(document.layers)?g:g.style;}else{return;}
if(dr=="Stop"){if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1){slw=false;}
if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;}else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
}else{sp=(slw)?8:4;fr=(slw)?40:10;}if(spd=="Warp"){sp=5000;}var xx = parseInt(gg.left);if(isNaN(xx)){
if(g.currentStyle){xx=parseInt(g.currentStyle.left);}else if(document.defaultView&&document.defaultView.getComputedStyle){
xx=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("left"));}else{xx=0;}}
if(document.all || document.getElementById){w=parseInt(g.offsetWidth);if(!w){w=parseInt(g.style.pixelWidth);}
if(g.hasChildNodes){for(wx=0;wx<g.childNodes.length;wx++){ww=parseInt(g.childNodes[wx].offsetWidth);
if(ww>w){w=ww;}}}}else if(document.layers){w=parseInt(g.clip.width);}lx=tx-w+parseInt(ox);rx=tx;
if(dr=="Right"){if(xx>lx){m=true;xx-=sp;if(xx<lx){xx=lx;}}}
if(dr=="Left"){if(xx<rx){m=true;xx+=sp;if(xx>rx){xx=rx;}}}
if(dr=="Reset"){gg.left=tx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
if(m){gg.left=xx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=true;
eval("g.p7Magic=setTimeout(\"P7_HScroller('"+el+"','"+dr+"',"+tx+","+ox+",'"+spd+"')\","+fr+")");
}else{g.toMove=false;}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="containLayer" style="position:absolute; width:141px; z-index:1; left: 100px; top: 27px; height: 151px; overflow: hidden; clip: rect(0px 80px 80px 0px)">
<div id="contentLayer" style="left: 01px; top: 0px">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/access/access_01.jpg" width="188" height="292"></td>
<td><img src="images/access/access_02.jpg" width="188" height="292"></td>
<td><img src="images/access/access_03.jpg" width="188" height="292"></td>
<td><img src="images/access/access_04.jpg" width="188" height="292"></td>
<td><img src="images/access/access_05.jpg" width="188" height="292"></td>
</tr>
</table>
</div>
</div>
<div id="controlLayer" style="position:absolute; width:200px; z-index:2; left: 40px; top: 190px">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="javascript:;" onMouseOver="P7_HScroller('contentLayer','Right',0,80,'Medium')" onMouseOut="P7_HScroller('contentLayer','Stop',0,0,'Medium')" onClick="return false">LEFT</a></td>
<td align="center"><a href="javascript:;" onClick="P7_HScroller('contentLayer','Reset',0,0,'Warp');return false">RESET</a></td>
<td align="center"><a href="javascript:;" onMouseOver="P7_HScroller('contentLayer','Left',0,0,'Medium')" onMouseOut="P7_HScroller('contentLayer','Stop',0,0,'Medium')" onClick="return false">RIGHT</a></td>
</tr>
</table>
</div>
</body>
</html>