SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Finding the position of an object using JavaScript

    Hi,

    I have seached through the forums and come across the great http://cross-browser.com site and its tools and a couple of other sources of code.

    But each time I try to locate the object I seem to get a variety of answers none of them the actual location of the objkect.

    We extensively use <div> and css styles to maintain and position our site and have been looking to include a number of objects after the page is displayed. So allowing the fast text to be delivered and then The adverts to be delivered when they can be.

    Unfortunaltely looking that the code that I have found I have things that should work but they don't seem to show the correct code.

    An example might be:

    <div id="lhs">
    <ul id="nav">
    <li>lots of navigation items down an unknown distance down
    the left hand of the page
    </ul>

    <table width="120" height="600"><tr><td>
    <div id="image-23">
    </div>
    <br /></td></tr></table>
    </div>

    </div>

    Then at the bottom of the page:

    <script language="JavaScript" type="text/javascript">
    document.write('<div id="ad3" style="position: absolute; width: 120px; top: '+xPageY("image-23")+'px; left:'+xPageX("image-23")+'px; height: 600px";>');
    -- call advert include
    </script>
    </div>

    What is curious is that depending on the position of the </div> in the Left hand column the location of the object is different, equally if I try the xTop and xLeft from the X library as an alternatives I just get 0 as the answer.

    Using an alternate library I get completly different positions.

    Anyone have any good ideas on how to do this the theory seems fine but in practive the position shown doesn't seem to be correct.

    Thanks in advance.
    Last edited by AlanJay; Apr 23, 2007 at 13:37.

  2. #2
    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)
    Hi AlanJay,

    Welcome to SPF!

    Typically, you can't find the position of an element until the onload event. How can you be sure 'image-23' (or any images before it) has completely loaded before you try to get its position?

    xLeft/xTop return 0 because the inline style properties are initially empty strings (read this).

    Suggestion: don't document.write the div, create it dynamically in the onload handler. Or if you really need to document.write it then don't try to position it until the onload event.

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    Hi AlanJay,

    Welcome to SPF!

    Typically, you can't find the position of an element until the onload event. How can you be sure 'image-23' (or any images before it) has completely loaded before you try to get its position?

    xLeft/xTop return 0 because the inline style properties are initially empty strings (read this).

    Suggestion: don't document.write the div, create it dynamically in the onload handler. Or if you really need to document.write it then don't try to position it until the onload event.
    Thanks Mike!

    Well firstly image-23 is really just a DIV ID for a space where an image needs to be delivered - in this case an advert. So you are correct that is the problem.

    I suppose the question is what is the best way around this - I could for example load dummy 1x1 images into the spaces off my fast servers and then use that as the position element (would that work).

    Or is there some other way to conclude the position of a text element when all around it are non variable?

    I have to admit I used document.write because I wasn't sure what else to do sorry new at this and as usual plunge into the complicated stuff and search for good code to help understand how this all comes together.

    Thanks for the quick response and at least I now have a better understanding of why all the zeros.

    Now to find a way to ensure that they are not

    So do you suggest that at the bottom of my page I use the onload to wait till the end before working out where things are?

    ALan

  4. #4
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking thorugh some old posts I came across:

    Quote Originally Posted by Ize View Post
    if the newly created DIV gets appended to an element with position: relative;, it will base it's top and left position on that element, instead of the body.

    And I think this is where the problem lies in that some of the other <DIV> elements use relative to position themselves and therefore the positions that are created are relative to that DIV rather than the BODY.

    Now to find out if there is a way to overcome this without a complete rewrite

    Another thought I had was using:

    <img id="TopAdvert23" src="http://images.digitalspy.co.uk/1x1.jpg">

    To load a small image into the element so that we can have a better chance of it existing by the time the bottom of the page is reached

    Not sure if this is helpful or not.

  5. #5
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    Suggestion: don't document.write the div, create it dynamically in the onload handler.
    Sorry to ask a silly question but could you point me in the direction of some good examples?

    Quote Originally Posted by MikeFoster View Post
    Or if you really need to document.write it then don't try to position it until the onload event.
    Can one force the onload event at the end of the page?
    Again I think I am slightly out of my depth and will be searching for some examples now that you have given me clues

    All the best

    ALan

  6. #6
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this might get you some clue.

  7. #7
    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)
    Hi Alan,

    Perhaps I misunderstood.

    Well firstly image-23 is really just a DIV ID for a space where an image needs to be delivered - in this case an advert.
    How is it to be delivered? An IMG element like the following?
    Code:
    <div id='image-23'>
    <img id='ad3' src=''>
    </div>
    In that case there's no need to position the img at all.

    But, in general, if there's an absolute element that needs positioning, do it in an onload listener...
    Code:
    <script type='text/javascript'>
    window.onload = function()
    {
      // Position ad3 on top of image-23
      xMoveTo('ad3', xLeft('image-23'), xTop('image-23'));
    };
    </script>
    If you want to dynamically create an element and insert it into the 'image-23' div...
    Code:
    <style type='text/css'>
    .myStyle {
      background: white;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var e = document.createElement('div');
      e.className = 'myClass';
      xGetElementById('image-34').appendChild(e);
    };
    </script>
    But are you wanting to create a div or an img?

  8. #8
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Nb. Ref subject title ... Java != Javascript
    Ian Anderson
    www.siteguru.co.uk

  9. #9
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siteguru View Post
    Nb. Ref subject title ... Java != Javascript
    Appoligies - knuckles suitable wrapped

  10. #10
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimplyFu View Post
    this might get you some clue.
    Thanks very interesting - I'm not sure entirly in what I am looking for but good background so thanks for the link.

  11. #11
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike thanks for your comments maybe I should try to explain again.

    We have on our site a number of adverts on each page, unfortunately we are sometimes in the situation where thrid party advertising servers are slow (sometimes very slow) and we want to try to reduce the "perceived" load time of the site.

    One way to do that - we were told by our advertising netowrk - was to use "absolute" positions on the advert DIV's and place the JavaScript code that collects the advert from the advertisers server at the very bottom of the site.

    This works very well on pages where the adverts are in fixed positions and we have implemented that on our forums with good sucess.

    When we looked at our main site we realised that because of the dynamic nature of the content the position of the adverts moves around the page (mostly up and down the page). Beliving that aesthetically nice consitent code across the site makes for easy maintenace we thought wouldn't it be nice to use JavaScript to find the location of the <DIV> element for each advert that has been left empty and use that top left hand point to place the real adverts.


    To answer your questions, I am only using a "dummy image" to define a top left hand corner for the advert that is being inserted. I might not need to do that but when I have a

    <DIV id="ad_pos1"> (in the previous version the advert code was inservet but now it is empty)
    </DIV>

    When I tried to find the position of the element ad_pos1 on the Page I got the middle of the space I carved out and not the top left hand point.

    Thinking about it not that unexpecetd with the benfit of hindsight

    The various code examples have given me some more ideas to try to see if implementing the onload will give me what I need.

    Once again thanks for the insights everyone.

    Alan
    www.digitalspy.co.uk

  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)
    Give us a link to your page.

  13. #13
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After some playing I still can't get xLeft and xTop to produce valid results (even using alert to display the results in onload).

    However I have found that xPageX and xPageY seem to produce valid results which seem to work.

    Regards
    Alan

  14. #14
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One other question Mike - your tools when they generate an answer when you test a number is it a numeric?

    ie

    <script type='text/javascript'>
    window.onload = function()
    {
    top1_Y = xPageY("TopAdvert23") + 1 ;
    top1_X = xPageX("TopAdvert23");
    top1_A = xHeight("AdTop23");
    if (top1_A=60)
    {
    x_top1_A = top1_Y + 15;
    }
    xMoveTo('AdTop23', 240, x_top1_A );
    };
    </script>

    In this case I am trying to check if the size of the advert image is 60 or 90 pixels high. If it is 60 it needs to be pushed down by 15 pixels.

    Regards
    Alan

  15. #15
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlanJay View Post
    <script type='text/javascript'>
    window.onload = function()
    {
    top1_Y = xPageY("TopAdvert23") + 1 ;
    top1_X = xPageX("TopAdvert23");
    top1_A = xHeight("AdTop23");
    if (top1_A=60)
    {
    x_top1_A = top1_Y + 15;
    }
    xMoveTo('AdTop23', 240, x_top1_A );
    };
    </script>
    Looking at this I think I worked out that I should have

    if (top1_A==60)

    And then it seems to work as expected.

  16. #16
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Partial conclusion:

    Hi,

    Well after some playing today we seem to have something that works I don't understand why as from the discussions the xLeft and xTop don't ever give a result other than 0 (even when envoked from the onload function).

    Yet xPageY and xPageX seem to give good reults.

    So my page has developed along the following lines:

    1) in the location where the adverts are going to be placed I have placed a 1x1 gif in the top left hand corner of a table that is the correct size for the advert that is to be loaded - ie:

    <table width="120" height="600"><tr><td align="left" valign="top">
    <img id="AdvertSKY23" src="http://images.digitalspy.co.uk/1x1.jpg" align="left" border="0">
    </td></tr></table>

    2) At the very bottom of the page I have used a xPageX and xPageY elements and the absolute position to place the adverts into the slots that had previously been created - ie:

    <script language="JavaScript" type="text/javascript">
    sky_Y = xPageY("AdvertSKY23") - 5 ;
    document.write('<div id="ad3" style="position: absolute; width: 120px; top: '+sky_Y+'px; left: 0px; height: 600px";>');
    <!-- 'Right' begin -->
    <!--
    AD_CODE('Right');
    //-->
    </script>
    <!-- AD 'Right' end --></div>

    3) One of the advert slots can contain either a 468x60 or a 768x90 size advert after your sugestion with the onload move I have tried this:

    <script type='text/javascript'>
    window.onload = function()
    {
    top1_Y = xPageY("TopAdvert23") + 1 ;
    top1_X = xPageX("TopAdvert23");
    top1_A = xHeight("AdTop23");
    if (top1_A==60)
    {
    x_top1_A = top1_Y + 15;
    }
    xMoveTo('AdTop23', 240, x_top1_A );
    };
    </script>

    Which does move the 60 pixel high adverts into the centre of the space.

    I still don't understand why this works and the xLeft and xTop consitently give 0 as a result and maybe someone can explain.

    Our next steps are to try this on our test server and see if it works in reality rather than my demo HTML

    Thanks for all the ideas and guidence.

    Regards
    Alan

  17. #17
    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)
    Hi Alan,

    Yes, these position functions in question do return numeric values.

    If AdvertSKY23 has 'position:static' or 'position:relative' then 0 is the correct value for both left and top. (reference)

  18. #18
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    If AdvertSKY23 has 'position:static' or 'position:relative' then 0 is the correct value for both left and top. (reference)
    Thanks - the position is not set to "relative" or "static" and looking through the css file there is a "relative" style near the top but no where else though would I be right in saying that this is inheteted by subsequent boxes.

    Certainly the xTop / xLeft always give zero as the result (even from the onload structure).

    I assume the the xPageX and xPageY are an acceptable solution - they seem to give the correct result which is that one hopes for

    Once again thanks.

  19. #19
    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)


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
  •