Enable the text to wrap around an interactive object that the user can freely manipulate

Question

Enable the text to wrap around an interactive object that the user can freely manipulate

Looking for a solution where I can have a floating div that can be moved up and down using javascript while the text wraps around it seamlessly.

Similar to how an object positioned in a word document behaves, I want the text to flow around the div both above and below it as needed.

After some research, it seems that achieving this effect is only possible if the div is contained within the same parent element as the text. Moving the div up and down would involve repositioning it within the text itself, such as moving a sentence from behind to in front of the div.

Attempts like using top margin only extend the block the text wraps around, while using position relative results in the text flowing around the div's original position and the div overlapping the text. This makes it challenging to achieve the desired outcome.

Are there any HTML/CSS techniques or plugins available that could help achieve this effect as described?

Thank you.

javascript html css css-float

Answer 1

Answer №1

Marcel's suggestion is quite intriguing, actually.

I may feel inclined to tweak it slightly to get a close approximation, as it is straightforward and takes you part of the way there.

Check out the link here

var img = $('#whale');
var nextP = img.next();
var previousP = img.prev();

$('#move-down').click(function() {
    nextP = img.next();
    img.detach();
    img.insertAfter(nextP)
});

$('#move-up').click(function() {
    previousP = img.prev();
    img.detach();
    img.insertBefore(previousP)
});

The code essentially involves moving the image between the paragraphs. In the fiddle, I also floated the image to give it a somewhat expected appearance. :)

Answer 2

Marcel's suggestion is quite intriguing, actually.

I may feel inclined to tweak it slightly to get a close approximation, as it is straightforward and takes you part of the way there.

Check out the link here

var img = $('#whale');
var nextP = img.next();
var previousP = img.prev();

$('#move-down').click(function() {
    nextP = img.next();
    img.detach();
    img.insertAfter(nextP)
});

$('#move-up').click(function() {
    previousP = img.prev();
    img.detach();
    img.insertBefore(previousP)
});

The code essentially involves moving the image between the paragraphs. In the fiddle, I also floated the image to give it a somewhat expected appearance. :)

Answer 3

Answer №2

I worked on a solution that involves moving an element through text by checking offsetTop to detect when it moves to a new line (I focused on downward motion only). My intention was to further develop this to handle multiple calls when dragging an element, but the complexity increased as it would require accounting for nested elements. Since it seems that HTML will eventually support this functionality, I have decided to accept Tom's solution.

function down(el) {
    var parentDiv = el.parentNode;
    var next = el.nextSibling;
    var prev = el.previousSibling;
    var match, word;

    var offset = el.offsetTop;

    while ((match = /^\s*\S+\s*/.exec(next.nodeValue)) !== null && el.offsetTop === offset) {
    word = match[0];

    if (prev === null) {
        prev = parentDiv.insertBefore(document.createTextNode(''), el);
    }

    prev.nodeValue += word;
    next.nodeValue = next.nodeValue.substring(word.length);
    }

    if (el.offsetTop !== offset) {
    return;
    }

    var nextDiv = findNextDiv(parentDiv);

    if (nextDiv === null) {
    return;
    }

    parentDiv.removeChild(el);

    if (nextDiv.firstChild === null) {
    nextDiv.appendChild(el);
    }
    else {
    nextDiv.insertBefore(el, nextDiv.firstChild);
    if (el.offsetTop === offset) {
        down(el);
    }
    }
}

function findNextDiv(el) {
    var next;
    while ((next = el.nextSibling) !== null) {
    if (next.tagName === 'DIV') {
        return next;
    }
    el = next;
    }
    return null;
}

Answer 4

I worked on a solution that involves moving an element through text by checking offsetTop to detect when it moves to a new line (I focused on downward motion only). My intention was to further develop this to handle multiple calls when dragging an element, but the complexity increased as it would require accounting for nested elements. Since it seems that HTML will eventually support this functionality, I have decided to accept Tom's solution.

function down(el) {
    var parentDiv = el.parentNode;
    var next = el.nextSibling;
    var prev = el.previousSibling;
    var match, word;

    var offset = el.offsetTop;

    while ((match = /^\s*\S+\s*/.exec(next.nodeValue)) !== null && el.offsetTop === offset) {
    word = match[0];

    if (prev === null) {
        prev = parentDiv.insertBefore(document.createTextNode(''), el);
    }

    prev.nodeValue += word;
    next.nodeValue = next.nodeValue.substring(word.length);
    }

    if (el.offsetTop !== offset) {
    return;
    }

    var nextDiv = findNextDiv(parentDiv);

    if (nextDiv === null) {
    return;
    }

    parentDiv.removeChild(el);

    if (nextDiv.firstChild === null) {
    nextDiv.appendChild(el);
    }
    else {
    nextDiv.insertBefore(el, nextDiv.firstChild);
    if (el.offsetTop === offset) {
        down(el);
    }
    }
}

function findNextDiv(el) {
    var next;
    while ((next = el.nextSibling) !== null) {
    if (next.tagName === 'DIV') {
        return next;
    }
    el = next;
    }
    return null;
}

Enable the text to wrap around an interactive object that the user can freely manipulate

Answer №1

Answer №2

Similar questions

Trim the edges of a photo and add the Kinetic filter

Guide on utilizing fs.readStream and fs.writesream for transmitting and receiving video file (.mp4) either from server to client or vice versa using Node Js

Utilizing PHP Variables in Jquery Ajax Success Response

Creating a responsive design that adapts to various image sizes

Tips for setting a specific height for an HTML table

Tips on Updating Array Value with jQuery

Assigning values to props in a Vue component

`Is it possible to retrieve Wikipedia information directly from a Wikipedia link?`

Revolutionizing Zen Cart with slimMenu

When a specific condition is met, Jquery can automatically execute a function contained

Alter the value of a parameter within a script tag with JavaScript/jQuery

Unleash the full power of Angular Components by enhancing them with injected

Why isn't my li:hover responding the way it should?

Searching for a cake in CakePHP with autocomplete functionality

You cannot use a relative path when inserting an image tag in React

Fill various dropdowns with a list or array of values discreetly without displaying the populated values on the visible interface

Can you provide an example of JSON for a MultiStep Form that includes a variety of control types for viewing

Uncovering the Android tablet browser: A guide

Issues with splicing an Angular array using pure JavaScript

Using Angular routing without relying on a web server to load templates