Edge Animate files not working in CMS

Question

I published my edge animate project. I'm using a CMS called Composica and it doesn't support .OAM files but I can put html files into a page with an iframe that calls javascript. I have done it on html and js files that were not produced by Edge and it works fine. But when I try to put the edge html file and three supporting .js files it does not work.

This particular CMS has all of the files located together so I changed the pathing for the following:

1. Changed location of images file path in edge.js document because images in Composica are not in a seperate folder but in the same folder as the files that are calling the pics:

im='images/' changed to: im=''

1. Change file path of the two jquery library docs in edgePreload.js:

   { load: "edge_includes/jquery-1.7.1.min.js"} > { load: "jquery-1.7.1.min.js"}

   { load: "edge_includes/edge.2.0.1.min.js"} > { load: "edge.2.0.1.min.js"}

So unless their is something I am overlooking I believe all of the files have the correct path. So then I took a javascript alert and tried it in different locations to see what is not working. The html page is working and calls the edgePreload.js page correctly. But when I place the alert on the last two javascript files (edge.js, and edgeActions.js) it is obvious that this is what is not being called correctly. On the edgePreload.js file I tried the alert in these locations:

// tried alert here and was successful!
   aLoader = [


    { load: "jquery-1.7.1.min.js"},
    { load: "edge.2.0.1.min.js"},
          { load: "coachingEssentialsTug_edge.js"},
          { load: "coachingEssentialsTug_edgeActions.js"}];

 // tried alert here and was successful!
        //alert("Hello! I am an alert box!!");

When I tried the alert inside the aLoader I got nothing... so for some reason it is this very spot that is not allowing me to successfully connect to those two javascript files.

Please any suggestions would be appreciated!

Answer 1

So I had a problem similar to this awhile back, I wanted to call Adobe Edge projects to a webpages but did not want to store all the files in one location on my server, I finally found the solution there is not much information on the web how to do this so I will do my best to try to help you. It looks like you know about changing the .js file locations but I am going to explain it so someone else with a similar problem knows what to do. So what I do know if you start moving Edges files around it gets cranky fast. So lets take my situation for an example I have a webpage in my root folder for my website and I have an Edge folder that I store all my Edge files in. In order for me to call on an animation on the web page in the root folder I need to change a few things in the edgePreload.js file, there are four things you need to change, these are what mine look like:

Edge/Icons/edge_includes/jquery-1.7.1.min.js    
Edge/Icons/edge_includes/edge.2.0.1.min.js   
Edge/Icons/icons_edge.js  
Edge/Icons/icons_edgeActions.js

*Note I would use ctrl f to find these files because this .js file is not neatly written.

You see I had to add "Edge/Icons/ so that way the .js file knows where to look. Also if you are going to have images you will need to change the edge.js file, my file looks like this "var im='Edge/Icons/images/';"

(ristenk1 I think this last step maybe what you are lacking, or you just didnt mention it, instead of using an iFrame try just using a div)

Last but not least the web page that you want these animations to show up on you need to add something that looks like this to your < head> tag. This can be in the .html file in your published edge project, every project you publish has a unique id.

<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="Edge/Icons/icons_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-42407812 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

Then in the body where you would like this to show up use:

<div id="Stage" class="EDGE-42407812">
    </div>

Also here are a few resources I have found on this:

http://www.danielhanly.com/blog/tutorial/adobe-edge-embedding-animations-page/

http://www.vbulletin.org/forum/showthread.php?t=277838

I think I have a couple more on my work computer I will try to post them tomorrow while at work. I hope this helps if you have any questions let me know.