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

**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

Code:

<!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

Code:

<!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

Code:

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

Originally Posted by mobius2000

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

Thread: Looking for script to make scrolling DIV content but using image buttons.

Thread Tools

Search Thread

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

Speed

Bookmarks

Bookmarks

Posting Permissions