|
|
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').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++)
{
trs.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').getElementsByTagName('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>
|
|
|
|
Can I replace the scrollbar arrow? means can I use button outside from div to scroll content of that div on click of these button inspite of scrollbar arrow ?
or scrollbar slider can be there but the scrolling effect -Iwant the content should scroll with button click.
In my last post (in which I wrote a code) content means rows are changing on button click but div is not scrolling
.
|
|
|
|
|
|
|
// |
Nishithkant
