Forum How do I...?

Moving Element and Reserved Space for Coherent Wrapping

caylan
I know how to relatively position a div. I understand how to float right. Is it possible to relatively position a floated div upward and move with it the reserved space for text wrapping? In the attached image I want to move the red box upward 75px and have the paragraph above rewrap. Is this possible?
  1. DIV Movement.png48.9 kB
mikeday
No, neither positioning nor floats work like that. You will need to move the float up in the markup itself. Possibly you can use JavaScript for this, if you cannot change the actual input document.
caylan
Whoa, scary-cool. I can imagine the pseudo code for that... but I'm not a javascript expert.

for each note within chapter (in reverse order)
   remove note from content
   insert note at beginning of chapter


Mike - or anyone else, can you supply some basic javascript to achieve this?
mikeday
What is the markup you are using for your notes and chapters?
caylan
Hi Mike - I can post it, but it needs work to get the DOM usable for this job. What I'm most stuck on is the JS accessor and insert methods for the DOM and where this JS function would go. We can assume something like...

<div id="chapter1" class="chapter">
  Text
  <div id="note1" class="note">My Note</div>
</div>
mikeday
Here is a nice clunky solution:
<script>
function moveNotes(chapter)
{
    var notes = [];

    for (var node = chapter.firstChild; node; node = node.nextSibling)
    {
        if (node.nodeType == node.ELEMENT_NODE && node.className == "note")
        {
            notes.push(node);
        }
    }

    notes.reverse();

    for (var i = 0; i < notes.length; ++i)
    {
        chapter.removeChild(notes[i]);
        chapter.insertBefore(notes[i], chapter.firstChild);
    }
}

function init()
{
    for (var node = document.body.firstChild; node; node = node.nextSibling)
    {
        if (node.nodeType == node.ELEMENT_NODE && node.className == "chapter")
        {
            moveNotes(node);
        }
    }
}

window.onload = init;
</script>

You can keep it in a <script> element and run Prince with --javascript enabled, or place it in an external script file and use the --script=file.js option.