Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jun 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

    Any questions, just let me know.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

  5. #5
    Join Date
    Jun 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:	114 
Size:	83.6 KB 
ID:	5477

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Page Scroller (aka Custom Scrollbar)
    By sysout in forum Bug reports
    Replies: 0
    Last Post: 08-22-2009, 01:59 AM
  2. Page Scroller (aka Custom Scrollbar)
    By Jim Weinberg in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-13-2006, 11:19 PM
  3. Page Scroller (aka Custom Scrollbar)
    By share in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-05-2006, 05:23 AM
  4. Page Scroller (aka Custom ScrollbHelp with custom scrollbar
    By chrishoo5 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-13-2006, 04:12 AM
  5. Page Scroller (aka Custom Scrollbar)
    By alseides in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-22-2005, 12:00 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •