Scroll DIV position to focussed TextBox using jQuery

Last Reply 9 months ago By dharmendr

Posted 9 months ago

hello,

i have this on div and 7 textboxes, what i want to achieve is

1. div with 200height max

2. so it shows 3 textbox at a time not more than 3 textbox

3. so on start it shows textbox 1 , textbox 2 and textbox 3

4. when user click on textbox3 so it should push upside textbox1 and textbox 2 and user can see textbox3 textbox 4 and textbox 5

5. now when user click on textbox 5 so textbox 3 and textbox 4 move upside and user can see textbox 5 textbox 6 and text box 7

6. vice versa if user again click on textbox 5 so it should downside textbox 6 and textbox 7 and user can textbo 3 4 and 5

so all the time only 3 textbox should be visible

here is my html

<div style="max-height: 200px; overflow: hidden;">
    <br /><br /><br />
    TextBox 1  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 2  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 3  <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 4  <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 5  <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 6  <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 7  <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox><br /><br /><br />
    <br /><br /><br /><br />
</div>
Posted 9 months ago Modified on 9 months ago

Hi nauna,

nauna says:
6 vice versa if user again click on textbox 5 so it should downside textbox 6 and textbox 7 and user can textbo 3 4 and 5

For the above condition its not possible.

But you can do in this way.

Check this example. Now please take its reference and correct your code.

HTML

<div id="div1" style="max-height: 170px; overflow: hidden;">
    TextBox 1
    <input name="TextBox1" type="text" id="TextBox1" class="test" /><br />
    <br />
    <br />
    TextBox 2
    <input name="TextBox2" type="text" id="TextBox2" class="test" /><br />
    <br />
    <br />
    TextBox 3
    <input name="TextBox3" type="text" id="TextBox3" class="test" /><br />
    <br />
    <br />
    TextBox 4
    <input name="TextBox4" type="text" id="TextBox4" class="test" /><br />
    <br />
    <br />
    TextBox 5
    <input name="TextBox5" type="text" id="TextBox5" class="test" /><br />
    <br />
    <br />
    TextBox 6
    <input name="TextBox6" type="text" id="TextBox6" class="test" /><br />
    <br />
    <br />
    TextBox 7
    <input name="TextBox7" type="text" id="TextBox7" class="test" /><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.test').on('focus', function () {
            var elem = $(this);
            var parent = $('#div1');
            var scrollOffset = parent.scrollTop() + elem.offset().top;
            parent.animate({ scrollTop: scrollOffset - 10 }, 1500);
        });
    });
</script>

Demo