CODEWITHSUNDEEP
javascriptjqueryhtml
Boopathi
Boopathi

Reputation: 226

Compare two element position (offset)

I need to compare two elements offset positions to find whether one element is placed above on other element.

enter image description here

here i need to check the me is placed on the screen or not by using offset positions.

HTML Code

    <div id="screen" style="background-color: olive; height: 120px; width:120px;"></div>
    <span id="me" style="position: absolute; left: 44px; top: 86px;">me</span></div>

JavaScript

    var a = document.getElementById('screen') 
    var b = document.getElementById('me');

    aOffsetLeft=a.offsetLeft;
    aOffsetTop=a.offsetTop;

    bOffsetLeft=b.offsetLeft;
    bOffsetTop=b.offsetTop;

    //Here need to check whether b within a

Please help me

Upvotes: 1

Views: 1982

Answers (2)

Damini Singh
Damini Singh

Reputation: 32

Above code is in jquery, below is javascript code :

https://jsfiddle.net/7xudznea/11/

var a = document.getElementById('screen')
var b = document.getElementById('me');
var c = document.getElementById('abc');

aOffsetLeft = a.offsetLeft;
aOffsetTop = a.offsetTop;
aoffsetHeight = a.offsetHeight;
aoffsetoffsetWidth = a.offsetoffsetWidth;

bOffsetLeft = b.offsetLeft;
bOffsetTop = b.offsetTop;

if ((aoffsetHeight + aOffsetTop >= bOffsetTop) || (aoffsetoffsetWidth + aOffsetLeft >= bOffsetLeft)) {
   document.getElementById('abc').innerHTML = 'true';
} else {
    document.getElementById('abc').innerHTML = 'false';
}

Upvotes: 2

Damini Singh
Damini Singh

Reputation: 32

    var $screen = $('#screen');
    var $me = $('#me');
    if ((($screen.height() + $screen.offset().top) >= $me.offset().top) || ($screen.width() + $screen.offset().left >= $me.offset().left)) {
        return true;
    } else {
        return false;
    }

Demo: https://jsfiddle.net/7xudznea/6/

Upvotes: 0

Related Questions