SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting first element and its coordinates with javascript

    Hello all,

    Can i track that what the first element in the page is And its X and Y coordinates from the absolute point?

    For example my first element <table> is centered with the width of 781px. And i want to track the position of the <table> tag's X position from the absolute point.

    Thanx in advance.

    With Regards
    Raju Gautam

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but given the difficulty in writing cross-browser script, my suggestion is to look at an external JS library. You probably want to look at jQuery, which includes a function to do this, or x.js written by one of our own.

    Dave

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For example: test (resize the window and watch the status bar).

    Thanks Dave

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found this way to get what i want to :
    Code:
    function findFirstElPos(){
    var firstEl=document.body.getElementsByTagName('*')[0];
    var ol=firstEl.offsetLeft+document.body.offsetLeft+document.body.parentNode.offsetLeft;
    var ot=firstEl.offsetTop+document.body.offsetTop+document.body.parentNode.offsetTop;
    alert('The first element on this page is '+ol+' from the left and '+ot+' from the top')
    }
    onload=findFirstElPos;
    But it only works in Internet Explorer. It only says 0 from absolute left in Mozilla and 111 in Internet Explorer.

    Can anyone suggest me what is next to be done with that code?

    With Regards
    Raju Gautam

  5. #5
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a little function I use to get correct coodinates :

    Code:
    function calculeOffsetLeft(r){
      return calculeOffset(r,"offsetLeft")
    }
    function calculeOffsetTop(r){
      return calculeOffset(r,"offsetTop")
    }
    function calculeOffset(element,attr){
      var offset=0;
      while(element){
        offset+=element[attr];
        element=element.offsetParent
      }
      return offset
    }

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello SpaceFrog, thanx for the reply and function.

    But when i used your script as follows to get left:
    Code:
    function calculeOffsetLeft(r){
      return calculeOffset(r,"offsetLeft")
    }
    function calculeOffsetTop(r){
      return calculeOffset(r,"offsetTop")
    }
    function calculeOffset(element,attr){
      var offset = 0;
      while(element){
        offset += element[attr];
        element = element.offsetParent
      }
      return offset
    }
    function track_first_el(){
    	//find the first element in the screen after body
    	var el = document.body.getElementsByTagName('*')[0];
    	alert(calculeOffsetLeft(el));
    }
    onload = track_first_el;
    It shows 111px in IE 6.0 and 0 in Mozilla fire fox 2.0.0 where the value tracked in IE is correct.

    What may be the wrong?

    Please suggest me.

    With Regards
    Raju

  7. #7
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you sure the element returned with ffx is the one you want ???
    I sense that el might be juste a plain text node
    try and alert type of el ....
    you may then have ti use a nodecleaner to get rid of the empty textNodes found by DOM under FFX

  8. #8
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I am sure that it is returning the first element of the pages (means the object tag just after the <body> tag). And it gives the coordinates in IE 6.0 but not in the Fire Fox.

    What you mean by DOM FFX? And how can I use that to retrieve what i want?

    Please suggest and help me.

    With Regards
    Raju Gautam

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you should follow my original suggestion and not try to re-invent the wheel, especially with a problem that is so difficult to solve cross-browser.

    Dave

  10. #10
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you should follow my original suggestion and not try to re-invent the wheel, especially with a problem that is so difficult to solve cross-browser.
    For example: test (resize the window and watch the status bar).
    I have tested both the links but these are not working as properly as it should in firefox. Have you tested with Mozilla Firefox dear MikeFoster?

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    H rajug,

    I thought I had tested that with FF, but evidently I did not.

    I just ran several tests on FF 2.0 and 1.0.2. It appears to be a table-related Gecko bug. If we can't trust offsetLeft nor the computed styles for 'left' and 'margin-left' then I don't think there's anything else we can do.

    I've updated the test page to provide better test results. See how it works for you.

    I hope someone finds something I'm doing wrong - but it does appear to be a Gecko bug, and one that has been around for some time (at least since v1.0.2).
    Last edited by MikeFoster; Jan 24, 2007 at 11:39. Reason: The test page filename changed - I updated the link in this post.

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bug 258255 – offsetLeft property of table element wrong when table centered with align="center" or with CSS

    Edit:

    FYI...

    There's a simple work-around for this bug. Here's my test page.
    Last edited by MikeFoster; Mar 13, 2007 at 01:36. Reason: found work-around

  13. #13
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding difference in Node counting if you have FireFox take a look at the DOM inspector and you will find out that IE end FFX do not count the Nodes the same way ...

  14. #14
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear SpaceFrog,

    I also know that FF and IE do not count the Nodes the same way. But if you know how they count the elements (nodes), please share it with me i would be very grateful to you.

    I want to see the actual code because i have already made lots of search and tries on this matter.

    With Regards
    Raju Gautam

  15. #15
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I actually posted a little code a while ago to solve this problem ...

    http://www.sitepoint.com/forums/show...t=90644&page=2

    search for "node count" on page you will find my post ...


Bookmarks

Posting Permissions

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