Member Avatar for Member #931611

I made an Edge animation with a stage which is, natively, 1600x900px. I've included it in an <iframe> linking to the HTML file outputted by Edge, on the page where it's to be displayed; as not all displays support this resolution, I wanted to use CSS media queries to resize the animation as the resolution went down. I've set up the @media syntax, and added the transform:scale(x,y) property to the iframe tag. Since they're cascading stylesheets, I though that the transform would also affect the Edge animation's elements, including the stage; however, it didn't, for some reason.<br>
The problem consists of the entire animation resizing properly as the browser window gets resized, except the stage itself, which stubbornly stays at 1600px wide.<br>
My second attempt at resolving the problem was getting the class names and IDs of the animation's divs using my browser's web inspector; I found "#stage" and ".splash (which is the name of my Edge project). I tried adding CSS rules in my main stylesheet, then in the Edge HTML file itself, which would scale these elements; to no effect.<br>
I've tried everything I can think of at this point. Should I use a different method than iframe? What else can I do?

  • 2 Contributors
  • 2 Replies
  • 359 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Member #931611

Dani AI

Generated

Quick diagnosis and a few practical fixes (short, tested approaches)

  • Problem recap: placed an Edge Animate export inside an iframe and tried to scale that iframe from the parent stylesheet, but the stage stayed at 1600×900 while other parts appeared to resize. That usually happens because a CSS transform on the iframe only changes the element’s rendered appearance — it does not change the inner document’s layout rules or the stage’s inline dimensions set by the Edge runtime. MDN explains how transforms alter the visual coordinate space rather than the layout box. (developer.mozilla.org)

  • Preferred fixes

    1. Use Edge’s built‑in responsive options: in Edge Animate set the Stage’s responsive scaling (and min/max widths) and republish. That makes the runtime calculate appropriate scaling instead of you fighting inline sizes later. Tutorials that cover this workflow are practical and step‑by‑step. (sitepoint.com)
    2. Stop using an iframe (or publish as static markup). In Publish Settings choose “Publish content as static HTML” (or copy the generated stage markup into your page). That lets your page’s CSS and media queries target the stage directly. The Edge publish docs describe this option. (doczz.net)

  • If you need a quick programmatic fallback (put this inside the Stage’s compositionReady action in Edge): compute scale = containerWidth / nativeStageWidth, apply the scale to the stage, set the transform‑origin to top/left and then update the stage parent’s height so the page flow stays correct. Example (Edge API / jQuery style):

/* put inside Stage → compositionReady */
var nativeW = 1600, nativeH = 900;
function scaleStage(){
  var stage = sym.$("Stage");
  var parent = stage.parent();
  var s = Math.min(parent.width()/nativeW, 1);
  stage.css({
    'transform':'scale('+s+')',
    'transform-origin':'top left'
  });
  parent.height(Math.round(nativeH * s));
}
$(window).on('resize', scaleStage);
scaleStage();

This pattern is the same technique used by Edge tutorials and community examples — it belongs inside the exported composition so Edge’s inline sizing is overridden at runtime. (coherent-labs.com)

Notes and cautions

  • Because scaling raster images can blur them, prefer vector/SVG assets or percentage‑based layouts where possible.
  • Since you’re using Dreamweaver you can edit the exported HTML easily; try the Publish → static HTML option first, then enable Stage responsive scaling; only use the JS shim if you cannot re‑publish. ’s suggestion to hand‑code is valid as a last resort, but Edge’s responsive settings usually solve this cleanly.
Member Avatar for dany12

One other aproach is to type manually and code your site some websites maker like the one above has only one problem they add stuff that you don't want need or t is deprecated so it's very hard to find what you are looking for

Member Avatar for Member #931611

I'm using Dreamweaver, so I have full code view and highlighting. CSS3 animations (which Edge makes use of in conjunction with JavaScript) are a new technology, so there's no risk of anything being deprecated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.