Senior Coders
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))
Regular Coders
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 04:59 PM.
Senior Coders
May I have me an example ?
Thanks
Elite Coders
Properties/Functions:
scrollTo(index): window
scrollTop: object
scrollHeight: object
Example:
Use those attributes to try what you are attempting.Code:[object].scrollTop = 20;
- Mike
Senior Coders
By can I have an example I ment that I wanted a full made easy to understand example
Thanks
Elite Coders
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
Senior Coders
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...
Elite Coders
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
Senior Coders
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...
Elite Coders
overflow: hidden,visible,scroll,auto
scrollTop: returns and assigns the value that an object has scrolled from it's height. (scrollHeight - iterator)
- Mike
Posting Permissions
Reply With Quote
Bookmarks