Reflow Text in columns

OL Connect Enterprise Designer
1

I want to reflow text into other divs on the page, the text is a variable from data.

Thanks

Liam

2

Could you give a little more detail as to the nature of the data? Is it detail lines on an invoice? Or is it more like variable length letters where the body text is included in your datamapping?

If you want to upload sample data for us to take a look, that would be helpful. As always, the solution is going to be dependent upon the building blocks we have to work with.

3

Is there a way to do it? I also want to know if it`s possible to reflow text into another div.

I have variable text in a div. If there`s a textoverflow I want to have the overflow-text in another div.

4

The only way I have found works close is to use columns, but not ideal…

-moz-column-count:2
5

Hello,

maybe not the smartest solution but it works for one set of overflowing textboxes (easy to change the script to use it for multiple sets).

  1. Create a JavaScript file within the Connect Designer and paste the following code in it
for(var elements = 1; elements < 100; elements++){
    var element = $('#cont' + elements);
    var elementCont = element.html();
    if(!element.length){ break; }
    if( !$('#cont' + elements + ' p').length ){ element.html('<p>' + elementCont + '</p>'); }
        var el = element.attr('id');
        var elNext = elements + 1;
        elNext = 'cont' + elNext;
        overfl(el, elNext);
    }
}

function overfl(el, elNext){
    el = '#' + el;
    elNext = '#' + elNext;
    $(elNext).html('<p></p>');
    var cont1 = $(el);
    var cont1Height = cont1.height();
    var p1 = $(el + ' p');
    var p1Height = $(el + ' p').height();
    var p2 = $(elNext + ' p');
    var p1text = $(el + ' p').html();
    p1text = p1text.trim();
    p1text = p1text.split(' ');
    var p1text_neu = [];
    var p2text = [];
    $(el + ' p').empty();
    for(var i = 0; i < p1text.length; i++){
        $(el + ' p').append(p1text[i] + " ");
        if( $(el + ' p').height() < $(el).height() ){
            p1text_neu.push(p1text[i]);
        } else {
            p2text.push(p1text[i]);
        }
    }
    $(el + ' p').empty();
    for(var i = 0; i < p1text.length; i++){
        if(p1text_neu[i] != undefined){
            $(el + ' p').append(p1text_neu[i] + " ");
        }
    }
    for(var j = 0; j < p2text.length; j++){
        $(elNext + ' p').append(p2text[j] + " ");
    }
}

  1. Include the JavaScript file in the print section (http://help.objectiflune.com/EN/planetpress-connect-user-guide/1.6/#designer/Print/Print_Sections.htm)

  2. Just give your DIVs the ID “cont” + consecutive number.

For example: First DIV (with whole text in it) gets the ID cont1, next DIV (first target for overflowing text) gets the ID cont2 and so on. The code above allows up to 100 DIVs in one set (you can just change the iteration value from 100 to your prefered value).

Hope that helps,
Thomas

6

code with the possibility to add further sets.

schleife("cont");
schleife("inhalt");
//schleife("third_overflow_set");

/* ======================================================= */
function schleife(kennung){
    for(var elemente = 1; elemente < 100; elemente++){
        var element = $('#' + kennung + elemente);
        var elementCont = element.html();

        if(!element.length){ break; }

        if( !$('#' + kennung + elemente + ' p').length ){ element.html('<p>' + elementCont + '</p>'); }
    
        var el = element.attr('id');
        var elNext = elemente + 1;
        elNext = kennung + elNext;
        ueberlauf(el, elNext);
    }
}

function ueberlauf(el, elNext){
    el = '#' + el;
    elNext = '#' + elNext;
    $(elNext).html('<p></p>');
    var cont1 = $(el);
    var cont1Height = cont1.height();
    var p1 = $(el + ' p');
    var p1Height = $(el + ' p').height();
    var p2 = $(elNext + ' p');
    var p1text = $(el + ' p').html();
    p1text = p1text.trim();
    p1text = p1text.split(' ');
    var p1text_neu = [];
    var p2text = [];
    $(el + ' p').empty();
    for(var i = 0; i < p1text.length; i++){
        $(el + ' p').append(p1text[i] + " ");
        if( $(el + ' p').height() < $(el).height() ){
            p1text_neu.push(p1text[i]);
        } else {
            p2text.push(p1text[i]);
        }
    }
    $(el + ' p').empty();
    for(var i = 0; i < p1text.length; i++){
        if(p1text_neu[i] != undefined){
            $(el + ' p').append(p1text_neu[i] + " ");
        }
    }
    for(var j = 0; j < p2text.length; j++){
        $(elNext + ' p').append(p2text[j] + " ");
    }
}