4px left gap in dragged images

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

4px left gap in dragged images

TheWolf1
Resize your browser window so that it's small enough (like 800*600) then go to wolfcast dot com/illustration.php and click on any thumbnail.

When you drag the image you will see a left gap of 4px appearing...

Not sure where it comes from... Is that a bug, interaction with my site CSS??

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: 4px left gap in dragged images

mjijackson
Administrator
Hmm...not sure what the problem is here. Did you modify the CSS?
Reply | Threaded
Open this post in threaded view
|

Re: 4px left gap in dragged images

TheWolf1
No modifications...

Do you see the problem? You just have to drag an image (I'm at handleLgImages = drag) to see the gap appearing...

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: 4px left gap in dragged images

TheWolf1
In reply to this post by mjijackson
Are you able to see what I mean?
Reply | Threaded
Open this post in threaded view
|

Re: 4px left gap in dragged images

Wizzud
In reply to this post by mjijackson
@Michael

This problem has also been raised in the issue tracker (id 37) and I have added a comment to that issue that explains why it is happening, and how I fixed it.

From Issue 37 :

I can give you a reason/solution on this one because I've just found the same problem
and resolved it in my v1.0 code (@version SVN: $Id: shadowbox.js 75 2008-02-21
16:51:29Z mjijackson).

getDimensions() returns the width with extra_body_width added to it, ie. it adds in
shadowbox_body margins and borders.
When positionDrag() compares current_width with optimal_width they should be the same
(if width fits within the shadowbox!) but aren't because of these borders/margins
that are included in current_width but not optimal_width.
Because extra_body_width is presumably added to width for a good reason, I fixed this
by changing resetDrag() to add xAdj to the drag object, with xAdj containing the same
borders and margins from shadowbox_body; then I changed positionDrag() to subtract
drag.xAdj from current_width.

Example:
resetDrag() : appended...
var bdy = SL.get('shadowbox_body');
drag.xAdj = parseInt(SL.getStyle(bdy, 'border-left-width'), 10)
          + parseInt(SL.getStyle(bdy, 'border-right-width'), 10)
          + parseInt(SL.getStyle(bdy, 'margin-left'), 10)
          + parseInt(SL.getStyle(bdy, 'margin-right'), 10);

positionDrag() : changed...
drag.x = Math.max(Math.min(0, drag.x + move_x), current_width - optimal_width); // x
boundaries
...to...
drag.x = Math.max(Math.min(0, drag.x + move_x), current_width - drag.xAdj -
optimal_width); // x boundaries
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: 4px left gap in dragged images

mjijackson
Administrator
Thanks for your research into this. I fixed it in my code before I came back and read your post. You're correct in diagnosing and fixing this bug. Will be fixed in the next update.