publishing responsive animate html/js question

[christofutti]

when i publish my animation (1240x860) and check the box "make responsive" and "by width" and do not check "scale to fill visible area," i expect the animation to be a max width of 1240px but to fill any smaller screen horizontally like it works with an image but on small screens when the window isn't tall enough to fit the whole thing it makes the width smaller and margins appear, white space on both sides. with an image, it doesn't do that, it fills the width no matter what and cuts off some of the height and you can scroll to see the whole thing. i want my published animation to resize like an image does. i feel like i've tried every different way to publish it and nothing accomplishes that.  

[ClayUUID · Accepted solution]

The scaling code is intentionally designed to keep the entire stage visible. To do what you want you'll have to modify the generated scaling code.

In makeResponsive(), change this line:

var iw = window.innerWidth, ih=window.innerHeight;

To this:

var iw = document.body.clientWidth, ih=window.innerHeight;

Then change this line (the second line):

else if(scaleType==1) {					
	sRatio = Math.min(xRatio, yRatio);

To this:

else if(scaleType==1) {					
	sRatio = xRatio;

Then publish as Make Responsive by Width and check Scale to fill visible area.

[christofutti]

thank you. when i do this it fills the width but i don't want it to be wider than 1240px;

i've experimented with max-width but can't get it to work.

[ClayUUID]

Yeah, because max-width is CSS. This is JavaScript. If you want to limit the max width you'll have to add that to the scaling code.

[christofutti]

can you tell me how to do that? i tried adding 

style.maxWidth = "1240px";

to these:

canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");

[christofutti]

now i have the canvas doing what i want but it is over the content that is meant to come below it and i can't figure out how to drop that content down below the canvas. 

[christofutti]

i got. thank you