Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
+1 vote
This was asked over email, so I'm posting the answer here.
in how_to by (197k points)
  
Thanks it work great !
Is there an option for this in the in5 export window?
Not yet. This is still an experimental feature.
Hi, I am using this on a multi page web output with long pages that scroll down. The long pages are getting shrunk by height not width. Any ideas on how to fix?
Yes, change the following line:
scaleFactor = (xScaleFactor < yScaleFactor) ? xScaleFactor : yScaleFactor;

To:
scaleFactor = xScaleFactor;

That way only the width will be used for scaling.

This will be built into v3.1:
https://ajarproductions.com/blog/2017/09/04/scaleable-html5-in5/

1 Answer

+1 vote
 
Best answer

Update: As of version 3.1, desktop scaling is now built into in5 and can be found in the Advanced section of the export dialog.

It can also be easily applied to mobile devices.

image options in v3.1


This can be done with some custom code by adding the following code as a .js file using the Resources section of the in5 dialog:

$(function(){
    function scaleForDesktop() {
        var targ = (true || $('.activePage').is(':empty')) ? $('.page') : $('.activePage');
        var targW = targ.width(), winW = $(window).innerWidth(),
        xScaleFactor = winW/targW, yScaleFactor = $(window).innerHeight()/targ.height(),
        scaleFactor = (xScaleFactor < yScaleFactor) ? xScaleFactor : yScaleFactor;
        var prefixes = ['','-ms-','-webkit-','-moz-'];
        var n = prefixes.length;
        var xorigin = (winW > targW) ? '50% 0 0' : '0% 0 0'
        while(n--){
            $('#container').css(prefixes[n]+'transform', 'scale('+scaleFactor+','+scaleFactor+')').css(prefixes[n]+'transform-origin', xorigin);
        }
    }
    if(!touchEnabled){
        scaleForDesktop();
        $(window).on('load resize', function() { scaleForDesktop(); });
    }
});


Some additional CSS may be required depending on the document and Page Format.


For multi-page formats (Baker Framework & Liquid State Publishing System),

change $('#container') to $('#page')

This may only be necessary if you're using the built-in back & next navigation.


For the Vertical Slider, you may want to add the following:

$('#container .anythingSlider-in5').css('padding',0);

before the while line.


 

by (197k points)
edited by
The above code has been improved significantly and updated.
awesome! works perfect! Thank you very much
You're welcome, Thomas.
Hi Justin,
Thanks for posting this question. I've tried adding the above as a JS resource, however i cant seem to get it working. Am I missing something? Or is there something i can try?

Thanks in advance for your help!
Liz_JetsDigital, can you send me a URL (or zip package of the HTML) to test?
Hi Justin, thanks for your quick reply!
Please see below download link. Let me know if there is anything else you need. Thanks again!
http://download.jets.com.au/?email=liz@jetsdigital.com.au&password=7ELKNMOA
Thanks! I'll take a look and get back to you next week.
Hi Liz, the code in your file is pasted in starting on a comment line (probably automatically generated by Dreamweaver), which is causing an error because the first line is not read as active code. I'll send you an email with screenshots of how to fix it.
$(window).load( function() { scaleForDesktop(); });

It was not calculating correctly on window load.

Adding this helped. after $(window).on('resize'
Good suggestion. Load event added to code above.