www.webdeveloper.com
Results 1 to 10 of 10

Thread: Finding X, Y of div

  1. #1
    Join Date
    Jun 2008
    Posts
    136

    Finding X, Y of div

    Hello.

    I have a div, which can be anywhere in the document. I want it like, when I click anywhere on the div, it tells me the X, Y of the mouse in the div. Like X mouse - X div (left) and Y mouse - Y div (bottom). So that I know the width and height of the mouse according to the div. Is it possible or cross browser?

    Thanks for your time

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    $("vB_Editor_QR_textarea").onclick=function(e){
      e=e||window.event;
      this.value=e.layerX || e.offsetX;
    }
    firebug example, but event function itself should work on any positioned element and in ie as well.

  3. #3
    Join Date
    Jun 2008
    Posts
    136
    Thanks a lot mate.

    Exactly what I needed

  4. #4
    Join Date
    Jun 2008
    Posts
    136
    I ran to a problem.

    This thing works for a textarea. But when I use an 'img' for 'div' instead of that:
    e.layerY || e.offsetY will give the height from all the element above this. for example by clicking the top border of the image, instead of giving me the low number (like 0), it gives me 300, or 500 depends on the height of other elements above the image.

    Is there a workaround for this?
    Last edited by asmith20002; 02-13-2010 at 09:58 AM.

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by asmith20002 View Post
    I ran to a problem.

    This thing works for a textarea. But when I use an 'img' for 'div' instead of that:
    e.layerY || e.offsetY will give the height from all the element above this. for example by clicking the top border of the image, instead of giving me the low number (like 0), it gives me 300, or 500 depends on the height of other elements above the image.

    Is there a workaround for this?
    that's what i was afraid of. if something's too good to be true, it usually is.
    i'm afraid you will have to calculate the entire sequences of offsets on the wrapping tags, and subtract that from your event property coords.

    here is an example of finding the total left offset, from which subtracting the coords you already have should give you an element-relative coord:

    Code:
     	var pElm=inp, l=inp.offsetLeft, db=document.body;
    	while (pElm && pElm.offsetParent !== db) {
    	  pElm = pElm.offsetParent || false;
    	  l += (pElm.offsetLeft||0);
    	}//wend
      //now "l" is the total offset from the top-left corner...

  6. #6
    Join Date
    Jun 2008
    Posts
    136
    Thanks for your replies

    I'm sorry I lost you at the very end. What is inp there?

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by asmith20002 View Post
    Thanks for your replies

    I'm sorry I lost you at the very end. What is inp there?

    i ripped that out from live code and cleaned it up before posting.
    not quite clean enough i see.

    inp should be pElm, sorry about that.

    i should also note that you may find certain small oddities with this pattern, such as IE7 not stopping at the body, and double counting the pElm ofset sometimes...

  8. #8
    Join Date
    Jun 2008
    Posts
    136
    Quote Originally Posted by rnd me View Post
    i should also note that you may find certain small oddities with this pattern, such as IE7 not stopping at the body, and double counting the pElm ofset sometimes...
    hmm that made it harder. If it doesn't stop at body, meaning it will be an infinite loop?
    Seems there's no exact way for all browsers to catch this, huh?
    Last edited by asmith20002; 02-15-2010 at 12:50 AM.

  9. #9
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by asmith20002 View Post
    hmm that made it harder. If it doesn't stop at body, meaning it will be an infinite loop?
    Seems there's no exact way for all browsers to catch this, huh?
    no, it still stops at <HTML>, but if you have any style on it, iut might make a difference from one browser to the next.

    There is, sadly, no simple way of doing this that works in all browsers.

  10. #10
    Join Date
    Jun 2008
    Posts
    136
    hmm, maybe find a way around it?

    I want to be able to click on a 'div', and be able to change its background image position.
    For example I click on X:20,Y:100 on it (20 and 100 relating to the div) and it set background image position (background-position) to '20px 100px'.

    I was trying to get the X, Y by clicking so that I could change it.

    Is there anyway to achieve this other than that?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles