[jQuery] How do i get relative dimensions of scrollbale window viewport.

Question

I am having a Tooltip (larger image view) that is being positioned via e.pageX e.pageY and i am trying to make sure it is not hidden below the current scrolled view port.

I have seen many sites have this my code is something like this but i am missing something.

var positionImg = function(e) {
    var viewportWidth = $(window).width(); 
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();  
    var mouseAtY = e.pageY;
    var mouseAtX = e.pageX;
    var maxBottomVPos = viewportHeight-"i dont know";
    var maxTopVPos = 30;

    if (mouseAtY >= maxBottomVPos)
    {
        tPosX = mouseAtX+ 10;
        tPosY = mouseAtY -520;
    }
    else if (mouseAtY <= maxTopVPos)
    {
        tPosX = mouseAtX;
        tPosY = mouseAtY +40;
    }
    else
    {
        tPosX = mouseAtX;
        tPosY = mouseAtY +20;  
    }
    $zoomContainer.css({top: tPosY, left: tPosX});
};

Answer 1

var maxBottomVPos = viewportHeight-"i dont know";

You probably don't want to go any lower than the height of the element that you are positioning. So use the height of zoomContainer to figure out how much higher it needs to go. This way, the whole thing can be included. Of course, you'll have to consider that the user might shrink the screen too small to fit the container.

To get the scroll offset use scrollTop. With this you will have both the size of the viewport and how far down the viewport is.

Answer 2

I found the answer:

Quite simple: var positionImg = function(e) { cntnrH = $zoomContainer.height() + 230; calHight = e.pageY - $(window).scrollTop() + cntnrH; docH = $(window).height()

  var mouseAtY = e.pageY;
  var mouseAtX = e.pageX;

   if (calHight >= docH)
      {
     tPosX = mouseAtX + 5;
     tPosY = mouseAtY - cntnrH;
      }
 else if (calHight <= calHight){
          tPosX = mouseAtX;
    tPosY = mouseAtY + 15;
   }
   else
   {
    tPosX = mouseAtX;
    tPosY = mouseAtY +20;  
   }
   $zoomContainer.css({top: tPosY, left: tPosX});
   };
  doIt = $("img.hovelble");
  doIt.hover(showZoomImg, hideZoomImg).mousemove(positionImg);
});