Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Custom Scrollers...

  1. #1
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Custom Scrollers...

    Hello again my friends ,

    Over time I have seen divs that have a scroller and when you scroll it down the div contens go down and when you drag the scroller up the div contents go down (just see mburt's example (I simply cannot remeber its location))

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    There's this one that creates a div that acts like an iframe:

    http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

    And then another one that uses links to scroll up or down:

    http://www.dynamicdrive.com/dynamici...nualscroll.htm

    But I think the first one is the one you were talking about. By the way, if you want only a vertical scrollbar, just replace the 'overflow:scroll' with 'overflow-x: hidden;overflow-y: scroll;'
    Last edited by Veronica; 04-01-2007 at 05:59 PM.

  3. #3
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    May I have me an example ?

    Thanks

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Properties/Functions:

    scrollTo(index): window

    scrollTop: object
    scrollHeight: object

    Example:
    Code:
    [object].scrollTop = 20;
    Use those attributes to try what you are attempting.
    - Mike

  5. #5
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    By can I have an example I ment that I wanted a full made easy to understand example

    Thanks (though again sorry for the hassle)

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    It's not incredibly difficult. Sometimes you, the user has to find the answer on his/her own.
    Code:
    [object1].onscroll=function() {
    [object1].scrollTop=[object2].scrollTop;
    }
    - Mike

  7. #7
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well again I am confused as I required an full -

    <html>
    <body>
    ......
    </body>
    </html>

    Type example , well its OK anyway, for know I will just look on the internet and hope to find one example unless you wish to do it for me...

  8. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    #obj1,#obj2 {
    width:150px;
    height:200px;
    border:1px solid black;
    overflow:auto;
    float:left;
    margin-right:3px;
    }
    </style>
    <script type="text/javascript">
    function scroll(obja,objb) {
    document.getElementById(objb).scrollTop = obja.scrollTop;
    }
    </script>
    </head>
    <body>
    <div id="obj1" onscroll="scroll(this,'obj2')">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam quis augue. Ut quis ligula.
    Pellentesque nibh dolor, commodo eu, dapibus congue, euismod id, nisi. Pellentesque iaculis placerat tellus.
    Nulla varius est tristique libero. Ut sed dui. Praesent nunc. Nunc sit amet velit at lectus adipiscing tempus.
    Nulla lorem urna, tincidunt eget, fermentum eu, vulputate sed, nunc. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas.</div>
    
    <div id="obj2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam quis augue. Ut quis ligula.
    Pellentesque nibh dolor, commodo eu, dapibus congue, euismod id, nisi. Pellentesque iaculis placerat tellus.
    Nulla varius est tristique libero. Ut sed dui. Praesent nunc. Nunc sit amet velit at lectus adipiscing tempus.
    Nulla lorem urna, tincidunt eget, fermentum eu, vulputate sed, nunc. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas.</div>
    </body>
    </html>
    - Mike

  9. #9
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks mburt I luv ya ,

    But one/two questiion -

    1) What other overflow types are there (i forget... And overflow means that if the text does not fit in the space given, right?
    2) Please explain how the scroll top works in that div...

  10. #10
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    overflow: hidden,visible,scroll,auto

    scrollTop: returns and assigns the value that an object has scrolled from it's height. (scrollHeight - iterator)
    - Mike

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
  •