4

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!

Community
  • 1
  • 1
John Doeherty
  • 99
  • 6
  • Most likely `ani_1_edgePreload.js` includes `jQuery` or overwrites `$`. – Kevin B May 10 '13 at 15:43
  • or it needs jQuery and you're including it too early. – Kevin B May 10 '13 at 15:49
  • 1
    Right now you're including two different versions of jQuery (1.7.1 and 1.8.3). You've also got multiple `$(document).ready()` functions as well as one inside `$(window).load()`. Try using `jQuery(document).ready(function($){ /* your code */ });` instead, this will rule out any conflict issues. – Joe May 10 '13 at 15:50
  • Thanks! I got rid of the 1.7.1 jQuery by editing Adobe's edgePreload.js (even though the comments in the file say you shouldn't). Using jQuery(document).ready(function($) (and rearranging here and there) solved the conflict and now everything works together. What I don't quite understand is why I have to have the flexslider initialisation insde 'jQuery(window).load(function($){' AND 'jQuery(document).ready(function($){' for it to work - if I take either away it stops working...? Working example: [link](http://s149471880.online.de/) – John Doeherty May 11 '13 at 13:37

1 Answers1

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.

Jaycin Van Vuuren
  • 11
  • 3