Text Scrolling on a Click Event

This code scrolls the text left and right on the click event of < , >:


<html>
<head>
<script language="javascript">
   function ScrollBy(dir){
        var left = xdiv.scrollLeft;
        if (dir =='left')
           xdiv.scrollLeft = left - 30;
        else
           xdiv.scrollLeft = left + 30; 
   }
</script>
</head>
<body>
<table>
<tr>
<td><a onclick="ScrollBy('left'); return false" title="Click to scroll left side"><</a>
</td>
<td>
<div id="xdiv" style="overflow-x:hidden;width=150px;Height=10px">
<table><tr><td  bgcolor='yellow'>Yellow</td><td bgcolor='red'>
Red</td><td bgcolor='green'>Green</td><td bgcolor='blue'>Blue</td>
<td bgcolor='cyan'>Cyan</td>
</tr>
</table>
</div>
</td>
<td><a onclick="ScrollBy('right'); return false" title="Click to scroll right side">></a></td>
</tr>
</table>
</body>
</html>

Santhi Maadhaven

Submit a Tip

Browse "Web Development" Tips

Browse All Tips

0 Comments (click to add your comment)

Comment and Contribute