PDA

View Full Version : 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/dynamicindex2/pagescroller.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/side/custom_scroller/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/showthread.php?76954-Slight-change-to-an-old-DD-script





<!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...?


<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/side/custom_scroller/fixed-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...

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/side/custom_scroller/fixed-horizontal-2.htm