Is it possible to only allow downward HTML / flash scaling of a project?

Report · Jan 22, 2014

Hi, When I've exported from captivate 7 (latest update) with the "Scalable HTML" option enabled, it creates the output and makes it scale up or down to fit the needs of the device. The flash version also does the same. This is working as expected and works well.

However when viewing on a large computer screen, the project looks fuzzy / un-sharp / over-zoomed in because it has increased in size to fill the screen.. Does anyone know of a way in which you can set the project only to scale down, and not to scale up. For example, we are using 1024 x 672 for Ipad, but if it was on a 7 inch tablet, it would still scale down, but on a larger screen it would retain 1024 x 672.

Essentially, the same functionality as "max-width" and "max height" in CSS.

I imagine it will involve editing some code in HTML / CSS / JS in the output files, I've had a brief look, but haven't gone into depth on it yet.

Any help would be greatly appreciated.

Oen

Report · Jan 22, 2014

The ideal option is to serve a non-scalable HTML5 option for desktops and the scalable html5 version for mobile/tablets.

Similar to what is happening in the multiscreen.html if you publish to both HTML and SWF, but publish a non-scalable version to a folder and a scalable version to a folder then redirect with the script.

Report · Jan 23, 2014

Thanks, but we don't ever want to serve a completely non-scaling page as it won't work with browser window resizing lower than our project size.

I've managed to put a max-width on the flash version which does exactly what I need, but I can't get the same working on the html5 one.

Report · Jan 23, 2014

I understand your dilema.

My point was that if you only served the HTML5 version for mobile, you would never be able to scale over a max width anyway, since the largest screen would be a tablet.

Desktops would be served the SWF version, which is possible to control the max-width since there are only 2 divs you need to worry about and it could still scale down.

It's conceivably possible to do it with the HTML5 version but you would have to write a script to change the css for all divs, the container div and all of it's children and their children and you'd have to run it for every slide. As some of the divs have no id you would also have to create a new id for those divs, or apply a class before you could change their css. You'd probaby have to evaluate which divs have classes, which have inline css, to sum it up it would be a nightmare to write the code. CSS specificity can be confusing enough, let alone trying to figure it out dynamically. If you ever got it to work it would probably take longer than the time it took to build the course, let alone the latency it would introduce.

I'm sure you've noticed that when you apply css rules the the main container div has absolutely no effect in the HTML5 version since the child divs have their own set of rules.

Report · Jul 08, 2015

I hope, you can help me

You wrote: "Desktops would be served the SWF version, which is possible to control the max-width since there are only 2 divs you need to worry about and it could still scale down."

I am running Cp 7 version 7.0.1.237 My problem is to publish one project with scalable HTML5 + SWF with specified max-width (or non-scalable).

Your idea is the best solution, I am looking for!

Cold you tell, please, were to find these 2 magic divs?

Waiting for your answer,

Ksenia

Report · Jul 08, 2015

I'm looking for the instructions to do the scaling for both. It was some time ago and I can't seem to find the final files. Am going on vacation tomorrow. I'll try to get the solution together some time next week.

Report · Sep 26, 2014

Hi, Ojcrawford,

Did you ever resolve this issue i.e. no scaling up?

I have the same issue and am looking for a solution.

Regards

Trevor

Report · Sep 26, 2014

In the CPM.js, find:

cp.shouldScale = cp.D.project.shc;

and replace with:

if (isMobile)

{

cp.shouldScale = cp.D.project.shc;

}

else

{

cp.shouldScale = false;

}

Then in the <head> of the Index.html add a mobile detecton script::

var isMobile;

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
isMobile = true;
}
else
{
sMobile = false;
}

Report · Sep 26, 2014

Hi,

Thanks for the response, your support is most appreciated.

I have applied your fix but it is not working. This could be for the following reasons, please advise:

1) The CPM.js file is compiled. So I removed all the spaces in your replacement code before pasting over 'cp.shouldScale = cp.D.project.shc;' was this correct?

2) I don't have a file index.html. I have the file index_SCORM.html. I assume this is because I have SCORM tracking turned on. I placed the mobile detection script in that file at the bottom of the head section after the other scripts (in it's own script tags), was this correct?

Cheers

Trevor

Report · Sep 26, 2014

I always run the CPM.js through jsPretty.com, then you can always minify it after your edits if you wish, but I just leave it unminified. But it should work the way you did it.

Put the dtection script at the top just above function initializeCP(), but it works at the bottom also:

If you copy and pasted the code from the previous post, in the isMobile = false, there was an "i" missing from the variable "sMobile" change it to "isMobile"

var isMobile;

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
isMobile = true;
}
else
{
isMobile = false;
}

function initializeCP()

Report · Sep 26, 2014

Hi Thanks for the extra information, I'll try jsPretty.

Yes I pasted the code typo into the file so that's most likely why it failed.

I'll find the fix again later.

Cheers

Trevor

Report · Sep 26, 2014

Hi,

Should there be a ; (semi colon) at the very end of the replacement code which goes into CPM.js after the last } ?

trevor

Report · Sep 26, 2014

No, not necessary.It looks like this:

cp.CPPreInit = function () {

cp.CPProjInit();

if (isMobile) {

cp.shouldScale = cp.D.project.shc;

} else {

cp.shouldScale = false;

}

cp.loadedModules = {

playbar: cp.D.playBarProperties.hasPlayBar && cp("playbar") != void 0,

border: cp.D.borderProperties.hasBorder,

toc: cp.D.project.hasTOC && cp("toc") != void 0

};

Report · Sep 26, 2014

Ok thanks.

That's clear.

Report · Sep 26, 2014

Hi Unfortunately this is still not working. No error messages when running, just the same scaling up on a desktop PC with high resolution screen.

I have double checked both pieces of code and can't see any mistakes.

Just checking but the fix should also applies to the swf version which loads on the PC, not just the hmtl5 version directed to the tablets?

Trevor

Report · Sep 26, 2014

I haven't checked it against a swf version. I'll look at it when I have some time. I can zip up my file and send it to you so you can have a working version. PM me your info and I'll send you a link.

Adobe Community

Is it possible to only allow downward HTML / flash scaling of a project?