"endless" page height

Question

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

Answer 1

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);
    });
});

Answer 2

Hi Klemen,

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