Responsive Edge Animate in a Div

Hi.
Recently i tried a page to test the responsive design, and all went well.
Now I want to place an Edge Animate element (. Oam) in a div, but that only appears on the computer and tablet version,
and the mobile version appears another Edge Animate object, because Edge Animate, just scale my object and the mobile version is unrecognizable
Greetings.

Hi.
Thanks
Well, I know how to insert an Edge Animate object, no problem.
But.
I try to explain. If it can place a different Edge Animate Composition for each resolution (Desktop, Tablet, Mobile).
For example:
Or
Sorry for the inconvenience, and thanks for the help.

Similar Messages

Responsive edge animate oam in fluid grid

Hi, maybe my question is totally rookie one, but I cannot get the responsive Edge Animate package to do resize smoothly in the fuid grid of Dreamweaver.
Either it is not wide enough or the height does not scale, which results in the footer to be far down.
It probably has to do with the fixed size of the object tag when I insert the oam.
<object id="EdgeID" type="text/html" width="960" height="510" ....
Changing sizes to 100% works fine for width only, the height behaves strange, showing only a small part of the animation in every view.
Is this an issue of oam packages or just my poor knowledge of CSS ?
Attached you find the screenshots:
Thanks a lot for your help!
B.

I came across this problem when recording Adobe Dreamweaver CC: Learn by Video for Adobe Press. The way I handled it was by adding the following block of JavaScript just before the closing </body> tag on the page that contains the Edge Animate object:
<script>
function fixHeight() {
var anim = document.getElementById('EdgeID'),
w = anim.offsetWidth;
anim.style.height = (w * .562) + 'px';
fixHeight();
window.addEventListener('resize', fixHeight, false);
</script>
This gets the width of the animation (the default ID is EdgeID). It then adjusts the height by multiplying the width by 0.562. You will need to fix the scaling ratio in the following line to suit the proportions of your animation:
anim.style.height = (w * .562) + 'px';
I can't remember all the details because it's more than a year ago that I did this. As I recall, Edge Animate generates the correct height for the animation, but it doesn't adjust the height of the <object> element used to display it.

How to make responsive Edge Animate with elements aligned in the middle?

Hi,
I wanted to create a responsive hero slideshow using Edge Animate. It will have a 100% width and max-height of 500px. However, I wanted that the other elements will stay in the middle of the slideshow and not be anchors to either corners - as what is selectable in Animate.
My aim to to achieve something similar to Slider Revolution Responsive jQuery Plugin » Slider Revolution Responsive WordPress Plugin Slider Revolution.
Anyone have any idea how to go about this? Any help would be appreciated. Thank you.

Hi deltabrux,
Can you share your Edge project files? Are your using EA 2014.1?
Regards
Vinod
Edge Animate Team

Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

I have created an animation in Edge Animate and have placed it in the header of a Dreamweaver Fluid Grid Layout. I have put it in a div by itself so it can be turned off in the mobile layout. When I test the layout in a browser, the Edge Animate composition scales responsively to the window size, but the height of the div it is in does not. The width of the div changes with the width of the window, but the height of the div remains the same. Because the height of the div doesn't change, as the animation responds and resizes it leaves a large empty space between the bottom of the animation and the content that follows it on the page.
The div itself does not have a rule for it's height associated with it. It seems to me that the div is getting its height from the original size of the html object which is the animation. I tried removing the height rule for the object, but then the div clips the bottom of the animation, and again, it doesn't resize with the window.
Is there a way I can get the div's height to resize with the size of the animation as it changes?

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Edge Animate responsive scaling problem

Hello
I am having a terrible time with the responsive scaling from Edge Animate.
When I insert the html into a div in Dreamweaver the scaling works, however any divs below the animation get pushed down (when scaling the page) causing a large and unsightly gap. I have rang Adobe about the problem and I tried a couple of things they said but nothing has worked. The operator was trying to tell me I have a problem with my css. However everything is logically in order. I changed the display from inline to block. When I change the position from static to absolute it simply ignores both the above and below divs, simply displaying over the top of them as though they don't exist. I have used margins and max height for the div with no positive outcome. Can anyone Please help! If I change the px size in the html(in Dreamweaver) to % it creates a scroll bar which is undesirable. I have noted I am not the only person having this problem. If there are some wiz coders out there, can you please try and recreate the scenario to see if it is in fact a problem with EA and DRW and not an era on my behalf because the issue is driving me nuts! Cheers.

sorry no experts here

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

SVG with PNG fallback, Responsive, EDGE Reflow & Animate integration

I mentioned this on the Muse Facebook, and they said I should post it here... I think Muse is an awesome program. But I really, really would love to see these features. Any of them good enough to make it to the sketching table?
1. SVG with PNG fallback support (for Retina displays)
The problem with Hi-Res displays on Tablets, phones and laptops is that the web is becoming awfully ugly. You need to zoom to fit webpages, and when they fit, the JPG's and PNG's become blurry. Since displays are increasing resolution year after year and pixel density is becoming a real issue, on phones (like the HTC One) or laptops (Macbook Retina or Chromebook Pixel).
Wouldn't it be great if we could use vector SVG for new devices for sharp a crisply logo's on every screen. And with that instantly use an automatic PNG-fallback option for older browsers. This would signifantly upgrade any website made with Adobe Muse and the Web in general if you ask me! I've done some research and I found this website very useful considering this issue: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
2. Responsiveness (Adobe EDGE reflow integration)
Adobe Reflow is amazingly promising. What if (instead of making different websites for every device) you can export a website to Adobe Reflow to make the design instantly responsive.
3. Beter Adobe EDGE Animate integration
EDGE Animate is a great program, especially with the codes and actions which you cna integrate. The only problem is sometimes I want an animation to start playing when I'm at that part of the page, not after when it's done loading. Overall the integration is so-so, and it's doable to add an animation to Muse, but these tweaks could upgrade it from great, so turbo-awesome!
Which brings me to my next point:
4. Dynamic Content Loading (Load on view)
Isn't Muse a great tool for making one-pages?! I love it for that, and I do love one-pages. The problem is that it can take a while to load when it's becoming more complex. Is there a possibility to add a feature when thing are loaded when you scroll? Which is fairly often used on blogs and stuff.
5. Horizontal Parralax Scrolling
Since the latest update I've been pretty hooked on the functions of parralax scrolling and what it could do in a usefull way. The problem is that it doensn't work for horizontal scrolling. The objects can move horizontal (when scrolling vertical). But there's no option to add an effect when scrolling in a horizontal direction.
What do you think? Any of these interesting enough to develop?

I would love all of the features in this post. But you must post it in the Idea section of the forum so people can vote for your ideas.

When Editing A Web Page In Edge Animate, How Can I Embed Edge Elements Into Pre-Existing DIV's?

I created a basic layout with some boxes in Dreamweaver. I set the Overflow property on them to "Hidden". I then opened the page in Edge Animate. However I noticed that when I import stuff, such as an image, then try to drag it into one of the existing DIV's, it won't work. It stays on top of all the other DIV's. However if I create a box or some other sort of DIV directly in Edge Animate, I can drag the Image element into that, so it's enclosed within that DIV.
I guess the workaround appears to be to embed the image into the DIV in Dreamweaver first, then open the page in Edge. However it would be nice to not have to keep jumping back and forth like that. Is there a way to do this in Edge Animate?
Also, I noticed when I select one of the DIVs I made in Dreamweaver, many of the Properties such as Corners, Shadow, and Filters are missing. Can these only be used on DIV's created directly in Edge Animate?

Hi, neohtom-
What you're seeing is the difference between what we define as a static div (one that is defined outside of Animate) and a managed div (one that is defined inside of Animate). Due to the fact that we expect other products to change a static div, we limit the amount of changes you can make to a static div. Because we "manage" a div that is created inside of Animate, we allow a lot more changes to be made to a div. Hope that answers your question! I'd suggest creating divs within Animate if you want to eventually change them to have corners, etc.
Cheers,
-Elaine

Edge Animate - Sending To Then Getting Response From Server (XML)

Hi,
I’m very new to Edge animate, and I’m trying to send some things to a server, which would send a response back. XML.
I’m trying:
jQuery.ajax({
    type: "POST",
    datatype: "xml",
    url: "http://www.pandorabots.com/pandora/talk-xml",
    data: {botid: 'cb1f78b4fe36bf6d', input: 'test'},
    success: function(xml) {
         //jQuery(xml).find('result').each(function(){
                  //var tts = jQuery(this).find('that').text();
                  sym.$("xmlOutput").html('Pandorabot success.');
    error: function() {
        sym.$("xmlOutput").html('Pandorabot error.');
But can’t seem to get it working.
The logs indicate that it does send, but I don’t receive an answer.
What am I doing wrong, and where should I start?
Thanks for any help, or links.

Did you put some trace or alert in your success function and check if its hit?

Edge animate responsive?

ciao,
ho fatto delle animazioni con edge, ora devo renderle responsive.
sapete come posso fare?
grazie

Hi,
Yes edge animate is responsive.
check this tutorial: http://www.edgedocks.com/content/make-responsive-web-design-edge-animate
http://www.webdesignermag.co.uk/tutorials/create-a-responsive-animation-with-adobe-edge-an imate/
Thanks,
Vikas

Losing the will to live... is the Edge animate software full of bugs? Non-Responsive %, px, auto... all fail to do much at all.

I've now spent a good 20 hours racking my head and the various settings... and I'm nearly ready to look at Googles HTML5 and web software offerings, which is frustrating since I pay for the Adobe Creative Suite already.
What would I like to do: (I've simplified my overall aim)
Have a non-responve banner, 1200 x 100.
When I scale down my browser window I want one item (i.e. a box) to stay in the centre, even when the rest of the scene has been cut off. (*it does not need to scale)
- I've tried the presets for responsive layout which do nothing when tested in the browser (I'm using Safari, I'll test in others once it works...).
- The scene is set to be centred, which works. The whole scene is centred in the browser.
I've tried setting the Top, Bottom CSS controllers for the object to % which I believe is correct, but still no success...
I've now tried every other variable I can think of with out success using the some what confusing mixture of '%', 'px' and 'auto' settings.
I've also tried the responsive layout presets for a square drawn directly inside of Edge Animate, and an image dropped into the scene, which has more preset options (all of which seem to have little to not effect whether my scene is responsive or not).
Can someone please put me out of my misery and either tell me I'm missing the obvious problem. Or tell me the software is indeed broken at the moment and doesn't like Apple Safari.
And incase your wondering what I want to do... I'm trying to emulate the setup this website has at the top of their website. Where the embedded vimeo player (I've succeeded in doing that in Edge animate... yey) remains centred whilst a foreground layer and background layer change as the browser window is scaled... (they simply get cut off by the browser window scaling, aligned to the left, centre or right they're not responsive...)
http://www.kasradesign.com/
Many thanks for any help
Regards
Jon

And the saga rolls on. BT called me this morning with another update. Openreach still cannot find my address or my BT phone number / line. It will take another 4 working days for Openreach to contact BT with an update. The BT department who are calling me are the 'fast track' team in Blackburn who I'm afraid to say are anything but. He seemed completely indifferent and thought this was completely acceptable. When I challenged him for an explantion of why more delays, he tried to hind behind the "it is not our fault, it is Openreach" excuse. They sent an email to Openreach last Wednesday 25 July, they received an automated reply on Friday night so too late to do anything until today, and the reply that came back is there is a fault with my address / phone number that they need to fix, which is what I was told last week, and apparently BT cannot phone Openreach, it all has to be done by email. Unbelievable! So the clock starts again from today and the waiting game begins again.

Responsive scaling of animation in Edge Animate

I am inserting an animation into a responsive web page. I have gotten the design to scale in either direction (horizontally and vertically) in both Animate and a browser but cannot get the animation to scale in both height and width when the browser window size is just narrowed or the page is served up to a mobile device (tablet or phone.) I created a simple test comparison at this link: http://www.users.cloud9.net/~agoltz/edgeTest/animateTest.html I've embedded the CSS styles in the document so they can be evaluated (be kind...I'm an amateur)
If the browser window is narrowed the animation just gets narrower but doesn't scale vertically. The static image scales in both directions as the width of the window or device narrows. I'm looking for the same behavior with the animation. I hope I'm just missing something (not an unusual occurance) and not that this is a limitation of Animate since Flash is no longer a universal option. Any thoughts? Thanks.

Hi Rodlab2x
Thank you for sharing your tests. Interesting to see comparison between Amazium and Bootstrap. Which is which by the way?
I'm impressed, particularly with the first one (http://www.lab2x.com/pacificdental/) because it almost appears to be scale-to-fit in places. In fact, for a moment, you had me fooled and I thought you'd solved it!
I think you've come up with probably the best possible solution at the moment.
Let me just check that I've understood your site correctly?:
You have 3 versions of the header panel that the site swaps to as the browser size is reduced:
1. The large one. This is an Edge Animate animation and uses all the feature in the 'Resize' lesson - ie. it scales horizontally but the height remains the same.
2. The middle one. This is a smaller Edge Animate animation with the same features as above.
3. The small one. (This is the one that fooled me for a moment!). This may be Edge Animate - BUT it's not an animation at all. It is a still image - and therefore able to scale proportionately
Just a suggestion - you could go further and add some animation to the smallest header. If you only use images, not graphics, then you can achieve scaleable animation. Just try making the graphics png files with transparency. Might help if each layer png is the same width and height as the background image. Only issue is - I don't know if the file size will be prohibitively big.
Cheers

How to link Edge animate elements with wordpress div id

Dear all,
I have an animation uploaded on wordpress with edge Suit;
In the animation there are some links to the sections of the page, but they don't work.
In my edge file I linked the elements to the wordpress sections just adding code "click ==> links ==> link in the same window -- window.open("http://mywebsite/#section", "_self");
I am sure its really easy to solve it, but i have some Jquery lacks.
thanks for your help
Alessio
Message was edited by: alessio Calveri

I can only imagine how miffed Adobe's technical team must be and I don't want to add unnecessarily to any stress. For what it's worth, I really liked working with the Edge Animate interface and want things to work out because it would be my first preference - but of course not if I have to recreate content elsewhere for the iPad.
Whether iOS7 has a bug or otherwise, I wonder if there are any simple workarounds. For example, there is an extension that outputs HTML5 from InDesign, including media overlays:
http://ajarproductions.com/pages/products/in5/#showMoreFeatures
https://www.youtube.com/watch?v=ku4Ql8GE1m8
Perhaps Adobe can create an updated step-by-step guide for inserting Flash canvas animations and Captivate HTML5 using this extension. Then maybe even show how to wrap the final content as EPUB3. This would be in lieu of this demo: https://blogs.adobe.com/captivate/2013/08/a-step-by-step-guide-to-create-an-interactive-eb ook.html. For people like me who use Adobe's products because of their front-end niceties (i.e. we don't want to dig too much into code), it would help resolve many issues here. DPS not an option - would rather go with PubCoder in that case.
Good luck anyway!

Edge Animate media queries (not responsive scaling)

Is is possible to use media queries with edge animate? For example, if the screen width is less than 480px then resize the stage from 900x700px to 320x480px? Or add/change properties like float?

If your product was installed via the Creative Cloud, you should be able to update it using the Creative Cloud. If your product was installed via other media (like from the DVD), you will not be able to update it using the Creative Cloud. Now that CC has launched, you might want to look at upgrading now and try it out now.
Thanks,
-Elaine

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>

Responsive Edge Animate in a Div

Similar Messages

Maybe you are looking for