Highlighted

Float a webpage over a HTML5 canvas

Explorer ,
Jan 05, 2019

Copy link to clipboard

Copied

Hi all - I've been searching the forums for this and getting a bit stuck.

So my issue is, I have a HTML5 project that is being displayed on an iPad - As part of the project, I need the user to be able to click a button that opens reference material that is on a website. Because of some issues with how this gets displayed on the iPad, I cannot open a new window, more accurately, when I do, I have no way to close that page to get back to my project.

I wish there were some renderer that would interpret the HTML page inside a movieClip - but I haven't found one.

Best I can tell I need to float an iFrame over my canvas document. I'm just getting stuck on the how. How, from Animate, do I create the iFrame and control its visibility from Animate?

Thank You in advance!

-sam

Views

325

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

Float a webpage over a HTML5 canvas

Explorer ,
Jan 05, 2019

Copy link to clipboard

Copied

Hi all - I've been searching the forums for this and getting a bit stuck.

So my issue is, I have a HTML5 project that is being displayed on an iPad - As part of the project, I need the user to be able to click a button that opens reference material that is on a website. Because of some issues with how this gets displayed on the iPad, I cannot open a new window, more accurately, when I do, I have no way to close that page to get back to my project.

I wish there were some renderer that would interpret the HTML page inside a movieClip - but I haven't found one.

Best I can tell I need to float an iFrame over my canvas document. I'm just getting stuck on the how. How, from Animate, do I create the iFrame and control its visibility from Animate?

Thank You in advance!

-sam

Views

326

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 05, 2019 0
Participant ,
Jan 05, 2019

Copy link to clipboard

Copied

I have an example (uses jquery);  Note the canvas background-color is set to 'transparent'.

HTML

          <body onload="init();" style="margin:0px;">

          <div style="position: relative;">

          <div id="framer2D" style="position: absolute; float: left; line-height: 0px; width: 0px; height: 0px">

              <iframe src='http://MissingSocksCo.com' id="iframe2D" width='0' height='0' frameborder='0' style="float: left"></iframe>

          </div>

          <div id="animation_container" style="position: absolute; background-color:transparent; width:2000px; height:1520px">

          <canvas id="canvas" width="2000" height="1520" style="position: absolute; display: block;           background- color:transparent;">          </canvas>

          <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:2000px; height:1520px; position: absolute;           left: 0px; top: 0px; display: block;">

          </div>

          </div>

          </div>

          </body>

Javascript

          window.addEventListener('resize', resizeCanvas2);

          function resizeCanvas2() {

          $("#iframe2D").css('width', $(window).width()*.5 + 'px');

          $("#iframe2D").css('height', $(window).width()*.5 + 'px');

          $("#framer2D").css('transform', "translate(" +  $(window).width()*.25 + "px, " + $(window).width()*.25 + "px)");

          $("#framer2D").css('width', $(window).width()*.5 + 'px');

          $("#framer2D").css('height', $(window).width()*.5 + 'px');

          }

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 05, 2019 0
Explorer ,
Jan 05, 2019

Copy link to clipboard

Copied

Thank you for providing - I'm missing something - where in the HTML document do I insert the HTML?

Context - I have created a simple animate project with a couple boxes drawn on the stage - I put the javascript on frame 1 - and published - I then opened the .html file up and pasted it under the top <html> section -

I am getting a

Uncaught ReferenceError: $ is not defined

    at resizeCanvas2

Thank you,

sam

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 05, 2019 0
Participant ,
Jan 05, 2019

Copy link to clipboard

Copied

Sounds as if you may need to do some Googling.

The HTML code goes towards the bottem in the '<body>'.

'$' indicates the jquery I referred to, you can use document.getElementById

or

document.querySelector("iframe").setAttribute('width', '100 px');

The width depends on your stage size and how you sized the page in the publish settings.

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 05, 2019 0
Adobe Community Professional ,
Jan 05, 2019

Copy link to clipboard

Copied

TvDirector  wrote

How, from Animate, do I create the iFrame and control its visibility from Animate?

Exactly the same way you'd create it if you weren't using Animate. The scripting language in Animate Canvas documents is bare-metal JavaScript, so by definition anything you can do in JavaScript, you can do in a Canvas document. And you certainly don't need to bloat your project with the jQuery library to accomplish such a basic task as creating an iframe.

javascript - Creating an iframe with given HTML dynamically - Stack Overflow

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 05, 2019 0