threadingText

threadingText is a JavaScript jQuery plugin to enable thread text in HTML. With a responsive web design and dynamic content using thread text is hard to achieve; here is where threadingText comes into play.

Contents

• What is threadingText?
• Usage Example
• Donation
• TODO
• See also
  • Multi-Column-Layout
  • CSS Regions

What is threadingText?

The jQuery plugin threadingText provides a nice way of dynamically associate and fill HTML in pre-defined text containers and cut overlapping text with a specified ending symbol (default is " ...") or create new text containers according to a specified prototype text container if text would exceed provided space.

The implementation uses a binary text length search to divide the HTML among the text containers provided. While doing so it tries its best to repair any HTML tags beeing broken while threading the HTML in the text containers.

Additionally many code hooks are provided, where you can interfere in the layouting process and adjust the results in any way.

• startLayout
  • Global layout start.
• endLayout
  • Global layout finished.
• startLayoutTextElement
  • Start layout current text element.
• endLayoutTextElement
  • End layout current text element.
• createCloneTextElement
  • Text element cloned.

Usage Example

<script>
        var startTime;

        function startLayouting(textElements, text) {
            startTime = new Date().getTime();
        }

        function finishedLayouting(textElements, text) {
            console.log("Finished layouting in " + (new Date().getTime() - startTime)
                + "ms.");
        }

        function doLayout() {
            // select all predefined text container
            $(".textContainers").threadingText( {
                // listener function when starting
                startLayout : startLayouting,
                // listener function when finished
                endLayout : finishedLayouting
            });
        }
</script>

Check example1.html, example2.html and example3.html for further usage examples.

Donation

If my code proved useful for you, you might want to consider to send a small donation via PayPal.

TODO

• Tag version
• Make QUnit tests reliable
• More tests
• Integrate jshint and code coverage

See also

Multi-Column-Layout

There is a multi column layout coming up with CSS3.

CSS Regions

You may want to take a look on CSS regions, but the browser support is limited and many browser manufacturers dropped the feature from their roadmap completly. Nevertheless there is a nice CSS regions polyfill lib from Adobe.