Here is my dilemma. I have a div that is set to overflow auto allowing the content to scroll left and right. This is because the content I am putting in it (a series of input boxes) is considerably wider than the containing div. The way it sits, when I start in the first input box and continually tab to the other input boxes, the focus goes from the left of the screen to the right. Once it hits the input box to the right of the screen, some of the input box is hidden to the right. As I tab to the input boxes to the right, each one has a portion of the element cut off by the view window.
What I want to happen is when I start at the left most input box and tab over, as I reach the center of the viewable part of the container, I want the input boxes to continue to center themselves until I reach the last ones. I think that telling each input box to center itself in the visible window of the containing div as it gets focus would work, I just don’t know if there is an easy way to accomplish this using javascript. I am using the mootools framework if that helps my case any.
I hope that that made sense and thanks for any help you can give.
I think we’d have to see the code, preferably live as anything else amounts to our guessing wildly in the dark.
– BUT the question itself immediately kneejerks me into “what the devil are you using Javascript to handle positioning for?!?” mode… That’s CSS’ job.
Almost sounds like you’re over-complicating something simple – or flushing accessibility for some goofy animated effect that does nothing but get in the way of actually using the form.
Again though, that’s a wild blind guess without actually seeing a live page with working code.
It seems that he wants to try it in order to solve his problem, which is with tabbed-to form field, where “some of the input box is hidden to the right”
Primarily he wants to stop the form field from falling off the right-hand side of the screen when people tab to it. I’d like to find out though if there is a CSS solution for that before using JavaScript though.
I’m having difficulty picturing what that even MEANS. “falling off the right hand side?!?”… Sounds like either the form doesn’t fit the page properly or something is being needlessly complicated.
In which case fix the form or page instead of throwing more code at it.
Sorry for not getting back to this sooner. It seems I made this post a little hastily. There are some parts of the code that cause pages to refresh primarily due to database information that needs to update based on other fields. This is where I was seeing the input boxes appear off the right side of the screen. I double checked things and in normal operation when tabbing, the full text box in fact does appear on screen when tabbed to.
I will post back here ifI have any other concerns, but for now, please disregard this post.