1

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

Boopathi
  • 226
  • 1
  • 4
  • 18
  • Take a look at [StackOverflow question "How to check in Javascript if one element is contained within another"](http://stackoverflow.com/questions/2234979/how-to-check-in-javascript-if-one-element-is-contained-within-another) to know how to perform this in the answer. – Anwar Jun 29 '15 at 10:18
  • Possible duplicate of https://stackoverflow.com/questions/8872578/if-element-is-over-another-element –  Jun 29 '15 at 10:31

2 Answers2

2

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';
}
Damini Singh
  • 32
  • 3
0
    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/

Damini Singh
  • 32
  • 3