Horizontal page scroller (again)

[rhiaro]

I've altered this script: http://www.dynamicdrive.com/dynamici...gescroller.htm to make the buttons scroll the page horizontally instead of vertically. However I'm now having trouble getting my images to sit next to each other, instead of one on top of the other as in the original script.


<div id="staticbuttons" style="position:absolute;">
<br>
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="arrow_p.jpg" border="0" width="337" height="50"></a><a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="arrow_f.jpg" border="0" width="337" height="50"></a>
</div>


<script>

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

var Hoffset=650 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=130 //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
}

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 :)

[jscheuer1]

<div id="staticbuttons" style="position:absolute;">

<table>
<tr><td><a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="arrow_p.jpg" border="0" width="337" height="50"></a></td>
<td><a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="arrow_f.jpg" border="0" width="337" height="50"></a></td></tr>
</table>

</div>

or possibly:


<div id="staticbuttons" style="position:absolute;width:680px;">

<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="arrow_p.jpg" border="0" width="337" height="50"></a><a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="arrow_f.jpg" border="0" width="337" height="50"></a>
</div>

The first method is more foolproof. The second requires that the images display inline (default for images unless you have something else on the page that changes that).

[rhiaro]

I'd already tried the first method, but putting the images in a table stopped the images from staying still while the rest of the page scrolled.

I'll try the second one later, and get back to you :)

Thanks!

[jscheuer1]

You must be doing something else wrong then, or you are more picky than most about what constitutes "staying still". Here is a link to a thread with a working version of the code modified to scroll horizontally:

http://www.dynamicdrive.com/forums/showthread.php?t=6897

[rhiaro]

Chances are I was doing something else wrong :p

Thanks for your help, very much appreciated :)

[rhiaro]

My new problem is that I have decided I want the normal horizontal scrollbar present as well as the custom one... How can I modify the code (see above somewhere) to allow this?

Thanks :)

[rhiaro]

Waheeeeyyy did it myself :D

Just removed the line

iecompattest().style.overflowX='hidden'