CODEWITHSUNDEEP
javascriptobjectposition
Endeavorwebs
Endeavorwebs

Reputation: 23

Can't call the window position object in a function

I have the following function that works like a champ:

//To find the position of an element
    function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

so when I call the getPosition I get the numbers as an object like that:

>{x: 200, y: 500}

Now I have another function that I am building to trigger an event with a certain position, but I can't call the getPosition number right... I have tried dozens of variations, certainly I am missing something here. Below is a simple function to show the way I am calling the position number is not correct:

function test () {
  console.log(getPosition(img));//An image - getPosition identify it to be at {x:200,y:500}
  if (getPosition(img) == (200,500)){ 
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

I have also tried between other options this:

function test () {
  console.log(getPosition(img));
  var x = 200;
  var y = 500;
  if (getPosition(img) == {x,y}){ 
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

and this:

function test () {
  console.log(getPosition(img));
  if (getPosition(img) == {x: 200,y: 500}){ 
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

So I only get 'it is not there!', I have tried many different ways to find a way to compare without success.

Any idea what I am doing wrong?

Much appreciated.

Upvotes: 0

Views: 47

Answers (1)

Andrew L
Andrew L

Reputation: 5486

The getPosition() function returns an Object. So you must check that objects x and y properties to make sure they match what you want.

The easiest way is to just check both x and y individually in the if statement. This seems to be what you were trying to do, but you just had the syntax a bit off by trying to check the x and y properties all in 1 statement.

//To find the position of an element
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

test()

function test() {
  var img = document.getElementById("the-image");
  
  console.log(getPosition(img));
  
  var imageLocation = getPosition(img);
  
  if (imageLocation.x === 8 && imageLocation.y === 22) {
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};
<img id="the-image" src=""/>

Upvotes: 1

Related Questions