Question

internet cake for anyone who can help me with this.

I have a long (~about 3 screens long) html form, which needs to stay on one page as it’s being used for data entry and going through multiple pages will slow things down.

The data entry is being done on Firefox and what I want to happen is every time the users cursor goes into/out of a field that is at or near the bottom of the visible screen, to scroll the form up more than just a single field. Each of my fields are on a new line and the default behavior with long forms in Firefox is once you hit the bottom of the screen when you tab into the next field it will scroll up the bare minimum necessary to see that field; it’s frustrating for data entry as it’s helpful to always be able to see ahead of what you are doing.

I don’t mind using any third party js stuff (jquery/mootools etc.), I tried out the scrollTo plugin but I’m not very good with jquery so I couldn’t get this to work, not even sure if it’s possible.

As a side note, the behaviour I’m wanting is in Google Chrome by default, but I have to get this to work with FF unfortunately.

Answer 1

Try this (using jQuery):

$('input, textarea').on({
  focus: function (evt) {
    var
      viewportHeight = $(window).height(),
      selfBottom = $(this).offset().top + $(this).height();

    if (viewportHeight - selfBottom - $(window).scrollTop() < 10 /*minimum distance in pixel*/) {
      $(window).scrollTop(selfBottom - viewportHeight / 2);
    }
  }
});

Demo: http://jsfiddle.net/P7gd2/2/