• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

html5 canvas 'fit in view' (responsive) mode: how to account for other divs on the page?

Community Beginner ,
Nov 21, 2022 Nov 21, 2022

Copy link to clipboard

Copied

I'm publishing to html5 canvas and in my Publish Settings, I have checked "make responsive" by both height and width.  In "scale to fill visible area" I have selected "fit in view".  The goal is to allow the canvas app to stretch to be fully visible regardless of the viewport's dimensions.

 

Now I'm trying to integrate this into a real web page.  For example, what if I add a <div> at the top to contain some navigation links.  Pasting such a div into the Animate-generated html code (above the animation_container div) has the result that the page no longer gets it quite right when adjusting to a changing viewport: In this case, a viewport with a short, wide aspect ratio leaves part of my canvas cut off at the bottom of the window, because it doesn't know that extra div is pushing everything down.

 

Based on other threads, I gather that the makeResponsive() code in the Animate-generated .js file needs to be tweaked?  I am over my head here, and hoping for some very basic tips to make very basic adjustments on the page.

Views

71

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
community guidelines
Community Beginner ,
Nov 21, 2022 Nov 21, 2022

Copy link to clipboard

Copied

LATEST

Correction - "stretch" was a poor word choice, I meant: allow the canvas app to resize (with fixed aspect ratio) to remain full visible regardless of viewport dimensions.

 

Here's a quick fix that seems to work: Edit the resizeCanvas() function inside the .js file like this:

 

var navMenuHeight = document.getElementById("nav_menu").offsetHeight;
var iw = window.innerWidth, ih=window.innerHeight-navMenuHeight;

 

This seems to fix the resizing function, by accounting for the height of a <div id="nav_menu"> that I have placed above the animation_container div.

 

I'll probably build on this idea, as I add more elements to the page, to allow Animate's javascript to adjust accordingly.

Votes

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
community guidelines