Results 1 to 7 of 7

Thread: Horizontal page scroller (again)

  1. #1
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Horizontal page scroller (again)

    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.

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    HTML Code:
    <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:

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

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

  3. #3
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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/s...ead.php?t=6897
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rhiaro (04-27-2008)

  6. #5
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Chances are I was doing something else wrong

    Thanks for your help, very much appreciated

  7. #6
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question

    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

  8. #7
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Waheeeeyyy did it myself

    Just removed the line

    iecompattest().style.overflowX='hidden'

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
  •