Move partially hidden object into full view
I use JavaScript to inject a dynamic box (a <div>) in the document. The box is located in a relative position, starting from the link that trigger its creation:
-
+---------+
| Trigger |
+---------+
+-----------------------+
| |
| Box |
| |
+-----------------------+
So far so good.
The problem is that in triggers located to the right of the page there's not room enough to show the whole box. The box is partially hidden, scrollbars show up and the user must pick the mouse to scroll the box into view.
My first solution was this little snippet:
-
moveIntoView = function(obj){
var pageWidth = $("body").width();
var objectWidth = $(obj).outerWidth();
var objectLeft = $(obj).offset().left;
if( objectLeft+objectWidth > pageWidth ){
$(obj).css({left: $(obj).offset().left + "px"}).animate({left: (pageWidth-objectWidth) + "px"}, "fast");
}
};
It works as expected... unless the document already has horizontal scrollbars. In such case, the box is unnecessarily moved far away from its trigger.
All methods and properties I've tried provide me with the *visible* width of the page, not the *virtual* width. I've also tried to use the
right CSS attribute but it happens to be negative for the rightmost boxes. According to Firebug, the <body> tag has the size of the window and everything to the right stretches outside the body.
Is there any way to move a DOM node that's partially hidden into full view?