SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Chambéry (France)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    offsetX in Mac (X library)

    Hello,

    I'm still using the X library with great pleasure.
    The problem is that it isn't totally compatible with IE on Macintosh OS's.
    In my case, I need to get mouse events and catch the mouse location relatively to an element.

    To do that I call the xEvent function and the offsetX property. The value ain't correct in mac and I think I have the reasons of this mistake. It's explain there :
    http://www.macdevcenter.com/pub/a/ma...ng.html?page=3

    IE on mac don't listen to the scrolling events.
    Thus, for the Mac version, you must add back the document.bodyscroll values to the event coordinates:
    I don't really know how to add it (to the xEvent function) without any troubles. Do I have to add a test for IE mac to determine the offsetX value ?

    Thanks for answers.
    Have a goot day.

    Pierre GIRAUD

  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)
    Great link, thanks. I always enjoy Danny's articles.

    I don't know if I want to add any more browser-detection to the library - it uses more than I want now. But, 'if' I were going to I might first try something like the following.
    Code:
    var xMac = (xUA.indexOf("mac")!=-1);
    
    function xEvent(evt) {
      this.type = '';
      this.target = null;
      this.pageX = 0;
      this.pageY = 0;
      this.offsetX = 0;
      this.offsetY = 0;
      this.keyCode = 0;
      var e = evt ? evt : window.event;
      if(!e) return;
      if(e.type) this.type = e.type;
      if(e.target) this.target = e.target;
      else if(e.srcElement) this.target = e.srcElement;
      if(xOp5or6) { this.pageX = e.clientX; this.pageY = e.clientY; }
      else if(xDef(e.clientX,e.clientY)) { this.pageX = e.clientX + xScrollLeft(); this.pageY = e.clientY + xScrollTop(); }
      //
      if(xDef(e.offsetX,e.offsetY)) { this.offsetX = e.offsetX; this.offsetY = e.offsetY; }
      else { this.offsetX = this.pageX - xPageX(this.target); this.offsetY = this.pageY - xPageY(this.target); }
      //
      if (xIE && xMac) {
        this.offsetX += xScrollLeft(); //document.body.scrollLeft;
        this.offsetY += xScrollTop(); //document.body.scrollTop;
      }
    
      if (e.keyCode) { this.keyCode = e.keyCode; } // for moz/fb, if keyCode==0 use which
      else if (xDef(e.which)) { this.keyCode = e.which; }
    }

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just an FYI, which maybe you already know, but in mac/ie5 if you do a recursive offsetLeft/offsetParent to find the true co-ordinates of an object, the number that comes back will be incorrect by an inverse of the page's body margins - not CSS margins, but the leftMargin and topMargin properties of the respective <body> attributes.

    You can work around it with CSS margins though - set the margin on BODY and HTML to 0 so the problem doesn't manifest.

  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)
    Thanks Bro!

    I don't have a Mac, so that's some very handy info

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Third Stone From The Sun
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake
    Just an FYI, which maybe you already know, but in mac/ie5 if you do a recursive offsetLeft/offsetParent to find the true co-ordinates of an object, the number that comes back will be incorrect by an inverse of the page's body margins - not CSS margins, but the leftMargin and topMargin properties of the respective <body> attributes.

    You can work around it with CSS margins though - set the margin on BODY and HTML to 0 so the problem doesn't manifest.
    This happens with absolutely positioned elements. The problem is that the absolutely positioned element will use the root node as the containing block, but the offsetLeft/Top is calculated from the position relative to the body.

    Yep, and there's 2 ways to fix it.
    1 -
    HTML Code:
    body { 
       margin: 0;
    }
    2 -
    HTML Code:
    body {
        position: relative;
    }
    My outdated site is down for a while now.

  6. #6
    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)
    Somethin's always cookin in the kitchen Thanks!

    This thread should be in a "cross-browser tips" faq

  7. #7
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed - thanks for the alternative solution

    Have you ever MSN for OSX? I've found that library functions are breaking in it - MSN implements doctype switching, but in compliant mode document.documentElement.offsetHeight returns 0, and in quirks mode document.body.scrollTop returns 0 ...


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
  •