Determining when an element is being created off-screen

Determining when an element is being created off-screen

In this jsfiddle - http://jsfiddle.net/stevea/Fhb7X/7/ - I have a beige
draggable box and when I right-click that box a new red box is created the
same size but located 20px to the right of the beige box:
$('#box').draggable();
$('#box').contextmenu(function(e) {
e.preventDefault();
var doc_offset;
boxWidth = $('#box').width();
debugger;
doc_offset = $(this).offset();
doc_offset.left = doc_offset.left + boxWidth + 20;
$('<div>').css({width:"150px",
height:"150px",
'background-color':'red',
position : 'absolute'
})
.offset(doc_offset)
.appendTo('body');
});
As long as the beige box is toward the left of the body when I right-click
it, the red box that comes up is completely visible. But if the beige box
is close to the right edge of the body, part of the red box will be off
screen.
I want to know if the red box is going to be off screen before I create
it, because if it is, I'll create it on the left side of the beige box, so
it's always completely visible when it comes up.
Could someone suggest a way to sense if the red box will be totally
on-screen?
Thanks