Question

I’m doing an ajax call. The function called on success looks as follows:

function(data){
            $div.html(data);
            posX=window.mouseX+1;
            posY=window.mouseY+1;
            if(posY-$(document).scrollTop()+$div.height()>$(window).height()){
                posY-=$div.height();
            }
            $div.css('left',posX+'px');
            $div.css('top',posY+'px');
            $div.appendTo($('body'));
        }

The idea is: if the div positioned at mouse coordinates is not gonna fit the browser size, then I put it above the mouse pointer instead.
The problem is that $div.height() is returning 0 if I call it before appending it to the body. Is there a way to get the height other than appending first and moving after?

Answer 1

Insert it with display: none and use jQuery’s width() and height() function.