Script loading conflict? Object has no method error when including Adobe Edge Animation

Question

I've got a real hairpuller: I have a webpage that uses jquery, jquery-ui and flexslider. Everything works fine. Now I want to include an animation I have made with Adobe Edge Animator. The animation works fine by itself,but when I include it in the page for some reason it seems to break jquery-ui and flexslider - I get

Uncaught TypeError: Object [object Object] has no method 'dialog'

Uncaught TypeError: Object [object Object] has no method 'flexslider'

even though the scriüpts are loaded and everything works when I take the

<script type="text/javascript" charset="utf-8" src="ani_1_edgePreload.js"></script>

out again.

I've tried using jquery noconflict, rearranging script sequence but to no avail.

What's really weird is that if I call the page with a certain parameter that pops open a jquery-ui dialog onload, the dialog actualy opens, but once the animation has loaded I get above error again.

I've set up testcases here:

This is the page with dialogs and flexslider working:

http://s149471880.online.de/

This is the page with the animation where dialogs and flexslider DON'T work:

http://s149471880.online.de/?ani=1

Any help would be greatly appreciated!

Answer 1

Load the animation in an i frame

<iframe src="/animation/Animation.html" width="980" marginwidth="0" height="350" marginheight="0" scrolling="no" frameborder="0"> </iframe>

then it doesn't conflict.