Tall web form, lots of fields: keep keyboard-focused field vertically centered?

[Ichinisan]

I'm working on a tall form page with lots of fields. Each field is contained in a visible div that changes color to show when the field has focus. Within the DIV, just after the text box, information about the field is displayed to the user (description of what the field is asking for, validation requirements, etc). Clicking anywhere in the DIV gives keyboard focus to the text box inside it.

When pressing the Tab key to move through the fields, the user eventually end up with each text box appearing at the very bottom of the screen. I want to make it so the screen scrolls to keep the focused text box centered vertically. This would ensure that the rest of the information in the div is visible (the info just below the text box). What's the best way to do this?

 

[KB]

Here's an example on how to get the X, y of the element in jquery:

http://stackoverflow.com/questions/1002934/jquery-x-y-document-coordinates-of-dom-object

Then in the onfocus event of the textbox you would use window.scrollTo(x, y) using the x, y from the code in the link

 

[Ichinisan]

Here's an example on how to get the X, y of the element in jquery:

http://stackoverflow.com/questions/1002934/jquery-x-y-document-coordinates-of-dom-object

Then in the onfocus event of the textbox you would use window.scrollTo(x, y) using the x, y from the code in the link

Ah, thanks. I figured it would probably require JQuery to do it right. I should probably get a better grasp of Javascript before I move on to JQuery.

 

[Ka0t1x]

As long as you know functional programming and control structures I don't really see the need to learn JavaScript 'fully' before using jQuery. You may need to do things with the JavaScript classes, but that would be easily revealed in a documentation search.

 

[Markbnj]

As long as you know functional programming and control structures I don't really see the need to learn JavaScript 'fully' before using jQuery. You may need to do things with the JavaScript classes, but that would be easily revealed in a documentation search.

Hmm, there are certain aspects of it which can really trip you up if you don't understand them ahead of time. Scope is one, and just the basic notion that everything is an object and a property of an object. I don't think you have to master javascript before you mess around with jquery, but I promise that once you start messing around with jquery you'll end up mastering javascript 🙂.

 

[PhatoseAlpha]

Well, on a fundamental level jQuery is javascript. You don't move on to jQuery from JS anymore then you move on to the .Net framework from C#.

The real danger isn't so much not understanding javscript as it is that jQuery shields you from the DOM/js interactions. Things like how IE used to (and may still) add a tbody element to a table if it's not in the markup.