Highlighted

How to add dom container to custom html template.

Participant ,
Jan 08, 2020

Copy link to clipboard

Copied

I am using Adobe Animate HTML5 with a custom HTML template. In the Animate publish settings I have 'Make Responsive by Width' and 'Scale to Fill Visible Area (Stretch to Fit)' checked.

 

I want to add an underlay container (under the canvas), and have it treated the same as the dom_overlay_container.

This is the code I have for the canvas div:

     

<div id="$ANIM_CONTAINER_ID" style="position: absolute; background-color:transparent;      width:$WTpx; height:$HTpx;z-index: 3">
     <div id="dom_underlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx;      height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
     <iframe id="iframe2D" src='grid/grid12.html' width='0' height='0' style="float: left"></iframe>
     </div>
     <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display:   $CANVAS_DISP; background-color:transparent;"></canvas>
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx;    height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
     </div>
     </div>

 

What changes do I have to make in the custom HTML or Animate so the underlay container is treated the same as the overlay container?

TOPICS
How to

Views

119

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

How to add dom container to custom html template.

Participant ,
Jan 08, 2020

Copy link to clipboard

Copied

I am using Adobe Animate HTML5 with a custom HTML template. In the Animate publish settings I have 'Make Responsive by Width' and 'Scale to Fill Visible Area (Stretch to Fit)' checked.

 

I want to add an underlay container (under the canvas), and have it treated the same as the dom_overlay_container.

This is the code I have for the canvas div:

     

<div id="$ANIM_CONTAINER_ID" style="position: absolute; background-color:transparent;      width:$WTpx; height:$HTpx;z-index: 3">
     <div id="dom_underlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx;      height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
     <iframe id="iframe2D" src='grid/grid12.html' width='0' height='0' style="float: left"></iframe>
     </div>
     <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display:   $CANVAS_DISP; background-color:transparent;"></canvas>
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx;    height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
     </div>
     </div>

 

What changes do I have to make in the custom HTML or Animate so the underlay container is treated the same as the overlay container?

TOPICS
How to

Views

120

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 08, 2020 0
Adobe Community Professional ,
Jan 08, 2020

Copy link to clipboard

Copied

In your generated HTML, there's a line something like:

 

AdobeAn.makeResponsive(true,'width',true,1,[canvas,anim_container,dom_overlay_container]);

 

Try adding your custom container to the array in the last argument. The variables passed into this array are set earlier in the code, so you'll have to do something like:

 

AdobeAn.makeResponsive(true,'width',true,1,[canvas,anim_container,dom_overlay_container,document.getElementById("my_underlay_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 08, 2020 0
Participant ,
Jan 08, 2020

Copy link to clipboard

Copied

Thanks ClayUUID,

That answer is acceptable, there were a couple of other adjustments in the HTML.

 

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 08, 2020 0