this.handle.offsetWidth is zero sometimes and this causes problems

[JuhQ]

I have a scenario where the handle is an image. Sometimes it takes a while to load that image and those times the handle is calculated outside of the container element.

For me, the fix was to set the handle image a width in css.

I'm not sure what the best approach for this would be, maybe mention this css width workaround in the docs?

One possible solution could be to check if the handle has an image in it, wait for it to load until calculating? But then again that would be a problem if the image is a css background for example.

Do you guys have any ideas for this?

[ovidiuch]

I get your scenario, but I think it's outside the scope of Dragdealer to preload images.

Dragdealer does indeed calculate the handle boundaries on initialization, and does not update if the contents of the handle change afterwards.

You don't necessarily need to set the width/height through css, though. You can set the width/height on the DOM element directly. From what I remember, it is a general HTML best practice to always provide width/height to img tags, because it allows the browser to draw the containers properly, without first downloading the pictures, which makes the user experience less flickery.

[JuhQ]

Sure I understand that, but a lot of the time img tags will not have width/height set, either by css or attributes. In my opinion there should at least be a side note about this in the docs to remind people to use width/height when using images as handles.

This would have save me some hours of debugging.

[ovidiuch]

Can you think of a place in the current docs where you would place the
notice? Feel free to contribute. I can help with the wording.

On Thursday, June 25, 2015, Juha Tauriainen [email protected]
wrote:

Sure I understand that, but a lot of the time img tags will not have
width/height set, either by css or attributes. In my opinion there should
at least be a side note about this in the docs to remind people to use
width/height when using images as handles.

This would have save me some hours of debugging.

—
Reply to this email directly or view it on GitHub
#97 (comment).

Best regards,
Ovidiu Cherecheş

[JuhQ]

Sure! I'll try to get something for you during the weekend :)