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 (http://www.cecicasariego.com/news.html)
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 (http://www.hesido.com/web.php?page=customscrollbar), but if you want to capture mouse wheel movements yourself this (http://adomas.org/javascript-mouse-wheel/) 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 codeuse code in below (http://www.dynamicdrive.com/forums/showthread.php?t=34320#post151343) 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 (http://www.cecicasariego.com/copyNL.html)

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>

[Nile]

You wanna change this line:


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

To get it fast.

[chechu]

No, still doesn't change a thing.
Have a look here: http://www.cecicasariego.com/copyNL.html

[Nile]

I've also noticed that the scroller goes up when I'm scrolling down, and down otherwhise.
I don't know if its meant to do that, so I won't fix it.
But here's to get it to go faster:


<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+"')", 200);
}
}
}
</script>

[chechu]

Just added your code, and two issues:
- scrolling with mousewheel still goes very slow
- there is an error message coming up when I use the mousewheel
Look here: http://www.cecicasariego.com/copyNL.html

[Nile]

Sorry. Remove it. :o

[chechu]

Does that mean you give up ;)

[Nile]

Haha, yup. Its master_scripts_turn lol.

[chechu]

Thanks for your tries anyway.
I think there is a mistake in the way I added his script with the original one. I don't know where to place the } and { and ;

[Nile]

What { and }?

[chechu]

To add the masterscript's code into the existing one, I added a } and { in the original code. Maybe that's the problem ?

[Nile]

Why did you add those?

[chechu]

If I leave the code like this, the result is that the javascript function is disabled (as here (http://www.cecicasariego.com/copyNL.html):


<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+"')", 200);
}
}
}
</script>

If I add an } , it stays in javascript, but with previous described issues. So maybe something more needs to be added ?

<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);
} // <- I added here
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+"')", 200);
}
}
}
</script>

[Nile]

Yes, because thats the ending of a function.

[chechu]

So, what should be added/removed ?

[Master_script_maker]

i fixed it and hopefully nothing is messed up. in red is the speed. it is currently set to scroll as fast as the user scrolls his/her mouse, but you can change this to whatever you want (5 or 4 seems good).
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 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="http://www.cecicasariego.com/'+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="http://www.cecicasariego.com/'+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="http://www.cecicasariego.com/'+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="http://www.cecicasariego.com/'+downimage+'" border="0"><\/a><\/td><\/tr>\n');
document.write('<\/table>\n');
}
if(!window.opera){
setInterval("textsizepoll('"+contentid+"')", 700);
}
}
}
function handle(delta) {
if (delta < 0) {
moveup(contentid, -delta);
} else {
movedown(contentid, delta);
}
}

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;

[Master_script_maker]

did it work?

[TheJoshMan]

Here is another scrollbar skinning code if nobody's already mentioned it...

http://www.dhteumeuleu.com/run/scrollbarStyle/

[chechu]

did it work?
sorry for my late reply.
Really really weird it is. The text is shaking, but doesn't move. When I try again, it does scroll well, but in the opposite directions (wheelscroll up: text goes down). Then I try again, and another Richter Scale exposure. Weird, but funny !

In the meantime I have adapted the other scrollscript mentioned in this script, and placed on my site. And I love it. Thanks for your help and comments !!!!!