search

ovidiuch / dragdealer

Drag-based vanilla JS component
http://ovidiuch.github.io/dragdealer
MIT License
1.05k stars 149 forks source link

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

Open JuhQ opened 9 years ago

JuhQ commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 notifications@github.com 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 https://github.com/skidding/dragdealer/issues/97#issuecomment-115337558.

Best regards, Ovidiu Cherecheş

JuhQ commented 9 years ago

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