Jquery, scroll a div depending on keypress

Question

I have a div of 300px fixed height. Inside the div a have a table that has inputs with a larger height which makes the div to scroll(this is my option so i want it to be overflow:auto)..i dont't have more than 300px of space With the keypress event i want somebody to move up and down on the table tds but when he goes to the last visible td, then the div is not scrolling so the users continues to the next td but the td is not visible anymore because of the scroll I want the div to scroll up when he is in the last visible td and scroll in the td.height()

Any suggestions please?

So far i add a class when somebody changes td with up and down keypress

$(document).ready(function() {
    $('body').keypress(function(event){
    var a = $('#table .borderRed');

    if((event.keyCode)=="40"){
        a.parent().next().children().addClass('borderRed');
        a.removeClass('borderRed');
    }

    else if ((event.keyCode)=="38"){
        a.parent().prev().children().addClass('borderRed');
        a.removeClass('borderRed');
    }
    });
});

The table is inside a container with the height:300px; and overflow:auto; and the first td of the table has a class 1 and that is the class that i am adding..

    .borderRed{ border: 1px solid red;}  
    .container {width: auto; height:300px; overflow:auto;}

HTML

     <div class="container">
     <table id='table' width='100%'>
 <tr>
    <td class='borderRed'>1</td>
</tr>
<tr>
   <td>2</td>
</tr>
<tr>
   <td>3</td>
</tr>
<tr>
   <td>4</td>
</tr>
    <tr>
   <td>5</td>
</tr>
<tr>
   <td>6</td>
</tr>
<tr>
   <td>7</td>
</tr>
<tr>
    </table>
    </div>

Sorry for the indentation. I am new to stackoverflow, and Jquery.. My tds are up tp 16 in order to make the table scroll and test the functionality or just reduce the height of 300px

I suggest that you use punctuation marks in your questions. You know, like . and , and ; — Th0rndike, Apr 27 '12 at 08:51
I would suggest you fill a [**jsFiddle**](http://jsfiddle.net) with this and include your CSS. Makes it easier to find the problem since you already have this much code. If you've never fiddled, just check it out, it's pretty self-explanitory — SpYk3HH, Apr 27 '12 at 13:33
i will try it with jsFiddle but i would like some tips about how to locate the last visible td in order to make the div scroll down on keyCode=="40" and scroll certain height which is the height of the td — tomek_gr, Apr 27 '12 at 14:23
for live demo see this link: http://jsfiddle.net/nanoquantumtech/ED7f3/ — Thulasiram, Apr 28 '12 at 08:04

score 0 · Answer 1 · answered Apr 28 '12 at 07:54

<!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">
<head>
    <title></title>
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('body').keypress(function (e) {
                var obj = $('#table').find('.borderRed');

                var code = (e.keyCode ? e.keyCode : e.which);

                if (code === 40) {
                    if ($('#table tr:last td:last').hasClass('borderRed') === true) {
                        $('#table tr:first td:first').addClass('borderRed');
                    }
                    else {
                        obj.parent().next().children().addClass('borderRed');
                    }
                    obj.removeClass('borderRed');
                }
                else if (code === 38) {
                    if ($('#table tr:first td:first').hasClass('borderRed') === true) {
                        $('#table tr:last td:last').addClass('borderRed');
                    }
                    else {
                        obj.parent().prev().children().addClass('borderRed');
                    }
                    obj.removeClass('borderRed');
                }
            });
        });
    </script>
    <style type="text/css">
        .borderRed
        {
            border: 1px solid red;
        }
        .container
        {
            width: auto;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <table id='table' width='100%'>
            <tr>
                <td class='borderRed'>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                    7
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

for live demo see this link: http://jsfiddle.net/nanoquantumtech/ED7f3/ in firefox — Thulasiram, Apr 28 '12 at 08:00

Jquery, scroll a div depending on keypress

1 Answers1