Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xPageY] offsetTop bug?

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 October 26, 2009 8:42:09 pm

ericj
Member
From: Seattle, Washington
Registered: February 15, 2008
Posts: 58
Website

[xPageY] offsetTop bug?

Mike:

Can you take a look at this?  I'm getting is an incorrect value from xPageY.  Overall what is happening is I am making a relatively positioned element (trading cards) draggable:

you click on a trading card in the "Your Deck" window
it saves the current xPageX and xPageY
it removes the element from the DOM
it reattaches the element to document.body
it sets position to absolute
it sets Left and Top to the previously saved values from xPageX and xPageY

It works correctly in IE and Opera.  In Firefox, Safari, and Chrome we get the wrong value for xPageY and so when we start dragging, the element is offset from the mouse cursor when it should actually be under the mouse cursor.

Repro site:  http://68.178.240.17/deckPlayer/mike.htm

Thanks a million,
- ej

Last edited by MikeFoster (November 13, 2009 9:40:50 pm)

Offline

 

#2 October 27, 2009 4:29:47 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

Hi Eric,

I'll dig into it this evening.

Offline

 

#3 October 28, 2009 8:18:44 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

At first I thought it might be related to those negative margins, or the element's being 'inline' - but I'm not sure now. I'm wondering if the element which contains the two images is the problem - it is not the same size as the images and I think their upper-left corners are not at the same position. I'll look more when I get a chance today.

Offline

 

#4 October 28, 2009 9:01:59 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

I think I may have found something. It appears related to those containers having display:inline, which causes them to not be 75x106 in size.

Offline

 

#5 October 28, 2009 9:24:30 am

ericj
Member
From: Seattle, Washington
Registered: February 15, 2008
Posts: 58
Website

Re: [xPageY] offsetTop bug?

Cool, that would be great to get fixed, I frequently run into the problem.

Say, DID YOU KNOW that you can open a socket in Flash?  This was news to me, but apparently gamers have been doing it for years.  There's a legitimate, cross-browser way to open a socket in Flash on the client, and therefore one can do genuine push from the server.  I've messed with it a little, it is awesome, truly.

For instance in the repro page I sent you, that's a game I will be using it on to send JSON messages directly from client to client.  It goes through the server, but it just slides through the socket, there's no load or processing on the server. 

There are socket servers apparently for around $750 that will handle 50,000+ connections on a single server.

- ej

Offline

 

#6 October 29, 2009 7:48:15 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

Say, DID YOU KNOW that you can open a socket in Flash?



Yes, but I've only played around with it just a little. Very interesting, I look forward to seeing what you do with it!

Offline

 

#7 October 29, 2009 8:29:09 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

Regarding the offsetTop issue, I haven't found anything conclusive, but I will look into it more when I can. As you know, xPageY is very simple, it just walks up the offsetParent chain and sums the offsetTop values, so there's not much else that could be done with that.

Even tho IE originated the offsetLeft/offsetTop properties, they have never quite got offsetTop right. Whenever we think IE is right and standards-compliant browsers are wrong, we need to stop right there and realize that the reverse is probably true. Firefox is telling us that we are doing something questionable.

I think the value we are getting from xPageY is correct, but it seems that the element in question (the one that contains the card and shadow images) is not the same size as the card image and its upper-left corner is not coincident with the card image's upper-left corner. I think this is related to it having display:inline and overflow:visible and having no content (until the images load). In my experience, inline elements do not make good "containers".

As for a solution, my suggestion is that you use absolute positioning on the cards, instead of static/inline/marginRight. This should make us wonder if we can trust xPageY for inline elements... I don't know, more testing needs to be done on this.

A secondary suggestion would be to let the containers have display:block and "float" them to the left - altho I think the first suggestion leads to a more robust solution.

This is some awesome work. Thanks very much for showing it to us!

Offline

 

#8 October 29, 2009 11:00:01 am

ericj
Member
From: Seattle, Washington
Registered: February 15, 2008
Posts: 58
Website

