I need this to be scroll

Discussion in 'JavaScript' started by nishithkant, Mar 15, 2009.

0
  1. #1
    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');" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="btnDown" value="Down" onclick="processKeys('mytable','d');" />
    </body>
     
    nishithkant, Mar 15, 2009 IP