Looking for script to make scrolling DIV content but using image buttons. [Archive]

mobius2000

07-04-2009, 05:52 AM

Hi there everyone.

I have been searching online most of the morning for a script that allows me to use a scrolling DIV but the up/down buttons are images not the standard OS scrolling.

Anybody have any idea where I could find some support on this?

Please ask if that made no sense.

vwphillips

07-04-2009, 11:04 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;overflow:hidden;width:100px;height:100px;border:solid black 1px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Scroll(id,ud,spd){
var obj=document.getElementById(id);
clearTimeout(obj.to);
if (ud){
obj.scrollTop=obj.scrollTop+ud;
obj.to=setTimeout(function(){ Scroll(id,ud,spd); },spd||10)
}
}
/*]]>*/
</script>

</head>

<body>

</body>
<div id="tst" >
Line 0<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4<br />
Line 5<br />
Line 6<br />
Line 7<br />
Line 9<br />
Line 10<br />
Line 11<br />
Line 12<br />
</div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="20" height="20" onmousedown="Scroll('tst',-1,100);" onmouseup="Scroll('tst');" onmouseout="Scroll('tst');"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="20" height="20" onmousedown="Scroll('tst',1);" onmouseup="Scroll('tst');" onmouseout="Scroll('tst');"/>

</html>

wael

07-20-2009, 05:53 AM

thanks man but this code is vertical how can i make it horizontal

vwphillips

07-20-2009, 07:46 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;overflow:hidden;width:100px;height:100px;border:solid black 1px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Scroll(id,ud,spd){
var obj=document.getElementById(id);
clearTimeout(obj.to);
if (ud){
obj.scrollTop=obj.scrollTop+ud;
obj.to=setTimeout(function(){ Scroll(id,ud,spd); },spd||10)
}
}
/*]]>*/
</script>

</head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;overflow:hidden;width:100px;height:100px;border:solid black 1px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Scroll(id,ud,spd){
var obj=document.getElementById(id);
clearTimeout(obj.to);
if (ud){
obj.scrollLeft=obj.scrollLeft+ud;
obj.to=setTimeout(function(){ Scroll(id,ud,spd); },spd||10)
}
}
/*]]>*/
</script>

</head>

<body>

<div id="tst" >
<div style="width:550px;" >
Line 0 Line 1 line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line 9 Line 10 Line 11 Line 12<br />
</div>
</div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="20" height="20" onmousedown="Scroll('tst',-1,10);" onmouseup="Scroll('tst');" onmouseout="Scroll('tst');"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="20" height="20" onmousedown="Scroll('tst',1);" onmouseup="Scroll('tst');" onmouseout="Scroll('tst');"/>

</body>

</html>

PYJ

07-29-2009, 09:19 PM

Hi Vic,

Thanks for this great script, I was just wondering is is possible to change the speed of scrolling and if so, which part of the code should I edit to change this.

Many thanks!

Peter

vwphillips

07-30-2009, 07:49 AM

onmousedown="Scroll('tst',-1,20);"

course adjustment = change parameter 1 (scroll increment)
fine adjustment = change parameter 2 (scroll speed)

clueful

08-01-2009, 11:16 PM

I have been searching online most of the morning for a script that allows me to use a scrolling DIV but the up/down buttons are images not the standard OS scrolling.

This script seems to have an interesting approach - http://scripterlative.com?slidescroll