#1
  1. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    61

    Issues moving an image using jQuery


    So I have a puzzle page, which you can see here In this case (mate in 3), every time you make a correct move, the server responds back with the next move. Right now, it does so by simply removing the contents of the cell and writing it to the new square. Crude, but it's worked.

    I hate it! I would prefer if the server responds by sliding the piece to the new square. So I came up with the following jQuery example. I have a piece in a div and I'm sliding that div a set amount. Obviously this is just a test. The main problem is that the piece is in a div and just floats on top of the table. Therefore, when it gets to one or the other end, you'll notice that it's not centered within the table div. It's off slightly. I was thinking about at the end of the animation quickly erasing and rewriting the div in the table cell, thus centering it. However, I don't think it should be this hard. Any ideas what I'm doing wrong? Thanks in advance.
    Correspondence chess
    nothingbutchess.com
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Why are you moving it 47px at a time? Wouldn't 43px make more sense, since the width of each cell is 42px and they have a 1px border between them?

    What I might do is not keep the pieces in the cells at all. I might absolutely position them on top of the table and that way you can calculate their positions form a common fixed point instead of from where each started the way you'd be doing using relative positioning.

    Also I recommend you consider setting the cursor property for the pieces, so that it's more obvious you can click on them.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    61
    Well that's the thing. Since I'm moving it 47px at a time and the image is only 42px wide and the squares are 42px, there's something off. I just can't see what. I could, for each square, store a coordinate. So when it's time for me to move a piece to, a5, for example, I know exactly the coordinates for that square. I can do that whether positioning the piece relatively or absolutely. This potentially brings up another issue. The positions look great in these three browsers, but for these two browsers you have to adjust your coordinates ever so slightly. For these mobile browsers, the coordinates are all off and I can easily see myself having coordinates for each square and for various browsers. Every time a new browser comes out, it'll be up to me to get my hands on it and confirm that the coordinates work.

    If the image itself without the div was in the cell, then there would be no issues. That's what I do now. I cut the image out of the cell and write it to the new location. As a compromise, what I might do is animate it being cut out. A slow fade maybe. But it would be nice to have a clean solution for this issue.
    Correspondence chess
    nothingbutchess.com
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Huh? It sounds like you have a reason but you haven't made it clear what it is. Please be specific about which browsers you are talking about.

    Are you perhaps referring to a gap under the images appearing in some browsers?
    That mysterious gap under images
    Images, Tables, and Mysterious Gaps

    If that's not it, then I suggest you try using "table-layout:fixed".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    61
    Sorry for not being clear. So here's the deal. Right now I've set each square to 42px. The border for each cell is 1px wide. So logically, moving the piece 43px each time should recenter things, correct? However, if you start moving the image to the right, you'll notice that by the end, it's off.

    However, as I'm talking to you I think I see the issue. I'm setting the square to 42 pixels, but I'd say each square is more like 46 pixes. Let me see if I can get it to actually be 42pixels and if that will help.
    Correspondence chess
    nothingbutchess.com
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Oh. Yeah, I see what you mean. Try setting the width and height of the table to 344px. The larger width and height were causing the table cells to be stretched bigger than their set dimensions.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    61
    Ok, I locked the table down so that each square is 43px (gave an extra pixel to give it some room) and I now move it 43 pixels each time. It looks pretty good in Safari and Chrome on a Mac and my Safari browser on my iPhone. I guess you have no choice but to float the image over the board. Technically I could move the piece, then at the end of the animation quickly write it into the current td to make sure it's perfectly centered every time. Maybe I'll try that and see what that looks like.
    Correspondence chess
    nothingbutchess.com

IMN logo majestic logo threadwatch logo seochat tools logo