Loading ...
Sorry, an error occurred while loading the content.

2px less while animating div in IE 7

Expand Messages
  • Prashant Nair
    I m trying to move a div using the following code: var attributes = { points: { to: [200, 200] }, width: {to: 200}, height: {to: 200} }; anim = new
    Message 1 of 3 , Feb 28, 2007
    • 0 Attachment
      I'm trying to move a div using the following code:

      var attributes = {
      points: {
      to: [200, 200]
      },
      width: {to: 200},
      height: {to: 200}
      };

      anim = new YAHOO.util.Motion(obj.id, attributes, 1,
      YAHOO.util.Easing.easeOut);
      anim.animate();

      ON IE 7:
      the div moves to left:198 and top:198 insted of left:200 and top:200

      ON FF:
      the div moves correctly to left:200 and top:200

      Is this a known issue? Is there are work around? Or am I doing
      something wrong?

      You help is truly appreciated.

      Thanking all you wonderful people in advance.

      -Prashant
    • Matt Sweeney
      ... Hi Prashant, The xy coordinates of an element rarely match top and left values due to the many factors that affect an element s position. Do both
      Message 2 of 3 , Feb 28, 2007
      • 0 Attachment
        Prashant Nair wrote:
        > I'm trying to move a div using the following code:
        >
        > var attributes = {
        > points: {
        > to: [200, 200]
        > },
        > width: {to: 200},
        > height: {to: 200}
        > };
        >
        > anim = new YAHOO.util.Motion(obj.id, attributes, 1,
        > YAHOO.util.Easing.easeOut);
        > anim.animate();
        >
        > ON IE 7:
        > the div moves to left:198 and top:198 insted of left:200 and top:200
        >
        > ON FF:
        > the div moves correctly to left:200 and top:200
        >
        >
        Hi Prashant,

        The xy coordinates of an element rarely match "top" and "left" values
        due to the many factors that affect an element's position.

        Do both report the correct value when you call "Dom.getXY" after setting
        the position?

        If you really just want to animate the "top" and "left" attributes, you
        don't need to use Motion. The "points" attribute of Motion maps to page
        coordinates, while top and left work within the element's positioning
        context (based on offsetParent).

        Matt
      • Prashant Nair
        Hey Matt, Thank you for your response. Here is what I was attempting to do: Expand a div and while expanding it move it left and up. This would five the
        Message 3 of 3 , Feb 28, 2007
        • 0 Attachment
          Hey Matt,

          Thank you for your response.

          Here is what I was attempting to do: Expand a div and while expanding
          it move it left and up. This would five the illusion that the div is
          projecting outwards.

          The problem was that I was using obj.style.left to get the left and
          similarly the top coordinate (I'm using inline style). This was causing
          a 2px difference in IE (I'm not sure why). But after reading your
          comment I realised that I could use getXY to get the initial
          coordinates. And it works just fine.

          Thank you much. Fellow developers like you make this forum a great
          place.

          Regards
          -Prashant
        Your message has been successfully submitted and would be delivered to recipients shortly.