CODEWITHSUNDEEP
javascriptjquery
Django Johnson
Django Johnson

Reputation: 1449

Detect if an element is 60% off the right edge of screen in javascript

Using Javascript's native drag, how can I detect when an object is 60% off the right edge of the screen / window. Meaning 40% of it is showing?

By 60%, I mean what is equal to 60% of the window's current width. So when the amount of 60% of the window's current width is hidden and 40% or less of the window's width is showing.

I need to have this as an if condition who's suite can be jQuery code.

What i've tried is using the Pep.js plugin and the first else if inside the drag option. That and the code is in more detail here: jQuery code in if statement not running even though alert in if statement happens

Upvotes: 0

Views: 1325

Answers (1)

Teemu
Teemu

Reputation: 23416

OK, here it comes.

The script:

window.onload = function () {
    var AniMove = function (doc, element) {
        var ox, oy, mx, my,
            w = element.offsetWidth,
            mouseMove = function (e) {
                e.preventDefault();
                if (element.offsetLeft + 0.4 * w > window.innerWidth) {
                    // 60% of the element's width is outside of the window now... do something
                    return;
                }               
                element.style.left = element.offsetLeft + e.clientX - mx + 'px';
                element.style.top = element.offsetTop + e.clientY - my + 'px';
                mx = e.clientX;
                my = e.clientY;
                return false;
            },
            mouseUp = function () {
                doc.removeEventListener('mousemove', mouseMove);
                doc.removeEventListener('mouseup', mouseUp);
                return;
            },
            mouseDown = function (e) {
                ox = mx = e.clientX;
                oy = my = e.clientY;
                doc.addEventListener('mousemove', mouseMove, false);
                doc.addEventListener('mouseup', mouseUp, false);
                return;
            };
        element.addEventListener('mousedown', mouseDown, false);
    },
    drag = new AniMove(document, document.getElementById('square'));    
}

and the HTML:

<div id="square"></div>

finally the CSS:

DIV {
    position: fixed;
    width: 100px;
    height: 100px;
    background: #f00;
}

After all that done we have a demo at jsFiddle. I hope this snippet contains all the information you need.

Upvotes: 1

Related Questions