Highlighted

publishing responsive animate html/js question

Participant ,
Jan 01, 2020

Copy link to clipboard

Copied

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.  

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Import and export, Publish package

Views

564

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

publishing responsive animate html/js question

Participant ,
Jan 01, 2020

Copy link to clipboard

Copied

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.  

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Import and export, Publish package

Views

565

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 01, 2020 0
Adobe Community Professional ,
Jan 02, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2020 1
Participant ,
Jan 02, 2020

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2020 0
Adobe Community Professional ,
Jan 02, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2020 0
Participant ,
Jan 02, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2020 0
Participant ,
Jan 02, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2020 0
Participant ,
Jan 02, 2020

Copy link to clipboard

Copied

i got. thank you

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2020 0