SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    421
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseover table cell display of div going off screen

    Hello

    I have a div that is usually hidden but is displayed when a user mouses over a table cell. This works fine, but when the cells are near the bottom of the screen, the div goes off even further, so it's partially hidden. How can i set the offset so that if the div won't fit at the screen coordinates, it will go up instead of down - instead of displaying the top left corner of the div at the mouse pointer, it will display "upwards", bottom right corner maybe?

    Here is my code so far (where offsetElement is the element that the mouse is currently over; in this case, always table cell)
    Code:
     function setOffsets() {
             	var end = offsetElement.offsetWidth;
             	var top = calculateOffsetTop(offsetElement);
             
                var elem = document.getElementById('summaryDiv');
                
                elem.style.left = end + 15 + "px";;
                elem.style.top = top + "px";
                
                elem.style.border = "black 1px solid";
                elem.style.visibility = "visible";
            }
            
            function calculateOffsetTop(field) {
              return calculateOffset(field, "offsetTop");
            }
    
            function calculateOffset(field, attr) {
              var offset = 0;
              while(field) {
                offset += field[attr]; 
                field = field.offsetParent;
              }
              return offset;
            }

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps get window.innerWidth and window.innerHeight in to the mix..these give the actual avaliable height of the window (including the scrollbars)....if the variable top has a greater value than window.innerHeight then do something else with the positioning instead.....i'm not exactly what you mean by display "upwards" so i won't go in to any more details for now


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
  •