Determining when an element is being created off-screen

Question

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

score 1 · Accepted Answer · answered Sep 09 '13 at 06:33

This should work:

var $window = $(window);
$('#box').draggable();
$('#box').contextmenu(function (e) {
    e.preventDefault();
    var boxWidth = $(this).width();
    var boxOffset = $(this).offset();
    boxOffset.left += boxWidth + 20;
    if (boxOffset.left + boxWidth  > $window.width()) {
        boxOffset.left -= (boxWidth + 20) * 2;
    }
    $('<div>').css({
        width: "150px",
        height: "150px",
            'background-color': 'red',
        position: 'absolute'
    })
        .offset(boxOffset)
        .appendTo('body');
});

Just check if the new offset + the width of the box is greater than the window size.

Here's the updated fiddle

score 1 · Answer 2 · edited May 23 '17 at 12:05

You want to check if the new element is visibile in the viewport.

Code:

$(function () {

    $('#box').draggable();
    $('#box').contextmenu(function (e) {
        e.preventDefault();
        var doc_offset;
        boxWidth = $('#box').width();
        doc_offset = $(this).offset();
        doc_offset.left = doc_offset.left + boxWidth + 20;
        var elem = $('<div>').css({
            width: "150px",
            height: "150px",
                'background-color': 'red',
            position: 'absolute'
        })
            .offset(doc_offset)
            .appendTo('body');

        alert(elementInViewport(elem[0]))
    });
});

function elementInViewport(el) {
 var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
        );
}

the function elementInViewport return true if it is fully visibile in the viewport, in other case false.

Starting from this you can move your div (in any direction) according to your needs.

Demo: http://jsfiddle.net/IrvinDominin/RhAR6/

Determining when an element is being created off-screen

2 Answers2