Keeping a div fully visible within browser window

Discussion in 'Javascript' started by Terry, Jan 20, 2007.

  1. Terry

    Terry Guest

    I'm working on a web page that consists primarily of an unordered list.
    When the user mouses over any list item, a div appears immediately to
    the right of that item, containing supplemental information about that
    item.

    Vertically, I'm positioning the div with its top slightly higher than
    the list item, as determined by the list item's offsetTop value.

    My problem: If a list item appears near the bottom of the browser
    window, the div is too tall to fit in the window, and is partially
    concealed. So, I need to determine whether the div will fit vertically
    in the browser window, and if it won't, assign the div a top position
    that will ensure that the entire div is visible. How do I do this???

    Thanks!
     
    Terry, Jan 20, 2007
    #1
    1. Advertising

  2. Terry wrote:
    > My problem: If a list item appears near the bottom of the browser
    > window, the div is too tall to fit in the window, and is partially
    > concealed. So, I need to determine whether the div will fit vertically
    > in the browser window, and if it won't, assign the div a top position
    > that will ensure that the entire div is visible. How do I do this???


    You first have to know the div's height, the div's top position and the
    window's height.

    To calculate the window's height, use the getWindowHeight function
    explained here:
    http://alistapart.com/articles/footers

    How to retrieve the div's height and top position depends on the
    element's CSS properties.
    Usually, offsetHeight and offsetTop do the job.

    * * * * *

    var windowHeight = getWindowHeight();
    var divHeight = div.offsetHeight;
    var divTop = div.offsetTop;

    var diff = windowHeight - divHeight - divTop;
    if(diff < 0){ divTop = divTop + diff; }

    * * * * *
     
    Eduardo Omine, Jan 20, 2007
    #2
    1. Advertising

  3. Terry wrote:
    > I'm working on a web page that consists primarily of an unordered list.
    > When the user mouses over any list item, a div appears immediately to
    > the right of that item, containing supplemental information about that
    > item.
    >
    > Vertically, I'm positioning the div with its top slightly higher than
    > the list item, as determined by the list item's offsetTop value.
    >
    > My problem: If a list item appears near the bottom of the browser
    > window, the div is too tall to fit in the window, and is partially
    > concealed. So, I need to determine whether the div will fit vertically
    > in the browser window, and if it won't, assign the div a top position
    > that will ensure that the entire div is visible. How do I do this???
    >
    > Thanks!


    It might be a good idea to use a YAHOO.ext.BasicDialog object to do that. You can instantiate them from an existing DIV, and use the constraintoviewport:true config option and it will constrain the position within the browser viewport. If you don't want to see a header and footer in this dialog, just use CSS (You'll obviously have your own class name to give to this informational DIV) to set them to display:none.

    YAHOO.ext library: http://www.jackslocum.com/blog/ (Read the blog entries since September last year to familiarize yourself first)

    Docs: http://www.yui-ext.com/deploy/yui-ext/docs/
     
    TheBagbournes, Jan 20, 2007
    #3
  4. Terry

    Terry Guest

    Eduardo Omine wrote:
    > var windowHeight = getWindowHeight();
    > var divHeight = div.offsetHeight;
    > var divTop = div.offsetTop;
    >
    > var diff = windowHeight - divHeight - divTop;
    > if(diff < 0){ divTop = divTop + diff; }


    Thanks, Eduardo. I actually tried this approach but the value of
    div.offsetTop is relative to the document, not the window. If the height
    of the unordered list is greater than the window size (which is ok),
    then the user may be mousing over a list item, and thereby spawning a
    div, that has a divTop value that's much higher than the windowHeight
    value.

    The logic in your approach is good, but how to I get a value of divTop
    that reflects the div's position within the window, not within the
    document?
     
    Terry, Jan 20, 2007
    #4
  5. Terry

    VK Guest

    Terry wrote:
    > The logic in your approach is good, but how to I get a value of divTop
    > that reflects the div's position within the window, not within the
    > document?


    The task to find the exact pixel position of any element in any layout
    is not solvable. For that current DOM methods are way too weak and
    current UAs are too buggy (each on its different way). This way the
    request could only be to have a program solving the problem in the
    biggest amount of circumstances. AFAIK currently the best is the
    library by Matt Kruse
    <http://www.javascripttoolbox.com/lib/objectposition/>. It still cannot
    be exact in all possible situations, because as it was explained this
    task currently is not solvable. But in 99% of situations you are
    getting pixel-exact position.
     
    VK, Jan 20, 2007
    #5
  6. Eduardo Omine, Jan 21, 2007
    #6
  7. Terry

    Matt Kruse Guest

    Matt Kruse, Jan 21, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    1
    Views:
    462
    Barbara de Zoete
    May 5, 2006
  2. Caleb
    Replies:
    13
    Views:
    1,577
    Ed Mullen
    Feb 24, 2007
  3. Gunawan

    Keeping GridView Header visible

    Gunawan, Mar 30, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    1,685
    Gunawan
    Apr 2, 2007
  4. Jon
    Replies:
    2
    Views:
    191
  5. Replies:
    4
    Views:
    174
Loading...

Share This Page