How to force a responsive Edge animation to re-evaluate its container size?

I have an Edge animation stage embedded in a relatively complex page, inside a container div whose width is set by media queries and which may or may not be faded out by $.fadeOut. I've figured out how to trigger playback, but the stage doesn't seem to be updating its estimate of the container's width regularly. Specifically, the stage will scale itself to its min-width (disappearing if there is no min-width) and get stuck there in a specific case when the container's container has been hidden then shown again. And even when the stage is visible and on screen, if I make the browser thinner then wider, it seems to scale itself down but never back up. These weird problems would both be explained if the stage wasn't consistently re-evaluating how large its container was.
In that case - is there a way to force the stage to re-evaluate its container size using Javascript? Wasn't able to find anything in the documentation about this.
Thanks!

Hi, Chi-
Funny you should mention this... I actually just posted a blog post about something very similar.
https://blogs.adobe.com/edge/2013/09/05/floral-matchmaker-tutorial-3-hiding-and-showing-th e-game-board/
You can put your responsive div in an iframe set to a certain % of your main page.
-Elaine

Similar Messages

  • How do I insert my Edge Animation into Wordpress as an animated/interactive graphic

    How do I insert my Edge Animation into Wordpress as an animated/interactive graphic?

    Hi ColleenSyron,
    Can you check out this video: http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/episode-5-spice-up-your-wordpr ess-site-with-edge-animate/
    Thanks,
    Preran

  • How do I import my edge animation in indesign so that it can play within a PDF file

    how do I import my edge animation in indesign so that it can play within a PDF file??
    Plz help.

    Hi there,
      Have you tried reading this tutorial on exporting Edge Animate files to be used in InDesign?
    http://www.adobe.com/devnet/digitalpublishingsuite/articles/enhancing-your-dps-folios-with -edge-animations.edu.html
      Edge Animate files can be played in DPS folios. PDFs are not capable of playing Edge Animate files at this time. I did find a work around to get SWF files to play in PDF documents:
    http://indesignsecrets.com/how-to-get-animations-to-work-in-pdf-working-title.php
      I hope this helps!

  • How do I export an Edge Animation into a single folder? (no subfolders)

    I need to export an Edge Animation so that all of the javascript, html, and images are located in one folder. (no subfolders)
    Is this possible?
    Thanks

    unless you feel like hacking the exported edge code, no..
    if you do.
    open [you comp name]preloader.js in an editor look for "aloader" and remove the paths from edge.*.min.js and the jquery1-7...
    open [your comp name]-edge.js  and edit " var im='images/';  " to var im=''";
    then cut paste all your files to the sinle folder

  • How to sync two different Edge Animation's on a website?

    Hello everybody,
    I've made 2 animations on a Website and I want to synchronise these.
    The 2 animations have to start simultaneously.
    But the animation which loaded its content starts first and then the other.
    The difference now is noticable and will be more on slower internet-connections.
    How can I achive this in Edge Animate, or do I need Java-Script in my ".html"-file?
    (Hope not because I can't script )
    Thx

    Hi Hemanth,
    thank you for your reply.
    I imported the animations on 2 different locations like this:
    <div id="content">
                  <div id="teaser">
                            <div id="samsung">
                              <object id="EdgeID" type="text/html" width="169" height="420" data-dw-widget="Edge" data="edgeanimate_assets/samsung/Assets/samsung.html">
                              </object>
                      </div>
                      <div id="text">
                      </div>
                      <div id="apple">
                <object id="EdgeID2" type="text/html" width="151" height="368" data-dw-widget="Edge" data="edgeanimate_assets/iphone/Assets/iphone.html">
                </object>
              </div>
                  </div>
    </div>
    From here the post is edited, because I tried it without the <object> tag, used the "bootstrapCallback and included the 2 animations with all necessary files.
    Unfortunately now my head-area explodes with java scripts.
    I changed my file like this (head-area):
    <script type="text/javascript" charset="utf-8" src="assets/iphone_edgePreload.js"></script>
    <script type="text/javascript" charset="utf-8" src="assets/samsung_edgePreload.js"></script>
    <style>
              .edgeLoad-EDGE-109535821 { visibility:hidden; }
              .edgeLoad-EDGE-141942318 { visibility:hidden; }
              #Stage { visibility:hidden;}
    </style>
    <script>
    var countComps = 0;
    AdobeEdge.bootstrapCallback(function(compId) { 
              countComps = countComps + 1;
                        if (countComps == 2) {
                                  comp2 = AdobeEdge.getComposition(compId).getStage();
                                  $("#Stage").css('visibility', 'visible');
                                  comp1.play(0);
                                  comp2.play(0);
                        else {
                        comp1 = AdobeEdge.getComposition(compId).getStage();
    </script>
    ... and in the body:
    <div id="content">
         <div id="teaser">
              <div id="samsung">
                   <div id="Stage" class="EDGE-109535821"></div>
              </div>
             <div id="text"></div>
             <div id="apple">
                    <div id="Stage" class="EDGE-141942318"></div>
             </div>
          </div>
    </div>

  • How to I get my Edge animations to work in Content viewer on the ipad?

    I've created several animation in Animate, they preview fine in the browser. I have placed them into InDesign, they preview fine on the desktop. I upload the to view via the ADobe Content Viewer on my ipad - nothing. I have tried using the Web Content route and placing the html file, still nothing. I've checked for updates of everything and appear to be up to date. Need help!

    On an iOS device, or on a computer without iTunes installed on it, you can view your last 90 days purchases (and optionally contact iTunes Supportif you have a problem with a purchase) via http://reportaproblem.apple.com
    You can only view your full purchase history (not just the last 90 days) via a computer's iTunes : log into your account on your computer's iTunes via the Store > View Account menu option, you should then see a Purchase History section with a 'see all' link to the right of it, click on that and you should then see a list of your purchases

  • How do I combine PDF files into one, and reduce its file size?

    help asap

    Hey Rave and thank you for your answer,here is the deal.Im making magazine,and using acrobate adobe to convert all my files into PDF files.After that I need to merge all them files into 1 PDF file so I can upload it to site.And after doing all that - the file happens to be VERY LARGE 188MB when it has to be lower ,somewhere like 47MB or less then 100MB.And I dont seem to find the solution.So help

  • Bootstrap, height of edge animation and others div content in the page- overlay issue

    I’ve a problem with the position others div tags in a page with a edge animation in the top (in the below example, div “box-animation”… export it with “publish target: Web”).
    The static content (in the below example, class “content-static”) is always overlay to the animation, instead to view it below div “box-animation”.
    The first solution is to set an height for edge animation container (for example, #box-animation height: 500px) but its very complicate to manage it with responsive website.
    So, how to view the static content in a div tag after an animation create with edge animate, to avoid overlay effect?
    This my first animation with Edge Animate and I always thought that the animation would have been placed in the html order of the webpage...
    Thanks
    Example:
    <body>
    <div id=“box-animation”><div id="Stage" class=“animation1…”>[edge animation]</div></div>
    <div class="container">
      <div class="row">
        <div class="span12">
          <div class=“content-static”><p>Test content</p></div>
        </div>
      </div>
    </div>
    </body>

    Hi... put a trasparent gif image, with the same animations's width/height, in the first div after the edge code container.
    If you want responsive layout, remember to remove width/height values.
    <body>
    <div id=“box-animation”><div id="Stage" class=“animation1…”>[edge animation]</div></div>
    <div class="container">
      <div class="row">
        <div class="span12"><img src="images/spacer.gif" alt=""/>
          <div class=“content-static”><p>Test content</p></div>
        </div>
      </div>
    </div>
    </body>

  • Edge animation to show full width once in muse

    I created a responsive edge animation and was under the assumption once imported into muse it would behave the same which is no the case, how can I acomplish edge files to extend 100% width?  is this something possible?

    Hi
    Sorry to say but there's not much going on between the two camps, Muse and Edge A that is.  Like you, I subscribe to Muse but since I discovered EA...well...
    Thing is, dragging the aimated button to the trigger container just overlays it which effectively hides it.  Hence, it will simply not work as a trigger to launch lightbox.  I myself had the same idea....but its more involved that this.  As always.
    A possible solution might be to design your lightbox  and simply use the built in trigger for now -  go ahead and publish the site like this.  View your site in a browser of your choice then click on the trigger which will reveal the URL that launches the Lightbox feature.  Copy this in the browser.  Cheeky eh?
    Then go back to your button in Edge A (select it) and add an on click event handler (look for {} to the left of the element and select click event).  Using the snippets on the right-hand plane choose add URL and paste the link from the clipboard between the " " so when the button is clicked it references the lightbox.  Go back to Muse and position your edge button again and publish again.  Its very long winded I know.  Get it? Will it work? dunno.  Have I tried it? no.  But the logic is faultless, because the URL trigger on your button  should point to the lightbox...thats the theory anyway.
    Hope this is of some help and hope it works...might as well give it a try eh?...this is how I discovered Edge A trying to animate buttons etc.  In the end I decided to build my entire site using it. 
    regards

  • How can I get a tab to open in an oversize jpg image in its original size with scroll bars when I click on a link?

    I have a small program for storing my genealogy names and jpg images of the census pages where each name is found. The images have a thumbnail link that opens in a new tab to view the actual oversized census page. In the new tab the census page is small and not readable. How do I get the jpg image to appear in its original size with schroll bars so I can read the census in the firefox browser without using the zoom feature. It takes several clicks on the zoom to get the image to a readable size and that is time consuming, especially when I have several images opened.

    That works, thank you!
    Could I suggest that this feature (the ability to turn off or turn on the auto-resize of images) be part of the Options tab on Firefox? I think it's a setting that some users might want to change fairly often--even toggle back and forth on. It's a little annoying to have to go into about:config every time to do this.

  • How do I maintain responsive scaling on an edge animate animation when I insert it into dreamweaver?

    How do I maintain responsive scaling on an edge animate animation when I insert it into dreamweaver? Please and thank you!

    example.com is a generic http:// address to illustrate the difference between what you gave, file:/// and an actual URL address.  There are no tutorials on that site.  Sorry for the confusion.
    #1 Have you procured your domain name and web hosting yet?  You'll need to do that to publish your pages online.
    #2 When you sign-up for web hosting, the company will send you FTP log-in credentials to your site's web server.    You will enter this info into your DW Site Definition.  Site > New Site >  See screenshots below:
    Under Servers:  Root Directory is whatever your hosting company tells you to use.  This varies by web host.  Some commonly used ones are public_html, www or htdocs.
    After your site definition is set-up, hit the TEST button to confirm it's working.  If it's not connecting, go to More Options.
    Go to the Files Panel (F8).  Use the UP Arrow  to PUT files to remote server.
    Use the DOWN Arrow to GET files from server to your local site folder.
    Post back when you have finished uploading your work to the remote server.
    Nancy O

  • How do you put edge animation in Magento?

    How do  you put edge animation in Magento please?

    Provide the name of the program you are using so a Moderator may move this message to the correct program forum
    This Cloud forum is not about help with program problems... a program would be Photoshop or Lighroom or Muse or ???

  • How can I allow a user to control my Edge Animation using only the scrollbar?

    I have seen a few examples of an Edge Animation being conrolled by the scrollbar, and I am wondering how I could achieve the same effect.
    Example:
    http://dominikruckli.ch/scrolltest/scrolltest.html
    I have searched the corners of the internet and have found 2 or 3 different tutorials, but none of them have proven successful.
    In basic terms, I am creating an animation that involves a character getting from Point A to Point B, from the beginning of my timeline to the end.
    Rather than exporting my animation so that it plays automatically, by itself, I would like for a user to scroll vertically, and the playing of the animation moves in conjunction with the scroll bar.
    As the user scrolls from top to bottom on the scrollbar, the character in my animation moves from Point A to Point B.
    Also, if the user stops scrolling... the character will stop moving as well.
    In addition, I would like the surrounding area, outside of my stage, to remain hidden. I do not want to allow the user the ability to scroll around and see off of my designated stage area. I only want the scroll bar to act as a playhead for the animation.
    Any help will be greatly appreciated.
    Thank you
    Note:
    If you have special CSS (or other form of Code), please provide specific instructions on how to insert this code, where it should be located, what part(s) of the code should be altered, and any additional instructions on how to apply any form of coding. (Screenshots would be amazing)

    Never mind.  I figured it out myself.  I changed the myComp.play("scenefour"); to myComp.getStage().play("scenefour"); and it worked fine. 

  • How to integrate an Edge animation in a website by hand

    I created an Edge animation and published it as an .oam file.  But i need to work on the website on someone elses computer who does not have creative cloud or even Dreamweaver.   I am working there in a text editor. 
    What are the requirements - what do I have to do - to integrate the .oam file into that site?    All the references I've found bring in Dreamweaver to do it.   I don't have access to Dreamweaver in that environment, only to a text editor to edit the html. 
    I actually was able to publish the project as a Web site and integrated it that way without the .oam file, but I would like to know how to use the .oam file because it might be simpler.

    Hi, Ken-
    The OAM file is actually a compressed file to be used for import into another product, like Dreamweaver or InDesign.  We don't recommend you package in OAM; instead, simply ZIP up your files and hand-integrate the unpacked HTML as an iframe on your friend's machine.
    Hope that helps!
    -Elaine

  • How to make Edge Animation works in HLTM5 Offline? I cache all files, but Edge didn't play.

    How to make Edge Animation works in HLTM5 Offline? I cache all files, but Edge didn't play.
    Some createJS animation start without any problem.
    Thanks!
    Astors

    Thank you for your answer.
    I do use cdn off for publish setting.
    The Web site that I am working on is a very complicated site. Edge
    animations are in a subdirectory of Apache server.
    When server is offline, I get all files from Appcache without problem,
    excepted *_EdgePreload.js.
    I Google hundreds time, cannot find answer on why this file is always get
    online.
    Finally, I find out myself, Adobe Edge don’t like relative file path for
    *_EdgePreload.js.
    Change to root absolute path fixed the problem:
    Astors

Maybe you are looking for