Control scrolling of HTML5 confirmation ball?
I'm working on a form with Twitter Bootstrap that uses a fixed top nav menu (scrolls off the page but stays on top) and http://reactiveraven.github.com/jqBootstrapValidation/ for simple styling of the form.
However, the problem I'm running into is that when the "to fill in this field" confirmation checkbox pops up, the browser scrolls to where the input field is at the very top of the page. This is normal under normal conditions, however due to my menu setting it is hidden. Is there a way that I can take advantage of this scrolling and add an offset to it to prevent this from happening?
source to share
I am working with the same setup and I found that there is no easy way to do this with an element form
. My hack was to watch out for invalid input
/ select
/ textarea
and then get something from it. This is not the best solution, especially with a lot of invalid inputs, but it helped me with what I needed. Hopefully someone else comes along and can clean it up a bit.
function scrollToInvalid() {
// Height of your nav bar plus a bottom margin
var navHeight = 60;
// Offset of the first input element minus your nav height
var invalid_el = $('input:invalid').first().offset().top - navHeight;
// If the invalid element is already within the window view, return true. If you return false, the validation will stop.
if ( invalid_el > (window.pageYOffset - navHeight) && invalid_el < (window.pageYOffset + window.innerHeight - navHeight) ) {
return true;
} else {
// If the first invalid input is not within the current view, scroll to it.
$('html, body').scrollTop(invalid_el);
}
}
$('input').on('invalid', scrollToInvalid);
source to share