CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Seong Lee
Seong Lee

Reputation: 10550

jQuery - auto input focus when scroll hit certain element

I am using jQuery plugin called Waypoints to work with scroll action.

What I want to achieve is setting focus on the first input element of a section that is in the viewport and move the focus to the input of next respective sections when scrolled down. And, when scroll back to the first section up above, it should set the focus back to the input of the first section.

The following is what I have on my actual working setup that is using the aforementioned plugin. Unfortunately, I can't really get the plugin up and running in my JS Fiddle.

This code block works in terms of setting focus on page load and changing focus to the targeted input when scrolled down but scrolling back to the top section does not set the focus back.

(function($) {

var firstInput = $('section').find('input[type=text]').filter(':visible:first');

if (firstInput != null) {
    firstInput.focus();
}

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
});

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
}, {
    offset: function () {
        return -$(this).height();
    }
});

});

Here is my JS Fiddle that doesn't have the plugin part.

As long as somebody can explain how they should be done in normal jQuery if not familiar with this plugin.

Upvotes: 2

Views: 2114

Answers (1)

Mark S
Mark S

Reputation: 3799

jQuery Waypoints is very straightforward to use. I haven't tried with your code but I got it done with this:

$('input:first').focus();

$('section').waypoint(function() {
    $(this).find('input:first').focus();
});

Please see this fiddle.

However, using mousewheel on scrolling down, the scroll sometimes jumps back at the mid part. It might be how the browser reacts on input focus. I haven't gone through the whole documentation but there is no example for input focus.

If you're only looking to do just this simple task I suggest you drop the plugin. I can show you how to get this done with jQuery.

You can handle the scrolling with jQuery's scroll() function. You need to get the scrollTop() on scrolling event then compare it with the <input>'s top offset().

$(window).scroll(function(){
    var st = $(this).scrollTop();
    $('input[type=text]').each(function(){
        var offset = $(this).offset();

        if(st >= offset.top -20 && st < offset.top + $(this).height()){
            $(this).focus();  
        } 
    });  
});

Here is the fiddle.

Upvotes: 3

Related Questions