Float a webpage over a HTML5 canvas

Report · Jan 05, 2019

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

Report · Jan 05, 2019

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

HTML

</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');

}

Report · Jan 05, 2019

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

Report · Jan 05, 2019

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.

Report · Jan 05, 2019

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

Adobe Community

Float a webpage over a HTML5 canvas