SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    offsetLeft in Opera

    Hi all, I have a problem in my script, I simplified the code as shown below, when you run this script it will show some values twice:

    Code:
        alert(" -1- : "+document.getElementById("div1").offsetLeft+"-"+document.getElementById("div1").offsetTop);
        alert(" -2- : "+document.getElementById("div1").offsetLeft+"-"+document.getElementById("div1").offsetTop);
    The strange thing is, as you see in the code above, the the second alert is right after the first one, so they should show the same value, but it is NOT...
    This problem only occurs in Opera -I'm using Opera 8.5-, I was trying to search similar problem on the net, but I only found that Opera treat offsetLeft a bit different than other browsers, but still they should display the same values, right?

    So anyone knows where the problem is? Thank you very much.

    Oh btw, here is the complete code:
    Code:
    <html>
      <head>
    <style type="text/css">
    <!--
    #div2 {
      position:absolute;
      border:2px solid #FF0000;  
    } 
    -->
    </style> 
      </head>
    
      <body bgcolor="#FFFFFF">
      <script language="Javascript">
      function somejshere() {
        alert("somejshere");
      }
      </script>
      
      
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr align="center"><td>
        blah blah<br/>
        blah blah<br/>
        blah blah<br/>
      </td></tr>
      <tr align="center"><td>
        <table width="750" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="600" align="left" valign="top">
            <div id="div1" name="div1" style="position:relative;width:600;height:392;background:#0000FF;"></div>
            <div id="div2"></div>
          </td>
        </tr>
        </table>
        <br/>
    
        blah blah<br/>
        blah blah<br/>
        blah blah<br/>
        blah blah<br/>
        blah blah<br/>
        
      </td></tr>
      </table>
    
        <script language="JavaScript">
    
        alert(" -1- : "+document.getElementById("div1").offsetLeft+"-"+document.getElementById("div1").offsetTop);
        alert(" -2- : "+document.getElementById("div1").offsetLeft+"-"+document.getElementById("div1").offsetTop);
      </script>
    
    
      </body>
    </html>

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Opera 9 it is correct.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for trying...

    well, I tried to work on the code, I put one more alert before those ones and "magically" those two lines return the right values. I don't know, does it need some time (delay) to get the right position?

    So the code is like this:

    Code:
        alert('delay');
        alert(" -1- : "+document.getElementById("div1").offsetLeft+"-"+document.getElementById("div1").offsetTop);
        alert(" -2- : "+document.getElementById("div1").offsetLeft+"-"+document.getElementById("div1").offsetTop);

  4. #4
    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)
    Try it with the SCRIPT element in the HEAD and run the code in the window.onload event.


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
  •