CODEWITHSUNDEEP
jquery
VAnton
VAnton

Reputation: 167

Have whole form retain focus when hidden div appears

I'm trying to get a form to take the focus, or scroll to focus, when a hidden div is shown on a select option event. I'm new to jQuery but have tried things like $('#id').focus(); and also scrollIntoView() on this script --

$(function() {
    $('#continue').change(function(){
        if ($(this).val()) {
            $('#hidden').slideDown(2000)
            $('#hidden').show()  
            $('#continue').focus();         
        } else {
            $('#hidden').hide();
        }
    });
});

-- but I'm not sure if those are the functions I'm looking for.

If you take a look at http://jsfiddle.net/snqL2pf9/10/, you'll see that if you select your favorite fruit there, I slide down a hidden div. However, the hidden div just scrolls down past the viewing window. I'd like the entire form to have full focus in the viewing window when the hidden div displays. So, essentially, as the rest of the form slides down, the viewing window scrolls down with it to bring everything into view instead of the hidden stuff just vanishing below the current viewpoint. Is this possible?

Upvotes: 0

Views: 30

Answers (1)

Joachim Haglund
Joachim Haglund

Reputation: 820

you can set a callback function in the slideDown and then scroll the page when its done, like this:

$('#hidden').slideDown(2000, "linear", function(){
            var scrollDistance = $("#continue")[0].offsetTop;
            window.scrollTo(0,scrollDistance);
        });

http://jsfiddle.net/snqL2pf9/17/

edit: if you want the window.scroll to animate aswell, you can use this instead of window.scrollTo

window.scroll({
  top: scrollDistance, 
  left: 0, 
  behavior: 'smooth' 
});

Upvotes: 1

Related Questions