• Register
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
Hi,

I want to set in5 to create "automatic" page height based on text length. Meaning some king of "responsive page design".

I have long text (size 12pt) fitted on screen width.
For wide desktop display it will take about 800px height.
For narrow mobile display it will take abut 2500 px height.

Is possible to use "liquid" page to automatic adjust page height...

Many thanks in advance, Klemen Lavrih
in how_to by (420 points)
    

2 Answers

0 votes
 
Best answer

Alternatively, you can attach the following as a .js file using the Resources section of the in5 dialog. It will search for page items that exceed the height of the page. Note this code is experimental.

$(function(){
    var pageMargin = 20;
    $('.page').each(function(){
        var pageTop = $(this).offset().top, pageBottom = pageTop + $(this).height(), itemBottom, h, newBottom = false;
        $(this).children('.pageItem').each(function(index,el){
            $(el).attr('style', $(el).attr('style') ||'' + '/**/height:auto !important');
            itemBottom = $(el).offset().top + $(el).height();
            $(el).attr('style', $(el).attr('style').split('/**/height:auto !important').join());
            if(itemBottom > pageBottom) {
                newBottom = true;
                pageBottom = itemBottom;
            }
        });
        if(newBottom) $(this).height(pageBottom-pageTop+pageMargin);
    });
});

by (183k points)
selected by
0 votes

Hi Klemen,

You might be able to do something like this using float and clear on certain elements. It would take some experimentation.

by (183k points)