Need advice on horizontal scrolling

Forum Moderators: open

Message Too Old, No Replies

Need advice on horizontal scrolling

lxndr

10:32 am on Feb 17, 2006 (gmt 0)

Hi,

Am looking for a bit of general advice on the best way to achieve something, I'm not sure whether javascript can help me or whether there's a commercial applet I can use but I want to be able to have a horizontal scroller function on my site that can scroll the following or allow users to scroll it manually left or right but I dont want to use the standard web browser scroller bars.

Would really appreciate any helpful suggestions.

Ian

[edited by: DrDoc at 11:35 am (utc) on Feb. 20, 2006]
[edit reason] No URLs, thanks. See TOS [WebmasterWorld.com] [/edit]

lxndr

11:29 am on Feb 17, 2006 (gmt 0)

Since posting have managed to find a solution which almost does what I want off DHTMLCentral but I think the script was intended purely for text links so having added HTML structures as the portion to be scrolled its not quite right. Can anyone tell me what to modify in the following code so that the left and right arrows and aligned to the centre of the scroll area (they're at the top at the moment) and also so that when the scrolling happens the scrolled portion does not overlap the arrows, ie. there is always a small space between left and right arrows and the scrollable area:

left arrow - space - scrollable area - space - right arrow

Any help much appreciated.

code:

<HTML>
<HEAD>
<style type="text/css">
body {background-color:#ffffff;}
#divMenu a {color:#999999; text-decoration:underline;}
#divMenu a:hover {color:#333333; text-decoration:underline;}

#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;
pageWidth=500;

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

</HEAD>

<BODY>

<TD>
<TABLE border = "1">
<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">1841 census</FONT></TD>
</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 138,824 </B></FONT></TD>
</TR>
</TABLE>
</TD>

<TD>
<TABLE border = "1">
<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">1851 census</FONT></TD>
</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 17,273 </B></FONT></TD>
</TR>
</TABLE>
</TD>

<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="FFFFFF">1861 census</FONT></TD>
</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 55,558 </B></FONT></TD>
</TR>
</TABLE>
</TD>

<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">Directories</FONT></TD>
</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 60,516 </B></FONT></TD>
</TR>
</TABLE>
</TD>

<TD>
<TD>
<TABLE border = "1">
<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">GenSearch</FONT></TD>

</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 1,227 </B></FONT></TD>
</TR>
</TABLE>
</TD>

<TD>
<TD>
<TABLE border = "1">
<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">Probate</FONT></TD>
</TR>

<TD>
<TD>
<TABLE border = "1">
<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">Burials</FONT></TD>
</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 8,743 </B></FONT></TD>

</TR>
</TABLE>
</TD>

<TD>
<TD>
<TABLE border = "1">
<TR BGCOLOR=#663333>
<TD ALIGN = "CENTER" ><FONT SIZE = "1" COLOR="#FFFFFF">Strays</FONT></TD>
</TR>
<TR>
<TD ALIGN = "CENTER"><FONT COLOR = "#3366BB" SIZE = "4"><B> 204 </B></FONT></TD>
</TR>

</TABLE>
</TD>

</TR>
</TABLE>
</nobr>
</div>
<div id="divArrowLeft"><a href="#" onmouseover="noScroll=false; mLeft()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra"><img src="arrowleft.gif" width="11" height="21" alt="" border="0"></a></div>
<div id="divArrowRight"><a href="#" onmouseover="noScroll=false; mRight()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra"><img src="arrowright.gif" width="11" height="21" alt="" border="0"></a></div>
</div>

</CENTER>
</BODY>

</HTML>

lxndr

11:22 am on Feb 20, 2006 (gmt 0)

anyone?