how can i make Div scroll horizontal

**wael** · 07-20-2009, 05:56 AM

hi i found this code in post in this forum , i was searching for one code like this but i need to make it scrolling horizontal not vertical

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>

how can i make it or if any one have better code do the same job
please i need it

**vwphillips** · 07-20-2009, 07:51 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>

http://www.vicsjavascripts.org.uk/Co...usScrollII.htm

**wael** · 07-20-2009, 09:31 AM

thanks but

i add the code to my menu and it work but, my menu have a sub menu and it display in div the sub menu items so becous my first DIv with width 30px the others divs not display full display some of it
any suggistin

**vwphillips** · 07-20-2009, 10:18 AM

I will need to see your menu

Thread: how can i make Div scroll horizontal

Thread Tools

Search Thread

how can i make Div scroll horizontal

thanks but

Bookmarks

Bookmarks

Posting Permissions