Question

I’d like to be able to move an image and type in a div on the same screen, and have the text wrap around the image as it is being moved. So far I’ve been able to do this:

http://jsfiddle.net/uk6DA/

But when the image is moved, the text does not change its position. How might the text get readjusted as the image is moved?

Answer 1

I think this all has to do with placement within the DOM.

If you’re serious about doing something like this, I think you’re going to have to find where the element sits when you move it, then change its place in the DOM based on that. You’ll probably want to put the text in an element too.

So, in the beginning, #typer preceeds the text. But when you move it, you’re going to have to do a couple of things. You’ll have to see where the left and top edges of #typer sit, and what text they sit on top of. Then, you’ll have to make calculations to modify them within the DOM from there.

I’m guessing you’ll either have to add a bunch of span‘s or div‘s to the text, to be able to recreate the text appropriately, to fit around the element. This would get a bit difficult too, because the lengths aren’t fixed, they’re dynamic. With the text inside a div or span, you won’t get the “wrap-around” to the side of the page, it will just fall down to the next line within that element.

Initial Setup

After Movement

That should explain how you’re going to have to split them up. It may get pretty complicated, but you can do it. You’ll just have to mess with different types of measurements. I’ve done things very similar to this in the past.

Basically, just keep track of where you split the text (that’s why they have the IDs in sequential order), so you can join them. Measure how much space the text takes up, how much space the image takes up, and how large the canvas area you can work with is.

From there, you should have a pretty good gauge of what to do. Just make sure that your text doesn’t break to the next line if it overflows. If that happens, it’ll break and ruin the illusion.

So, as far as placement in the DOM goes:

Initial Setup

<div id="typer">
    <img id="img" />
    <div class="text"> ..... </div>
</div>

After Movement

<div id="typer">
    <div class="text" id="text1"> ... </div>
    <div class="text" id="text2"> ... </div>
    <div class="text" id="text4"> ... </div>
    <div class="text" id="text6"> ... </div>
    <div class="text" id="text8"> ... </div>
    <img id="img" />
    <div class="text" id="text3"> ... </div>
    <div class="text" id="text5"> ... </div>
    <div class="text" id="text7"> ... </div>
    <div class="text" id="text9"> ... </div>
    <div class="text" id="text10"> ... </div>
</div>

That’s going to be the “easiest” route to set it up for the CSS too, unless you position: absolute; everything, which can work too.