Make Page Scroller (aka Custom Scrollbar) scroll left to right instead of top to bott

**snakester** · 06-11-2014, 10:57 PM

1) Script Title: Page Scroller (aka Custom Scrollbar)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...gescroller.htm

3) Describe problem: i have used this scroller on several sites and it works great!

what i need to do on a new page is have it scroll horizontally rather than vertically.

tnx in advance
snakester

**jscheuer1** · 06-12-2014, 01:45 AM

http://home.comcast.net/~jscheuer1/s...horizontal.htm

Use your browser's "View Source" to get the code.

Any questions, just let me know.

**vwphillips** · 06-12-2014, 08:42 AM

see also http://www.dynamicdrive.com/forums/s...-old-DD-script

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.left {
  position:fixed;right:80px;bottom:50px;width:25px;height:25px;background-Color:red;text-Align:center;z-Index:100;
}

.right {
  position:fixed;right:50px;bottom:50px;width:25px;height:25px;background-Color:red;text-Align:center;z-Index:100;
}

.up {
  position:fixed;right:65px;bottom:80px;width:25px;height:25px;background-Color:red;text-Align:center;z-Index:100;
}

.down {
  position:fixed;right:65px;bottom:20px;width:25px;height:25px;background-Color:red;text-Align:center;z-Index:100;
}

/*]]>*/
</style>
</head>

<body>

<div style="width:5000px;height:5050px;background-Color:blue" >
</div>

<div class="up" onmouseover="scrollwindow(0,-10);" onmouseout="scrollwindow();">U</div>
<div class="down" onmouseover="scrollwindow(0,10);" onmouseout="scrollwindow();">D</div>

<div class="left" onmouseover="scrollwindow(-10,0);" onmouseout="scrollwindow();">L</div>
<div class="right" onmouseover="scrollwindow(10,0);" onmouseout="scrollwindow();">R</div>


<script type="text/javascript">
/*<![CDATA[*/

function scrollwindow(x,y){
 clearTimeout(scrollwindow.to);
 if (typeof(x)=='number'&&typeof(y)=='number'){
  window.scrollBy(x,y);
  scrollwindow.to=setTimeout(function(){ scrollwindow(x,y); },50);
 }
}


/*]]>*/
</script>
</body>

</html>

**molendijk** · 06-12-2014, 02:36 PM

See http://mesdomaines.nu/scroll_div_demo.html
View the source for the code.

**snakester** · 06-13-2014, 01:59 AM

tnx jscheuer1

i worked with jscheur1's script and with mods below got it to work except for one issue is that when you mouse over the arrows the arrows jog slightly in the direction that it is pointing...?

Code:

<div id="staticbuttons" style="position:absolute;">
	<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0">
	<img src="art/ws1_aL.png" alt="" border="0" align="left">
	</a>
	<img src="art/x.gif" alt="" width="490" height="1" border="0" align="left">
	<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0">
	<img src="art/ws1_aR.png" alt="" border="0" align="left">
	</a>
</div>

i have the arrows at each end of a table that contains thumbnails you click on to see main photo so the table in your script doesn't work.

**jscheuer1** · 06-13-2014, 02:36 AM

That (arrows moving slightly on mouseover) is not because of the change to a div, it still happens with my demo that uses table. Adapt this updated code to take care of it:

http://home.comcast.net/~jscheuer1/s...horizontal.htm

Requires IE 8 and up or any other modern browser (requires support for fixed positioning).

**snakester** · 06-13-2014, 07:47 AM

i tried that and the table that has the buttons sits over and totally across what is a scrolling group of thumbnails with links to the main display iframe...

result: cannot click on thumbnails...

Click image for larger version.

Name: ws1_exp.jpg
Views: 115
Size: 83.6 KB
ID: 5477

note: still working on design so don't think badly of me. lol.

**jscheuer1** · 06-13-2014, 02:22 PM

Oh, well. What you're dealing with now is primarily HTML and CSS. I thought you would adapt the fixed positioning to your div code. Anyways, I hope this will show you how to get what you want. A lot is different (HTML, javascript and CSS):

http://home.comcast.net/~jscheuer1/s...rizontal-2.htm

Thread: Make Page Scroller (aka Custom Scrollbar) scroll left to right instead of top to bott

Thread Tools

Search Thread

Make Page Scroller (aka Custom Scrollbar) scroll left to right instead of top to bott

Similar Threads

Page Scroller (aka Custom Scrollbar)

Page Scroller (aka Custom Scrollbar)

Page Scroller (aka Custom Scrollbar)

Page Scroller (aka Custom ScrollbHelp with custom scrollbar

Page Scroller (aka Custom Scrollbar)

Bookmarks

Bookmarks

Posting Permissions