4

Let's assume I have a very long text, for instance an long article.
Is it possible to to break the text into equaly long div elements on client-side with:

css (this would be awesome!) ? javascript ?

The goal: I'd love to have those divs side by side with float.

- I know it is possible from server side, since I have written something that does exactly what I want in PHP. [If anyone is interested just say a word]

jakschu
  • 127
  • 10

1 Answers1

3

You could do something like this...

var a = $('#text').text().split(' ');
var b = c = d = e = '';

var b = a.length/3;

if((a.length % 3) > 0){
    a.push(' ');
    b = a.length/3;

    if(b*3 % 3 > 0){
        a.push(' ');
        b = a.length/3;

        if(b*3 % 3 > 0){
            a.push(' ');
            b = a.length/3;

            if(b*3 % 3 > 0){
                a.push(' ');
                b = a.length/3;            
            }
        }
    }    
}


for(var i = 0; i < b; i++){
   c += a[i] + ' ';
}

for(var j = b; j < b*2; j++){
   d += a[j] + ' ';
}

for(var k = b*2; k < b*3; k++){
   e += a[k] + ' ';
}

$('#text').replaceWith('<div class="replace">' + 
                       c + '</div><div class="replace">' + 
                       d + '</div><div class="replace">' + 
                       e + '</div>');

And the css

.replace{
    float:left;
    margin:1%;
    width:30%;        
}

Example: http://jsfiddle.net/jasongennaro/NsdST/2/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • Your code looks really nice. I will check it out. But is there a way of making it more modular? - Sorry, I must admit my JS knowledge is rather limited. How can it be extended to make the text 2,4,5... columns? – jakschu Nov 16 '11 at 04:01
  • @jakob I adjusted the code above to make sure it works, even when the number of words is not easily divisble by 3. Making it more modular? It can be done, but not as I have written it right now. – Jason Gennaro Nov 16 '11 at 04:26