Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    costom scrollbar on scrollable div script

    Hello everyone.

    I'm using this scrollable div javascript. The div has fixed dimension in which lager content can be scrolled.

    Scrollable div script
    Code:
    <html>
      <head>
        <title>Fun Scroll</title>
        <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>
      </body>
    </html>
    You can see it work here: http://www.greyburn.net/scroll.php

    The problem is that the script uses the standard browser scrollbar, INSTEAD of this i want text (links) to scroll the content of this div. Eventually i would like it to look like this: http://www.greyburn.net/tag1.php (This is an iframe, so i can't use this script because i need to use a div this time.)

    I know there are scrollable div script out there that use links (or custom scrollbars) to scroll the content. The reason why i need to use this scrollable div script is that it remembers the scrolling position, and not one of the other script's that i've found do this..

    Now if i could only enhance the script to use text links to scroll the div's content, instead of this standard scrollbar.

    Hope some of you can help me
    xm

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <html>
      <head>
        <title>Fun Scroll</title>
        <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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcScroll(zxcid,zxcud,zxcspd){
     zxcspd=zxcspd||1;
     var zxcobj=document.getElementById(zxcid);
     if (!zxcobj.to) zxcobj.to=null;
     clearTimeout(zxcobj.to);
     zxcobj.scrollTop=zxcobj.scrollTop+zxcud;
     zxcud*=zxcspd;
     zxcobj.to=setTimeout( function(){ zxcScroll(zxcid,zxcud,zxcspd); },100);
    }
    
    function zxcStop(zxcid){
      clearTimeout(document.getElementById(zxcid).to);
    }
    /*]]>*/
    </script>  </head>
      <body>
    <input type="button" name="" value="Scroll Up" onmousedown="zxcScroll('divTest',1,1.2);" onmouseup="zxcStop('divTest');"/>
    <input type="button" name="" value="Scroll Down" onmousedown="zxcScroll('divTest',-1,1.2);" onmouseup="zxcStop('divTest');" />
    
        <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>
      </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/

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow, great work! Thanks! Two questions though.

    1) The div still shows the scrollbar, can it be hidden?
    2) Can the buttons be text with a mouse-over effect, so i don't have to click the link, just hover over it? (like this: http://www.greyburn.net/tag1.php)

    Really appreciate your help dude

  • #4
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow, great work! Thanks! Two questions though.

    1) The div still shows the scrollbar, can it be hidden?
    2) Can the buttons be text with a mouse-over effect, so i don't have to click the link, just hover over it? (like this: http://www.greyburn.net/tag1.php)

    Really appreciate your help dude

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <html>
      <head>
        <title>Fun Scroll</title>
        <style type="text/css">
          #divTest{width:150px;height:200px;overflow:hidden}
        </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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcScroll(zxcid,zxcud,zxcspd){
     zxcspd=zxcspd||1;
     var zxcobj=document.getElementById(zxcid);
     if (!zxcobj.to) zxcobj.to=null;
     clearTimeout(zxcobj.to);
     zxcobj.scrollTop=zxcobj.scrollTop+zxcud;
     zxcud*=zxcspd;
     zxcobj.to=setTimeout( function(){ zxcScroll(zxcid,zxcud,zxcspd); },100);
    }
    
    function zxcStop(zxcid){
      clearTimeout(document.getElementById(zxcid).to);
    }
    /*]]>*/
    </script>  </head>
      <body>
    <input type="button" name="" value="Scroll Up" onmouseover="zxcScroll('divTest',1,1.2);" onmouseout="zxcStop('divTest');"/>
    <input type="button" name="" value="Scroll Down" onmouseover="zxcScroll('divTest',-1,1.2);" onmouseout="zxcStop('divTest');" />
    
        <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>
      </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/

  • Users who have thanked vwphillips for this post:

    imogeen (06-22-2008)

  • #6
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yes! thanks so much

    (i made the buttons text links, so i can use it now)

    xm


  •  

    Posting Permissions

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