SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering input boxes using javascript

    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.

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    BUT the question itself immediately kneejerks me into "what the devil are you using Javascript to handle positioning for?!?" mode... That's CSS' job.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Primarily he wants to stop the form field from falling off the right-hand side of the screen when people tab to it.
    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.

  5. #5
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •