Skip to main content
majedsahi
majedsahi
Participant
May 27, 2014
Question

Edge Animate Composition 'responsive'

  • May 27, 2014
  • 1 reply
  • 28471 views

Hi all,

Will appreciate if someone knows and can help with this.

So basically we have .oam file from edge animate, when we insert it to Dreamweaver using the Edge Animate Composition option, it loses the Responsiveness after that. Before importing to dreamweaver it works fine. Is there any way to make it responsive so it works on smartphones.

regards.

This topic has been closed for replies.

1 reply

BazBat
BazBat
Participating Frequently
May 27, 2014

Not used edge since beta however I remember having to add a trigger with a window.resize() function to have it so the edge animation was responsive, this may not be the case anymore but are you 100% sure its responsive? The Edge animation is embedded into a canvas object which will then be placed onto the page. You need to make sure that both the parent container that holds the canvas object as well as the canvas object itself is able to resize (Easiest way to do this is to specify % widths). I would recommend exporting the animation as a web site/page from Edge and study the code to see how it's embedded. If your still having problems post you code you we can take a look.

majedsahi
majedsahiAuthor
Participant
May 28, 2014

Thanks for the reply Dsarchy.

Here is one of our pages: Navigation

As you see the animation doesnt resize at all, therefore doesnt fit on smaller screens e.g. iPhone.

however, before bringing it over to dreamweaver it auto resizes as you resize the browser window. i have set a min/max width and it works perfect..

we have already tried exporting the files are 'web' rather then 'Animate Deployment Package' but thats too messy. there has to be a way to auto resize Composition box

BazBat
BazBat
Participating Frequently
May 29, 2014

It's because of the following line

<object id="EdgeID" type="text/html" width="470" height="340" data-dw-widget="Edge" data="edge-animate/navigate/Assets/navigate.html">

</object>

You have embedded an object that has a fixed with of 470px. Either change the width to a % or take the content on:

http://www.emalearning.co.nz/eLearning/Employment_Relations_Act/edge-animate/navigate/Assets/navigate.html

and add that to your page instead of linking it with the object tag.

The only problem you will have with the object tag is the height, as the animation scales the height will need to increase and decrease. You could use conditional stylesheets or javascript but it might be easier just to directly ref the animation and loose the object tag altogether.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices