scrolling effect needed

nishithkant · March 15th, 2009, 05:23 AM

please check this code .it works on up and down button but doesn,t scroll alongwith going down the records .please help me I want record go down and also be scroll.
<script language="JavaScript1.1" type="text/javascript">
var currentRow = 1;
var VISIBLE_ROWS = 10;

window.onload = function()
{
var table = document.getElementById('mytable' );
var trs = table.getElementsByTagName('tr');
highlightRow( trs[currentRow] );
}

var highlightedRow;

function addOnclickToDatatableRows()
{
var trs = document.getElementById('mytable').getElementsByTa gName('tr');
for (var i = 0; i < trs.length; i++)
{
trs[i].onclick = new Function("highlightRow(this)");
}
}

function highlightRow(tr)
{
tr.bgColor = (tr.bgColor != '#0000ff') ?'#0000ff' : '#ffffff';
highlightedRow = tr;
}

function dehighlightRow(tr)
{
tr.bgColor = (tr.bgColor != '#ffffff') ?'#ffffff' : '#0000ff';
table = null;
trs = null;
}

function processKeys(mytable,dir)
{

var table = document.getElementById('mytable' );
var numRows = table.rows.length;

switch (dir)
{

case 'u':
if (parseInt(currentRow) == parseInt(1))
{
// reached the top of the table; do nothing.
return true;
}
else
{
// move one row up.
scrollRow( "up" );
setCurrentRow( currentRow );
//highlightRow(currentRow);

return false;
}
break;

// Key down.
case 'd':
if (currentRow == (numRows - 1))
{
// reached the end of the table; do nothing
return true;
} else
{
scrollRow( "down" );
setCurrentRow( currentRow );
//highlightRow(currentRow);
if (currentRow > VISIBLE_ROWS)
{
return true;
} else
{
return false;
}
}
break;
}

function scrollRow( dir )
{
var trs = document.getElementById('mytable').getElementsByTa gName('tr');
if (dir == "up")
{
dehighlightRow ( trs[ currentRow ] );
currentRow--;
highlightRow( trs[ currentRow ] );
}
else if (dir == "down")
{
dehighlightRow( trs[ currentRow ] );
currentRow++;
highlightRow( trs[ currentRow ] );
}
}
function setCurrentRow ( currentRow)
{

if (dir == "up")
{

highlightRow( trs[currentRow] );
}
else if (dir == "down")
{

highlightRow( trs[currentRow] );
}

}

}

</script>

<style type="text/css">
.scrollbar
{
width:100px;
height:120px;
overflow:hidden;
}
</style>
</head>
<body>

<div class="scrollbar">
<table id="mytable">
<tr>
<td>
record1</td>
</tr>
<tr>
<td>
record2</td>
</tr>
<tr>
<td>
record3</td>
</tr>
<tr>
<td>
record4</td>
</tr>
<tr>
<td>
record5</td>
</tr>
<tr>
<td>
record6</td>
</tr>
<tr>
<td>
mridul7</td>
</tr>
<tr>
<td>
mridul8</td>
</tr>
<tr>
<td>
record9</td>
</tr>
<tr>
<td>
mridul10</td>
</tr>
<tr>
<td>
record11</td>
</tr>
<tr>
<td>
record12</td>
</tr>
<tr>
<td>
record13</td>
</tr>
<tr>
<td>
record14</td>
</tr>
<tr>
<td>
mridul15</td>
</tr>
<tr>
<td>
mridul16</td>
</tr>
<tr>
<td>
record17</td>
</tr>
<tr>
<td>
record18</td>
</tr>
</table>
</div>

<input type="button" id="btnUp" value="up" onclick="processKeys('mytable','u');" />
    
<input type="button" id="btnDown" value="Down" onclick="processKeys('mytable','d');" />
</body>