Custom page scroller

[chem3]

Hello,

I want to use the horizontal custom page scroller on my page, but I am having the following problems:

1- I want to keep the browser's standard horizontal scroll bar (in addition to the custom one). How can I make the script not to disable the standard horizontal scrollbar?

2- I want to position that custom page scroller to be VERTICALLY FIXED, but free to shift horizontally to keep it always at the center of the browser window (not at the center of the whole page) when the user scrolls the page horizontally (Left-right, right-left). For example, see the following image which better describes what I want to do (I assumed that the width of the page = 3000 pixels):

http://chem3.jeeran.com/ps.PNG


So, how can I keep it VERTICALLY FIXED and horizontally centered to the center of the browser window?

Here's the custom page scroller script (From a jscheuer1's post) :


<table id="staticbuttons" style="position:absolute;cursor:pointer;"><tr><td>&nbsp;<a
onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="arrows_lt.gif"
border="0" alt=""></a></td><td>&nbsp;<a onmouseover="myspeed=thespeed"
onmouseout="myspeed=0"><img src="arrows_rt.gif" border="0" alt=""></a></td></tr></table>

<script>

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//Modified for Horizontal Scrolling by jscheuer1 in http://www.dynamicdrive.com/forums
//This credit MUST stay intact for use

var Hoffset=110 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=80 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

iecompattest().style.overflowX='hidden'

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(myspeed,0)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

</script>


Thanks in advance for any help!

[jscheuer1]

<table id="staticbuttons" style="position:absolute;cursor:pointer;"><tr><td>&nbsp;<a
onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="arrows_lt.gif"
border="0" alt=""></a></td><td>&nbsp;<a onmouseover="myspeed=thespeed"
onmouseout="myspeed=0"><img src="arrows_rt.gif" border="0" alt=""></a></td></tr></table>

<script type="text/javascript">

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//Modified for Horizontal Scrolling and centered, top oriented controls by:
//jscheuer1 in http://www.dynamicdrive.com/forums
//This credit MUST stay intact for use

var Voffset=20 //Enter buttons' offset from top edge of window (adjust depending on images height)
var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)/2-cross_obj.offsetWidth/2+"px"
cross_obj.style.top=dsoctop+Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width/2-cross_obj.offsetWidth/2
cross_obj.top=dsoctop+window_height+Voffset
}
}

function scrollwindow(){
window.scrollBy(myspeed,0)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

</script>

[chem3]

Thanks John!
It works well, but the only problem is that the custom scroller is not VERTICALLY FIXED, i.e. when you scroll the page up and down it will change its vertical position. See the result HERE (http://chem3.jeeran.com/pst.htm)

I want to fix its vertical position and keep it under my first table (the 3000-pixel-wide purple table you see on the page above).

[jscheuer1]

What browser are you testing in? Works (my demo copy) fine here in IE6, FF1.0.7 and Opera8.51. It is a little sluggish in NS8.0.4 FF mode but catches up when the scroll bar is released and works fine in IE mode for that browser. I notice on your live demo you have no images, that can make a difference for some browsers. And, just like it says on the demo page for the original:

"Simply add the below script to the bottom of your page (ie: right above </BODY>):"

It (both the script and its markup) should be the last thing on your page.

Added Later: I also noticed that you had another script on your demo page, there could be conflicts, try out the scroller on a page by itself to see.