splitting a single string ( regular text, no HTML ) between 3 div's

Question

So I managed to stumble upon a frustrating problem.

I need to split a string between 3 div's ( they are not equal in height therefor can't split the string according to character count).

I created a little sketch to display the exact layout.

Here is my sketch:

String comes from a database and user ( admin ) can change it in the admin panel. Admin can also choose a different layout and therefor I can't simply let him enter the values in to 3 different columns in the database.

I have searched for the answer but nothing so far.

div's are fixed ( as in their height and width is fixed ) but the content ( coming from a single string ) needs to get divided between them. — user2831723, Jan 07 '14 at 11:19
most likely, but im not sure if it would help on this case since divs are different — user2831723, Jan 07 '14 at 11:22
Might help: http://alistapart.com/article/crosscolumn - Found from another answer on SO. — techfoobar, Jan 07 '14 at 11:25

Ravindra Gullapalli · Answer 1 · 2014-01-07T11:28:08.547

0

Try to use a delimiter (separator) atleast like [div1 content]~[div2 content]~[div3 content] if you can not add in three different columns.

In javascript, you can use split function to get the content of three divisions separately now.

If you want to use as separator, then

var div1Content = myContent.split("<div")[0];
var div2Content = "<div" + myContent.split("<div")[1];
var div3Content = "<div" + myContent.split("<div")[2];

edited Jan 07 '14 at 11:28

answered Jan 07 '14 at 11:18

Ravindra Gullapalli

9,049
3
48
70

Can i use div as a separator then ? – user2831723 Jan 07 '14 at 11:24
Yes ofcourse. Just use split("
– Ravindra Gullapalli Jan 07 '14 at 11:26

GrahamTheDev · Answer 2 · 2014-01-07T11:43:02.497

http://jsfiddle.net/Tmqym/

$("#b").scrollTop($("#a").innerHeight());
$("#c").scrollTop($("#a").innerHeight() + $("#b").innerHeight());

Thats the hack part :-D

Columns MUST be same width AND height of div MUST divide by line-height with no remainders.

Also you need to add a BUCKET-LOAD of <br/> to the end of your content to prevent the third box from not being able to scroll up far enough!

If any of your layouts use different width divs then this won't work - but as long as they are the same widths as each other heights are irrelevant.

mehmatrix · Answer 3 · 2014-01-07T13:59:06.530

After you recieve the text in page you can simply modify it by javascript. Here i made two examples for you.

http://jsfiddle.net/J5H4c

$(document).ready(function(){

//If you use elements as seperators
var htmlHolder = $(".htmlHolder");
htmlHolder.find("div").each(function(index){

    var html = $(this).html();
    $(".target_column"+ index).html(html);       
});

//If you dont use elements as seperator
var htmlHolder2 = $(".htmlHolder2");
var data = htmlHolder2.html().split("--");
for(var index in data){

    var html = data[index];
    $(".target2_column"+ index).html(html);        
};

});

You can develop this.

EDIT:

If you have no seperator use this:

http://jsfiddle.net/Wwp28/

It divides the text by number of column.. you can change division rule by your needings.

this still requires some sort of separator, however I won't have any separators I could rely on. ( referring to your 2nd example ). Only way I could do this is when i could give it some char count for first div , another char count for 2nd div and yet again another char count for 3rd div and separate them according to that. — user2831723, Jan 07 '14 at 12:46

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

I'm not sure how I missed it earlier but here is a Perfect answer already to my question. it transfers the overflow to another div :)

Transfer overflow from one div to another

BR's

edited May 23 '17 at 10:32

Community

1
1

answered Jan 07 '14 at 13:19

user2831723

832
12
25

splitting a single string ( regular text, no HTML ) between 3 div's

4 Answers4