how can i make Div scroll horizontal [Archive]

View Full Version : 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

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

<!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/ContinuousScrollII/ContinuousScrollII.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