Results 1 to 8 of 8

Thread: scrollbar

  1. #1
    Join Date
    Aug 2007
    Posts
    45
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Default scrollbar

    http://stacieandtodd.com/indexNew.html

    I wonder if anyone could advise on how to create a scrollbar like the one as shown in the centre page of the above site. Thank you for your input.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

  3. #3
    Join Date
    Aug 2007
    Posts
    45
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your kind input, Nile.
    May I know how to have something different for the srollbar, like the one shown here ( http://stacieandtodd.com/indexNew.html ) which has a "W" shape.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by amyy View Post
    http://stacieandtodd.com/indexNew.html

    I wonder if anyone could advise on how to create a scrollbar like the one as shown in the centre page of the above site. Thank you for your input.
    That page uses:

    http://kelvinluck.com/assets/jquery/...crollPane.html
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Wow. Great posts. I've been wondering about this forever.

  6. #6
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by Nile View Post
    Do you know if you can change this to scroll horizontally?
    I'm not a supercoder so it may be obvious...

  7. #7
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Nevermind. I messed with it a bit and got a horizontal bar that moves horizontally. What's really cool, is that finally I was able to replace an image (instead of background color ascribe an image) for the scrollbar!

    Are there any big problems with this that a well experienced coder could forwarn of?

  8. #8
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    OK. Little soliloquy going on here. I actually can't get it to drag horizontally.
    Can anyone help. I made some changes to it, added a big table, and am trying to get the scroll to go horizontally along the bottom part of the table.

    <!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>Drag and react example</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="example3_files/devstyle.css">
    <script type="text/javascript" src="example3_files/dom-drag.js"></script>

    <style type="text/css">
    #thumb {
    position:relative;
    height:24px;
    width:62px;
    background-image: url(scroll.gif);
    border:0px outset #eee;
    }
    </style></head>


    <body>

    <div style="border: 0px solid black; overflow: hidden; width: 200x; height: 200px; float: left; margin-right: 10px; background-color: white; position: relative;">
    <div id="scrollcontent" style="position: absolute; left: 0pt; top: 0px;">
    <table width="1000" height="765" bgcolor="#FF3300"><tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </td></tr></table>
    </div>
    </div>
    <div style="width: 300px; float: bottom;">
    <div id="thumb" style="left: 0px; top: 765px;"></div>
    </div>

    <script language="javascript">
    var aThumb = document.getElementById("thumb");
    var scrolldiv=document.getElementById("scrollcontent");
    Drag.init(aThumb, null, 0, 1000, 765, 0);
    aThumb.onDrag = function(x, y) {
    scrolldiv.style.top=y * (-1) +"px";
    }
    </script>

    </body></html>


    Thanks.

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
  •