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

How Do Zoom to Page Width on a Desktop Browser

+1 vote
This was asked over email, so I'm posting the answer here.
asked Sep 2, 2014 in how_to by justin (114,320 points)
    
Thanks it work great !
Is there an option for this in the in5 export window?
Not yet. This is still an experimental feature.

1 Answer

+1 vote
 
Best answer

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.


 

answered Sep 2, 2014 by justin (114,320 points)
edited Nov 30, 2015 by justin
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.
...