Re: [xPageY] offsetTop bug?

Mike:

Can you show me how you would float blocks to the left, as you suggested in your response?  That's what I tried first, but I could not get it to work in FireFox, keeps being a column of blocks instead of floating left.

- ej

Offline

 

#9 October 30, 2009 8:32:53 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

Give this a try. You can run it by selecting "Load" from the code menu.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Template</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
/* for the demo */
#parent {
  position: relative;
  width: 500px;
  height: 100px;
  padding: 10px;
  background-color: #CCC;
}
.child {
  float: left;
  margin-right: -40px;
  width: 50px;
  height: 100px;
  background-color: #009;
  border: 1px solid #FFF;
}
/* for the page template */
html, body {
  color:#000;
  background:#fff;
  font-size:small;
  font-family:verdana,arial,helvetica,sans-serif;
}
body {
  min-width:750px;
  text-align:center; /* to center Page in IE6 */
}
a {
  color:#339;
  text-decoration:none;
}
a:hover {
  color:#fff;
  background-color:#339;
  text-decoration:none;
}
h1 {
  color:#009;
  font-size:225%;
  font-weight:bold;
}
h2 {
  font-size:166%;
  font-weight:bold;
}
h3 {
  font-size:133%;
  font-weight:bold;
}
h4 {
  font-size:100%;
  font-weight:bold;
}

#Page {
  margin:1em auto; /* to center Page in modern browsers */
  width:750px;
  text-align:left; /* to keep body's "text-align:center" from being inherited */
}
#Header {
  padding:.5em 2em;
  background:#ccc;
}
#Header h1 {
}
#Header p {
  padding:.2em 0;
}
#NavBar {
  background:#ddd;
  padding:.2em 2em;
}
#NavBar ul {
  list-style:none;
}
#NavBar li {
  display:inline;
  margin:0 .6em 0 0;
}
#NavBar li a {
  font-size:smaller;
}
#Main {
  padding:1em 2em;
  background:#eee;
}
#Footer {
  padding:.2em 2em;
  background:#ccc;
}
</style>
<script type="text/javascript" src="../x/x.js"></script>
<script type="text/javascript" src="../x/lib/xenabledrag.js"></script>
<script type="text/javascript" src="../x/lib/xconsole.js"></script>
<script type="text/javascript">
window.onload = function() {
  var i, e, p = xGetElementById('parent');
  for (i = 0; i < 20; ++i) {
    e = document.createElement('div');
    e.className = 'child';
    p.appendChild(e);
    xEnableDrag(e, onDragStart);
  }
};
function onDragStart(ele) {
  var x = xPageX(ele), y = xPageY(ele);
  document.body.appendChild(ele);
  ele.style.float = 'none';
  ele.style.position = 'absolute';
  xMoveTo(ele, x, y);
  xConsole.log('x:' + x + ', y:' + y);
}
</script>
</head>
<body>

<div id="Page">
  <div id="Header">
    <h1>Template</h1>
    <p>Single Column, Simple Layout</p>
  </div>
  <div id="NavBar">
    <ul>
      <li><a href="">Option 1</a></li>
      <li><a href="">Option 2</a></li>
      <li><a href="">Option 3</a></li>
    </ul>
  </div>
  <div id="Main">
    <h2>H2 Heading</h2>
    <div>
      <h3>H3 Heading</h3>
      <div>
        <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <p>Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
      </div>
      <h3>H3 Heading</h3>
      <div>
        <h4>H4 Heading</h4>
        <div>
          <div id='parent'></div>
        </div>
        <h4>H4 Heading</h4>
        <div>
          <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.</p>
          <p>Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="Footer">
    <p>Footer</p>
  </div>
</div>

</body>
</html>

Offline

 

#10 October 30, 2009 8:50:23 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xPageY] offsetTop bug?

I didn't think about this before, but a nice feature of using "float" is that when one card is removed the others shift left to fill in the empty space.

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load