different scrollbars

[chechu]

Hey all,
Everyone knows the standard scrollbar, that you can adjust with colors. My question is what different scrollbars are out there ? F.ex. the one I use now, like here
You see often that in flash sites designers can create their own scrollbars in the site (not the one standard in the window). What other scrollbars have you seen around, with possibility to use the mousewheel (because this is what I miss in the above link: the possibility to use the mousewheel) ?

[Master_script_maker]

here's one, but if you want to capture mouse wheel movements yourself this will help a lot.

[chechu]

Thanks a lot, very nice !
Do you know if the scroller I have now, could be made mouse friendly ?

[Master_script_maker]

sure just use this code

Edit: use code in below post

:

function handle(delta) {
	if (delta < 0)
		mouseup('content1' ,2);
	else
		mousedown('content1' ,2);;
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

[Nile]

I made this one, you could use this one too:
http://niler.net/examples/div_scroller/

[chechu]

<script type="text/javascript">

var iens6=document.all||document.getElementById, moveupvar, movedownvar, speed, contentid, scrollerwidth, scrollerheight, scrollerborder, upimage, downimage, sidecontrols=0;

function movedown(id, speed){

var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;

var contentheight=crossobj.offsetHeight;

if (parseInt(crossobj.style.top)-speed>=(contentheight*(-1)+crossobj.parentNode.offsetHeight-10))

crossobj.style.top=parseInt(crossobj.style.top)-speed+'px';

movedownvar=setTimeout("movedown('"+id+"', "+speed+")",20);

}

function handle(delta) {
	if (delta < 0)
		mouseup('content1' ,2);
	else
		mousedown('content1' ,2);;
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function moveup(id, speed){

var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;

if (parseInt(crossobj.style.top)+speed<=0)

crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';

moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);

}

function textsizepoll(id){

var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;

var contentheight=crossobj.offsetHeight;

if (parseInt(crossobj.style.top)<(contentheight*(-1)+crossobj.parentNode.offsetHeight-9))

crossobj.style.top=contentheight*(-1)+crossobj.parentNode.offsetHeight-10+'px';

else if (parseInt(crossobj.style.top)>1)

crossobj.style.top=0;

}

function topwrite(){

if (iens6){

if(sidecontrols)

document.write('<table class="'+contentid+'" style="border-collapse:collapse;border:'+scrollerborder.join(' ')+';" ><tr><td><div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden;">\n');

else

document.write('<div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;border:'+scrollerborder.join(' ')+';overflow:hidden;">\n');

document.write('<div id="'+contentid+'" style="position:absolute;width:'+[scrollerwidth-5]+'px;left:0;top:0;">\n');

}

}

function bottomwrite(){

if (iens6){

document.write('<\/div><\/div>\n');

if(sidecontrols){

document.write('<\/td><td style="border-left:'+scrollerborder.join(' ')+';"><table style="height:'+scrollerheight+'px;border-collapse:collapse;"><tr><td style="text-align:left;height:48%;vertical-align:top;">\n');

document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex;" src="'+upimage+'" border="0"><\/a><\/td><\/tr><tr><td style="text-align:left;height:48%;vertical-align:bottom;"><a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex;padding-bottom:.75ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');

document.write('<\/table><\/td><\/tr><\/table>\n');

}

else {

document.write('<table class="'+contentid+'" style="width:'+scrollerwidth+'px;"><td style="text-align:right;height:1em;">\n');

document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex .5ex 1ex 1ex;" src="'+upimage+'" border="0"><\/a>  <a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex 1ex 1ex .5ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');

document.write('<\/table>\n');

}

if(!window.opera){

setInterval("textsizepoll('"+contentid+"')", 700);

}

}

}

</script>

I added your code in the original code, but it doesn't work. Am I missing something ?

[Master_script_maker]

sorry, other one was faulty and had typos. try this one:

function handle(delta) {
	var p;
	if (delta < 0) {
		moveup(contentid, -delta);
		p=setTimeout(clearTimeout(moveupvar), 2000);
	} else {
		movedown(contentid, delta);
		p=setTimeout(clearTimeout(movedownvar), 2000);
	}
	p='';
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

[chechu]

It works, but in a very weird way ! The scrolling goes amazingly slow, but above all, you need the scroll down to get the content moving up. Have a look at this page

This is the code I have. I guess it is the way that I implemented your code in the existing one that causes the trouble, no ?

<script type="text/javascript">

var iens6=document.all||document.getElementById, moveupvar, movedownvar, speed, contentid, scrollerwidth, scrollerheight, scrollerborder, upimage, downimage, sidecontrols=0;

function movedown(id, speed){

var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;

var contentheight=crossobj.offsetHeight;

if (parseInt(crossobj.style.top)-speed>=(contentheight*(-1)+crossobj.parentNode.offsetHeight-10))

crossobj.style.top=parseInt(crossobj.style.top)-speed+'px';

movedownvar=setTimeout("movedown('"+id+"', "+speed+")",20);

}

function handle(delta) {
	var p;
	if (delta < 0) {
		moveup(contentid, -delta);
		p=setTimeout(clearTimeout(moveupvar), 2000);
	} else {
		movedown(contentid, delta);
		p=setTimeout(clearTimeout(movedownvar), 2000);
	}
	p='';
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function moveup(id, speed){

var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;

if (parseInt(crossobj.style.top)+speed<=0)

crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';

moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);

}

function textsizepoll(id){

var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;

var contentheight=crossobj.offsetHeight;

if (parseInt(crossobj.style.top)<(contentheight*(-1)+crossobj.parentNode.offsetHeight-9))

crossobj.style.top=contentheight*(-1)+crossobj.parentNode.offsetHeight-10+'px';

else if (parseInt(crossobj.style.top)>1)

crossobj.style.top=0;

}

function topwrite(){

if (iens6){

if(sidecontrols)

document.write('<table class="'+contentid+'" style="border-collapse:collapse;border:'+scrollerborder.join(' ')+';" ><tr><td><div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden;">\n');

else

document.write('<div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;border:'+scrollerborder.join(' ')+';overflow:hidden;">\n');

document.write('<div id="'+contentid+'" style="position:absolute;width:'+[scrollerwidth-5]+'px;left:0;top:0;">\n');

}

}

function bottomwrite(){

if (iens6){

document.write('<\/div><\/div>\n');

if(sidecontrols){

document.write('<\/td><td style="border-left:'+scrollerborder.join(' ')+';"><table style="height:'+scrollerheight+'px;border-collapse:collapse;"><tr><td style="text-align:left;height:48%;vertical-align:top;">\n');

document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex;" src="'+upimage+'" border="0"><\/a><\/td><\/tr><tr><td style="text-align:left;height:48%;vertical-align:bottom;"><a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex;padding-bottom:.75ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');

document.write('<\/table><\/td><\/tr><\/table>\n');

}

else {

document.write('<table class="'+contentid+'" style="width:'+scrollerwidth+'px;"><td style="text-align:right;height:1em;">\n');

document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex .5ex 1ex 1ex;" src="'+upimage+'" border="0"><\/a>  <a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex 1ex 1ex .5ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');

document.write('<\/table>\n');

}

if(!window.opera){

setInterval("textsizepoll('"+contentid+"')", 700);

}

}

}

</script>

[Master_script_maker]

i set it to move as fast as you scroll, but you can change that (in red), also i switched the functions by accident.

<script type="text/javascript">
function handle(delta) {
	var p;
	if (delta < 0) {
		movedown(contentid, -delta);
		p=setTimeout(clearTimeout(movedownvar), 2000);
	} else {
		moveup(contentid, delta);
		p=setTimeout(clearTimeout(moveupvar), 2000);
	}
	p='';
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

[chechu]

Still doesn't work. This is what I have, after adapting your code (red). But do I place the right marks ({;}) to include your code ?
Two remarks:
- the mousewheel scrolling and scrolling with the images go amazingly slow (I changed 2000 into 10000, no result)
- when I use the wheel, there comes an error message in the bottom toolbar
Help !

<script type="text/javascript">
var iens6=document.all||document.getElementById, moveupvar, movedownvar, speed, contentid, scrollerwidth, scrollerheight, scrollerborder, upimage, downimage, sidecontrols=0;
function movedown(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
var contentheight=crossobj.offsetHeight;
if (parseInt(crossobj.style.top)-speed>=(contentheight*(-1)+crossobj.parentNode.offsetHeight-10))
crossobj.style.top=parseInt(crossobj.style.top)-speed+'px';
movedownvar=setTimeout("movedown('"+id+"', "+speed+")",20);
}
function handle(delta) {
	var p;
	if (delta < 0) {
		movedown(contentid, -delta);
		p=setTimeout(clearTimeout(movedownvar), 2000);
	} else {
		moveup(contentid, delta);
		p=setTimeout(clearTimeout(moveupvar), 2000);
	}
	p='';
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function moveup(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
if (parseInt(crossobj.style.top)+speed<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';
moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);
}
function textsizepoll(id){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
var contentheight=crossobj.offsetHeight;
if (parseInt(crossobj.style.top)<(contentheight*(-1)+crossobj.parentNode.offsetHeight-9))
crossobj.style.top=contentheight*(-1)+crossobj.parentNode.offsetHeight-10+'px';
else if (parseInt(crossobj.style.top)>1)
crossobj.style.top=0;
}
function topwrite(){
if (iens6){
if(sidecontrols)
document.write('<table class="'+contentid+'" style="border-collapse:collapse;border:'+scrollerborder.join(' ')+';" ><tr><td><div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden;">\n');
else
document.write('<div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;border:'+scrollerborder.join(' ')+';overflow:hidden;">\n');
document.write('<div id="'+contentid+'" style="position:absolute;width:'+[scrollerwidth-5]+'px;left:0;top:0;">\n');
}
}
function bottomwrite(){
if (iens6){
document.write('<\/div><\/div>\n');
if(sidecontrols){
document.write('<\/td><td style="border-left:'+scrollerborder.join(' ')+';"><table style="height:'+scrollerheight+'px;border-collapse:collapse;"><tr><td style="text-align:left;height:48%;vertical-align:top;">\n');
document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex;" src="'+upimage+'" border="0"><\/a><\/td><\/tr><tr><td style="text-align:left;height:48%;vertical-align:bottom;"><a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex;padding-bottom:.75ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');
document.write('<\/table><\/td><\/tr><\/table>\n');
}
else {
document.write('<table class="'+contentid+'" style="width:'+scrollerwidth+'px;"><td style="text-align:right;height:1em;">\n');
document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex .5ex 1ex 1ex;" src="'+upimage+'" border="0"><\/a>  <a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex 1ex 1ex .5ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');
document.write('<\/table>\n');
}
if(!window.opera){
setInterval("textsizepoll('"+contentid+"')", 700);
}
}
}
</script>

I forgot to mention that there is also this part of the code, where the content is:

<script type="text/javascript">
speed=2;
contentid="content1";
scrollerwidth=335;
scrollerheight=182;
scrollerborder=['0px', '', '']
sidecontrols=0
upimage="images/up.gif"
downimage="images/down.gif"
topwrite();
</script>

<div style="width:325px;text-align:justify;font-family:tahoma, arial;font-size: 11px;color:#565656;padding-left:0px;margin-top:-5px;padding-top:5px;">
CONTENT
</div>

<script type="text/javascript">
bottomwrite();
</script>