How to make sure an HTML element is in the screen when shown?

Question

Here is my HTML structure:

<body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <div class='error'>error message</div>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

Here is my CSS code:

.error{
    display: none;
}

Here is my Jquery code:

// detect pressing enter on keyboard
$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
    }
});

What the above code does: when user press <enter>, <div> will be shown.

What I want: when <div> shown, if it was in the screen then nothing, but if it was not in the screen, page scrolls and stops where <div> is in the screen, how can I do that?

It should be noted that I don't want this: position: fixed;

Do you want the error div to scroll to the position of the window? Or the window scroll to the position of the div? — Robin Gordijn, Sep 24 '15 at 09:29
@RobinGordijn Second. the window scroll to the position of the div. — Shafizadeh, Sep 24 '15 at 09:30
Have you tried ScrollTo() from jquery? Or take a look at this question, it maybe covers your problem: http://stackoverflow.com/questions/5685589/scroll-to-element-only-if-not-in-view-jquery — Robin Gordijn, Sep 24 '15 at 09:32

Nilesh Mahajan · Accepted Answer · 2015-09-24T09:43:34.480

3

created fiddle

Modified your JS a bit, plz have a look

$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
         $('.error')[0].scrollIntoView(true);
    }

});

edited Sep 24 '15 at 09:43

answered Sep 24 '15 at 09:29

Nilesh Mahajan

3,506
21
34

Can I set `20px` space between top and div ? actually I have a fixed header in my website, and in this case, div goes under the header. – Shafizadeh Sep 24 '15 at 09:37
@Sajad Yes you can, check my updated fiddle. I added padding to the error div. now it will leave 20px top padding – Nilesh Mahajan Sep 24 '15 at 09:44

score 2 · Answer 2 · answered Sep 24 '15 at 09:27

2

Try doing it like this.

<div id='focus' class='error'>error message</div>

$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
        document.getElementById('focus').scrollIntoview();
    }
});

answered Sep 24 '15 at 09:27

Vibhesh Kaul

2,593
1
21
38

1

Thanks, I needed to `scrollIntoview()`. +1 upvote for you. – Shafizadeh Sep 24 '15 at 09:32

How to make sure an HTML element is in the screen when shown?

2 Answers2