How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?


Tags: javascript,html,css

Problem :

I have already tried two approaches that don't seem to work: 1) I measured the total number of words and divided that by 2, but problems arise when there are really long words, and not all words are the same length, etc. 2) I measured the height in pixels of each character, the clientHeight of entire body of text, and divided the total height of the text by the height of one character to see how many lines go in one column and how many go in the other. This approach works really well except when an images, paragraphs, and other HTML tags need to be factored in.

I need to come up with a new approach that take images and other HTML tags into account, and I can only use HTML, CSS, and JavaScript (no JQuery, JSON, Ajax, etc). Let me know if you have an idea/algorithm! Thanks :)



Solution :

I created a quick and dirty "hack" for you on JSFiddle http://jsfiddle.net/uWUBE/

Hope it helps you out, you could edit it to be more dynamic. Here is some of the code. It basically loops trough the amount of words and then adds it to a string you assign to a column, I am not a Javascript mastermind at all so.. there might be a better way.

`

//  Get the text
var txt = $("p").text();
//  Split every word
var words = txt.split(" ");
//  Count the amount of words
var amount = words.length
//  Amount of columns
var columnAmount = 2

//  Amount of words in first colum 
var firstColumn = Math.floor(amount / columnAmount);

//  String for first column
var firstColumnTxt = "";
//  String for second column
var secondColumnTxt = "";

//  loop trough the words and add them to the first column
for (var i = 0; i < firstColumn; i++){
    firstColumnTxt =     firstColumnTxt + " " + words[i]; 
}
//  loop trough the words and add them to the second column
for (var i = firstColumn; i < amount; i++){
    secondColumnTxt =   secondColumnTxt + " " + words[i];
}

// Add this to your first column
console.log(firstColumnTxt);
//  Add this to your second column
console.log(secondColumnTxt);

`


    CSS Howto..

    How do I use the Bootstrap form select css with a Rails model?

    How to smooth emboss in css

    How to 'clip away' part of a div using CSS?

    How can I fix left menu in bootstrap 3.0? [closed]

    Refactor link to show/hide a table row

    how to add a different css to last mysql query result using php

    How to insert / edit / group css rules faster?

    How to make a div fade on hover?

    How to center absolute div (text) above relative div (image) responsively?

    How to disable caching of static assets like .css and .js in JSF2?

    How to get inline style that was overridden by CSS !important using JavaScript

    How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?

    how to make div fixed and ot move upon window resize

    How to set continuous box-shadow through all inline-block centered li elements

    How to set angular json model into css

    How can I adjust the margins of quote symbols added with CSS

    how to make CSS animation to play every 10 seconds

    How to exclude last child in css psuedo class selector

    How to override CSS for TextBoxFor field?

    Messed up slides in custom minimal JS/CSS slideshow

    How to combine css selectors

    How to apply styles to an element with a prefixed ID?

    How to make footer not overlap and positioned properly?

    How to break up long words but leave out short ones?

    How to replace only the text of this element with jQuery?

    How to create a box when mouse over text in pure CSS?

    How to make the green DIV fit right after 2 upper divs?

    How to make this image blur with css

    How to solve placeholder CSS difference across different browsers?

    How to change menu icon when scrolling to specific sections of the website?