Log in

View Full Version : Image Scrollbar


Isha
08-18-2006, 03:20 PM
:p 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......:)
mburt
08-18-2006, 03:48 PM
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 :)
ItsMeOnly
08-18-2006, 04:06 PM
However, using an image as scrollbar isn't that difficult- however. it requires some JS coding
mburt
08-18-2006, 04:07 PM
Here is a simple implentation of it:


<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>
shachi
08-18-2006, 07:04 PM
:p 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......:)
It is impossible to gain control over the scrollbar with simple HTML or even javascript, however it can be coloured(only in IE).

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.
mburt
08-19-2006, 04:45 PM
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.
shachi
08-19-2006, 05:07 PM
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.:)
mburt
08-20-2006, 08:19 PM
I'm workin on it :)
questions
01-29-2008, 04:22 AM
I'm workin on it :)

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".

And also, is it really true that many people have Javacript turned off or have the Firefox Noscript on?
lydia
08-31-2009, 02:55 PM
go to
http://carotut.site.voila.fr/tutoriel/scrollbar_en_images/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