SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change scrollbar into scroll-image, scrollable div

    Hello all,

    I need some help with this script. It's a nice scrollable div script. very short and the important part of it is that it remembers the scroll position on re-load with a cookie.

    The only bummer is that it works with a standard browser scrollbar, and i want custom scroll images or text.

    Can this be done?

    The code
    Code:
     <style type="text/css">
          #divTest{width:150px;height:200px;overflow:auto}
        </style>
        <script type="text/javascript">
          window.onload = function(){
            var strCook = document.cookie;
            if(strCook.indexOf("!~")!=0){
              var intS = strCook.indexOf("!~");
              var intE = strCook.indexOf("~!");
              var strPos = strCook.substring(intS+2,intE);
              document.getElementById("divTest").scrollTop = strPos;
    		  document.getElementById("divTest").scrollTop = strPos;
            }
          }
          function SetDivPosition(){
            var intY = document.getElementById("divTest").scrollTop;
            document.title = intY;
            document.cookie = "yPos=!~" + intY + "~!";
          }
        </script>
      </head>
      <body>
        <div id="divTest" onscroll="SetDivPosition()">
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          ERIC<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
          1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
        </div>
    Hoping for help
    xm.

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want to use your own image as the scroll bar rather than the browser's default? Can't be done without Flash.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was thinking more in this direction: http://www.dynamicdrive.com/dynamici...nualscroll.htm

    This is no flash. I don't know how to incorporate this script with the one i use.
    This can be done right?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do it with your own image but it won't technically be a scroll bar... Apple use it here - There's a tut for it here..
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh no i do not want to make a "scrollbar" with my own images.
    sorry of i'm unclear, i'm not really used to this kind of scripting.

    I want to scroll the div with an image or rather with text.
    Like i did here http://www.greyburn.net/tag1.php

    Only tag1.php uses an iframe, and i now need to use an scrollable div. So somehow i would like to use the same scroll technique and incorporate that with the scrollable div script i'm using.

    And this is the scrollable div in action http://www.greyburn.net/scroll.php

    can you help me?


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
  •