New Comer (less than 5 posts)
Image Scrollbar
I want to make a scrollbar with an image in it. Is that possible?? Hehehe... My cool ideas. They are impossible. But nothing s impossible in science i suppose..... Anyway... someone please help me to make a html code that can show a scrollbar with an image. Pretty Please......
Elite Coders
No, you can't make the scrollbars have images in them, but I've been working on a script that scrolls a divinsion, and can have HTML in it. So it may be possible, I'll get back to you as soon as it's first version is done
- Mike
Regular Coders
However, using an image as scrollbar isn't that difficult- however. it requires some JS coding
Elite Coders
Here is a simple implentation of it:
Code:<html> <head> <style type="text/css"> #content { width:200px; height:100px; border:1px solid black; overflow:hidden } #scroller { position:absolute; border:1px solid black; width:15px; writing-mode:tb-rl; font-weight:bold; font-family:arial } #outerscroller { height:100px; width:25px; top:15px; left:209px; border:1px solid gray; position:absolute; overflow:hidden } </style> <script type="text/javascript"> function scroll() { var offset = event.clientY - scroller.offsetTop document.onmousemove=function() { content.scrollTop=event.clientY-15-offset scroller.style.top=event.clientY-offset } document.onmouseup=function() { document.onmousemove=null } } </script> </head> <body> <div id="content"> Line 1 <br>Line 2 <br>Line 3 <br>Line 4 <br>Line 5 <br>Line 6 <br>Line 7 <br>Line 8 <br>Line 9 <br>Line 10 <br>Line 11 <br>Line 12 <br>Line 13 <br>Line 14 <br>Line 15 </div> <div id="outerscroller"> <div id="scroller" onmousedown="scroll()">Scrollbar-1</div> </div> </body> </html>
- Mike
Senior Coders
It is impossible to gain control over the scrollbar with simple HTML or even javascript, however it can be coloured(only in IE).Originally Posted by Isha
A workaround of this would be using virtual scrollbars(custom scrollbars) one could be found here:
http://www.hesido.com/web.php?page=customscrollbar
Using CSS makes the scrollbars not to appear and you can use that code in your body. This way you can add either images to your (virtual) scrollbar or just plain divs. But there's an exception if the user doesn't have javascript enabled then your fake scrollbars are busted, users will simply see their normal scrollbars. Firefox users using something like NoScript wouldn't see the scrollbars either.
Hope it helped.
mburt: your code only works in IE, seems you only code for IEs. Well anyways you could code W3C standard(I mean instead of using just scroller.offset you could use var scroller = document.getElementById("scroller"); scroller.offset ... your code alone gives a lot of pain to me in firefox because it keeps on giving warnings, and it doesn't work cross browser, maybe you should try to fix it.). Thanks.
Elite Coders
It was only the first version, and the first version I did in FP, which the preview is always in MSIE, so I didn't really have time to check it in FF. I always make (or at least try) to make the script cross-browser compatible.
- Mike
Senior Coders
Oh, but I wish your scripts worked in firefox too, if only your every script worked in all the browsers, in other things you are a great programmer.
Elite Coders
I'm workin on it
- Mike
Junior Coders
This is sort of a lot later, but, have you or anyone else tackled this? I also wished for a long time to have an image on the scrollbar, actually, I want it to say really big "scroll".
I'm workin on it
And also, is it really true that many people have Javacript turned off or have the Firefox Noscript on?
New Comer (less than 5 posts)
re image scrollbar
go to
http://carotut.site.voila.fr/tutorie...ages/index.htm
you will have to translate the page to english from french
if anyone as luck with this maybe I can get information on it images are also supplied for download
thanks Lydia
new member
Posting Permissions
Reply With Quote
Bookmarks