Edge Animate loading jquery twice. External jquery plugin error.

I recently created an interactive map (http://www.lakesofbellaterra.com/Interactive_Map_Demo/Testing/test1.html) using Edge Animate CC 2014.1.1 Release. I used the zoom.min.js plugin from jQuery Zoom to achieve the zooming image effect present when you click on one of the map section and reveal the "section modal". Further more the zoom.js plugin uses jquery 1.7.1. I am deploying this Edge Animate project in a Business Catalyst site using a content holder. Even though the zoom.js plugin works with Internet Explorer 7+ and Firefox I initially was not able to get the zoom.js plugin to work in either browser. After changing the <meta> in the <head> to <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1"> via suggestion from StackOverflow (internet explorer - What's the difference if <meta http-equiv="X-UA-Compatible" content="IE=edge"> exists or not? - Stac…) I was able to get the zoom image function to work in Internet Explorer 9+. So now I just need to get this function working in the current version of Firefox 35.0.1. As of now when I click on the zoom image nothing happens. The console in firebug reports the following JS related errors:
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. LOBT-IxD-SectionMap_edge.js
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery-1.7.1.min.js
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery.easing.1.3.js
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery.zoom-min.js
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. jquery.zoom-min.js
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
After some research I found a lead (WordPress › Support » how to prevent jquery loading twice?) That suggested that Edge Animate may be loading jquery twice, and that may be the source of the errors. I need to find out why this animation is not working in Firefox.
Here is a list of things I have already tried that did not work:
-Changing the utf charset to : <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
-Changing the version of jquery used from 1.7.1 to the latest release of 1.11.2
-Changing the image source referenced in the zoom.js call from a .svg to a .png
-Removing any scripts that may conflict with Edge Animate or zoom.min.js that are being called from within the Business Catalyst page template.
-Running the project outside of Business Cataylst to see if the error persists (it does)
Here a link to the Edge Animate project: Dropbox - LOBT Interactive Section Map
As always any help is determining why Edge Animate projects with a zoom.js plugin do not work in Firefox 35.0.1 would be most appreciated.

Hi jeremy
Thanks for sharing the info. We'll look into this and get back.
Thanks
Manigandan

Similar Messages

Edge Animate loads JS files twice

HI,
Does anyone know why Edge animate loads all the javascript files and JQuery and Edge Libraries twice. Is there a way to prevent or override this?
When profiling my animation with Safari and Chrome, in the Network requiements you can see that these file are loaded twice, increasing the network requirements.
It seems that the first time the format is not recognized given that the icon next to the files is for IMG. The second time it is loaded then it gets the icon for JS.
Has anyone seen this?

Sarah,
Yes, this is the only way Yepnope 1.0.x works and 1.5.x still does such things. There are changes in this area in 1.5.x though. Yepnope exposed two direct methods to inject JS and CSS files. So yepnope({load: ...}) will preload files first and inject them after. Direct methods don't preload files. As far as Edge Animate doesn't use full power of yepnope, there is good chance that direct method will work good:
yepnope.injectJs( scriptSource [, callback ] [, elemAttributes ] [, timeout ]);
yepnope.injectCss( stylesheetSource [, callback ] [, elemAttributes ] [, timeout ]);
Simplest testcase:
<!DOCTYPE html>
<html>
<head>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/yepnope/1.5.4/yepnope.min.js"></script>
          <script>
                    yepnope.injectCss('http://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css');
                    yepnope.injectJs('http://cdnjs.cloudflare.com/ajax/libs/Base64/0.1.3/base64.min.js')
          </script>
</head>
<body>
</body>
</html>

Adding html into edge animate text box from external js file

I have a text field in edge animate that I want to update with a score. The function that is used to click and update the score is in an enternal file so I'm trying to figure out how to get my edge animate div to be read by jquery in the external file. This is what I have so far in the external js but it isn't reading the edge animate text field properly:
external .js file:
        AdobeEdge.coinCounter += 250; // this calls the variable coinCounter which was set in edgeActions.js and updates it from the original 0 value
                alert(AdobeEdge.coinCounter); // this shows it works and updated correctly
       var comp = AdobeEdge.getComposition("EDGE-172492634");
       var stage = comp.getStage();
     stage.sym.$("gameText").html(AdobeEdge.coinCounter); // this is where things go wrong. I want this updated value to read back into the textbox called "gameText" that is in the edgeAnimate composition
      stage.sym.$("gameText").html("NewText"); // nothing reads to the "gameText" textbox; something must be wrong how I am referencing it outside of edgeActions in the external .js file
Would someone mind helping me reference the textbox "gameText" correctly so I can input my new value? Thank you!!

Thank you. The learning curve is taking me awhile. It works now:
    var checking = AdobeEdge.getComposition("EDGE-172492634").getStage().$("gameText").text();
    alert(checking); //yay!
Thanks Joel!

Edge Animate 1.0 and external css

Hello and Happy Friday All,
I'm having issues getting an external css to work inside my Edge Animate project.
I'm importing the css like so on the compositionReady area of the stage actions:
$("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"mmt_stylesheet.css" }).appendTo("#Stage");
My css is in the same directory as the rest of my edge files.
In my css file I have things written like so:
#Stage_#testing {
font-color: rgba (255,255,255,0.6)!important;
#Stage_#testing2 {
background-color: #0F0 !important;
width: 600px !important;
In my edge file I have one text file on the stage with the instant name of testing and a symbol of a simple rectangle with the instant name of testing2.
I am not seeing any styling when I previw the edge project. Any help would be much appreciated. Thanks

IE 10 - Sorry but I am new to this and do not know what you mean by "prefixes"
I have also tried this in Chrome and Firefox and the jpg does not load.
Do you know of another way of doing this? I thought it would be easy in Animate but it just seems very complex.
If I do this in a HTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="mmt_stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="earth"></div>
</body>
</html>
With a css file of
@charset "utf-8";
/* CSS Document */
#earth {
width: 100px;
height: 100px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
border-radius: 50%;
background-size: 210px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
This works fine in all browsers - add this to Edge and it does not work.

Lesson for Adobe Edge Animate

Hello Everyone.
OK. Have been doing Edge Lesson's for quite nearly a year now, and wanted to share them with the community.
If you have any request or questions, please feel free to post them to the video links below, or in here, and I will
Try my best to assist you any way that I can.
Edge Animate has really come a long ways, and with the new CC, it has taken on a life of its own.
Look forward to what the future may bring with this awesome Adobe program release.
Wayne Barron
Dark Effects Production
Adding sound to Mouseover event in Adobe Edge Animate
3:42
1
Adobe Edge Animate - Add Sound in Mouseover Event
by darkeffectstv 1,987 viewsIn this video, we will learn how to add sound to a buttons Mouseover event in Adobe Edge Animate.…
Learning how to add sound to Adobe Edge Animate
7:08
2
Adobe Edge Animate Adding Sound to Project
by darkeffectstv 5,031 viewsAdobe Edge Animate Adding Sound to Project…
Remake, as the cursor was not in the last videos.
4:10
3
Adobe Edge Animate - Mirror Text Effects with Wipe On Text (Lesson 3) (Remake)
by darkeffectstv 447 viewsRemake with "Cursor" this time…
Remake, with Cursor
3:49
4
Adobe Edge Animate - Load Background Image (Lesson 3) (remake)
by darkeffectstv 1,050 viewsremake with Cursor, as Cursor was not int he original one.…
2:00
5
Adobe Edge Animate Starting Symbol at certain location
by darkeffectstv 245 viewsIn this quick tip.
We are going to stop a symbol from playing.…
6:53
6
Adobe Edge Animate Animate Logo to show and hide words
by darkeffectstv 418 viewsIn this lesson, we are going to learn how to take an Image (Like a LOGO for a company) and animate it on the screen, and show and hide words.…
5:44
7
Adobe Edge Animate Publish Files and JS Folder
by darkeffectstv 758 viewsIn this lesson, we will guide you through the ins and outs of publishing your site from Adobe Edge Animate, to a web server.…
6:19
8
Adobe Edge Animate Create a Pen and write a Line
by darkeffectstv 527 viewsIn this lesson, we are going to create a Pen, then write 2 lines.
This can be used in so many different projects, that it is endless.…
2:34
9
Adobe Edge Animate Rollover Button
by darkeffectstv 2,195 viewsIn this lesson, I will show you how to code a Rollover Button.
This is a very simple and easy way to create a Rollover Button, with very little effort.…
4:06
10
Adobe Edge Animate show Grid to fine tune your Animation
by darkeffectstv 77 viewsHave a lot of Animation in your project?
In this lesson, we are going to show you how to fine tune your animation down to the 30th of a second…
16:49
11
Adobe Edge Animate Create a Menu
by darkeffectstv 4,993 viewsIn this lesson, we are going to be creating an animated interactive menu, that is sure to grab your users attention.…
12:30
12
Adobe Edge Animate Menu Slide Down
by darkeffectstv 1,175 viewsIn this lesson, we are going to showing you how to create a Sliding Down Menu.
This was really big a few years ago, a lot of sites had these types of menus…
9:45
13
Adobe Edge Animate Menu Slide In from Left
by darkeffectstv 358 viewsIn this lesson, we are going to be creating a cool little menu that will slide in from the left.
I have never seen one like this before, and thought that I would create one, to see if it would work good,…
4:29
14
Adobe Edge Animate Pin and Timeline Indicator
by darkeffectstv 153 viewsIn this lesson, we are going to go over some basics on how to use the Pin and the timeline indicator. This will come in handy, if you have a big project and you wonder what happened, if something messes up …
16:43
15
Adobe Edge Animate Menu Button Header Footer
by darkeffectstv 905 viewsIn this lesson, we are going to be creating a Menu Button, with a Header and Footer.
This is a cool looking button, that will come in handy for some sites.…
12:56
16
Adobe Edge Animate - Shot Bullet from Gun and hit Wall
by darkeffectstv 110 viewsIn this lesson, we are going to be creating a gun, a bullet, a wall.
We are then going to shot the bullet, out of the gun, and destroy the wall.…
7:44
17
Adobe Edge Animate Menu Rollover Buttons
by darkeffectstv 1,047 viewsIn this lesson we are going to create some Rollover Menu Buttons.…
4:11
18
Adobe Edge Animate - Animate Ball Bounce Squish
by darkeffectstv 172 viewsIn this lesson, we are going to animate a ball, of which is going to bounce on the floor, and once it makes contact with the floor, it is going to squish down, just like a real ball will do.…
6:16
19
Adobe Edge Animate - Change Text when Button is clicked
by darkeffectstv 353 viewsIn this lesson, we are going to learn how to change the text of Textfield, when a button is clicked.
reusing the same Text Element over and over again, keeps the project clean and tidy.…
4:02
20
Adobe Edge Animate - Space Demonstration (Lesson coming soon!)
by darkeffectstv 49 viewsThis is a demonstration of a project that I have been working on for the last few days. This will be turned into a lesson, that will be available within the next week or so…
21:37
21
Adobe Edge Animate - Lesson 1 Space Project
by darkeffectstv 87 viewsAdobe Edge Animate space project, showing how to rotate elements around a centered element. Also, how to reuse the same text element over again…
9:32
22
Adobe Edge Animate - lesson 2 Display Planet Information using single text element
by darkeffectstv 61 viewsview lesson #1 first:
http://youtu.be/16GOY1QOD_…
1:39
23
Adobe Edge Animate - Open Link
by darkeffectstv 227 viewsIn this quick how to lesson.
We are going to create a link on Adobe Edge Animate.…
2:31
24
Adobe Edge Animate - Add Sound in MouseOut Event Part II
by darkeffectstv 192 viewsThis is a follow up to a previous lesson.
Please view the following lesson to catch up to what this is all about…
1:28
25

Here are 2 video using "Edge Hero"
Adobe Edge Animate - Edge Hero Lesson 1 - 3d Objects
by darkeffectstv 107 viewsIn this lesson, we are going to be working with a new plugin for Edge Animate called
Edge Hero…
6:55
2
Adobe Edge Animate CC Lesson #2 - Loading Video with Edge Hero
by darkeffectstv 40 viewsIn this lesson, we are going to load some video into our edge project using Edge Her…
And this is the latest video for Edge Animate CC
Adobe Edge Animate CC - Lesson #3 - Animate ball bouncing on boxes and changing colors
http://youtu.be/MxxpQspBpcw

Adobe Edge Animate 2014 Can't Start! -- "d3dx9_43.dll" missing. Multiple re-installs same problem. Help?? :(

This is the Dialogue I am presented after every attempt to launch Adobe Edge Animate CC 2014.
"EdgeAnimate.exe - System Error"
"The program can't start because C:\Program Files (x86)\Adobe\Adobe Edge Animate CC 2014\cef\d3dx9_43.dll is missing from your computer. Try reinstalling the program to fix this problem."
I've re-installed Edge Animate several times now, even restarting computer between installs. For whatever reason, whenever Edge Animate is installed, this particular "d3dx9_43.dll" file will not install along with. What can I do? I use Animate frequently enough that this will become an issue if it cannot resolve soon. Please help.

Hi,
It looks like this problem is related to the OS. Found this through Google
http://answers.microsoft.com/en-us/windows/forum/windows_7-gaming/system-error-the-program -cant-start-because/261e2bb5-2e75-e011-8dfc-68b599b31bf5
http://pcsupport.about.com/od/findbyerrormessage/a/d3dx9_43-dll-not-found-missing-error.ht m
Thanks,
Preran

Edge Animate error when trying to install

I'm getting an incomplete install when I try to download and install Edge Animate:
Exit Code: 6
Please see specific errors below for troubleshooting. For example, ERROR:
-------------------------------------- Summary --------------------------------------
- 0 fatal error(s), 1 error(s)
----------- Payload: DirectX 10.0.0.0 {9DDAF699-BA5E-48e3-8A09-7AC369D6EEA1} -----------
ERROR: Third party payload installer DXSETUP.exe failed with exit code: -9

Re: Edge Animate error when trying to install
created by Jeff A Wright in Downloading, Installing, Setting Up - View the full discussion
Edward do you meet or exceed the system requirements listed at http://html.adobe.com/edge/animate/tech-specs.html?
Jip I sure do!
I checked the program in discussion just for the heck of it and it works. But when using the Adobe applications manager it says not correctly installed. So I don't know what is going on there!
It is just unappreciated to have people like Mylenium give such unhelpful replies to customers who are really keen on learning and using your new products.
(I must probably add that I have tried installing the demo version of Photoshop CS6 when it was just released and caused a serious error. And when I wanted to uninstall it, the uninstaller suggested I use Adobe removal software to remove the demo software... this also did not work properly and I’m still stuck with a error message every time I log on to my windows account)
But thank for the prompt reply Jeff, keep it up.

Integrating External JQUERY code with Edge Animate

Hi all...
There are two ways i can see of integrating Edge Animate With External JQuery
Something happens within Adobe edge and triggers something to happen externally or vice versa.....
1: When an action is performed (mouseUp MouseOver... etc...) we can initiate some external Jquery
For example
When I "mouseUp" my play button i run the function "playPause()" and my audio starts to play
function playPause(){
    if( $("#liveStream").data("jPlayer").status.paused ) {
        $("#liveStream").jPlayer("play");
    else {
        $("#liveStream").jPlayer("pause");
So this is fine... i perform an action in Adobe Edge and something external to the composition occurs, in this case it connects to a live stream of audio and the user gets the desired result.
2:When an event occurs in external Jquery (playing, connection lost, audio not ready... etc...) we can perform an action within Adobe Edge
For example
When the audio stream is playing and the user is definatly hearing music i need to perform an action within Adobe Edge like "sym.$("playButton").hide();" which hides the play button because obviously there is no need to click play anymore when the music is already playing..
This is were my Jquery understanding ends..
Questions:
1: Where do i put global code within my Adobe Edge composition that triggers actions when external jQuery returns an event
2: How do i go about coding this...
Below is my best attempt
function playStatus(){
     $("#liveStream").bind($.jPlayer.event.playing, function (event) {
          sym.$("playButton").hide();
Now my attempt is probably way off the truth but im hoping you understand what i am trying to achieve..
Thank you for reading this through
Any advice would be greatly appreciated.....
Justin..

Hi, thanks for the assistance....
I have tried to integrate the following code into the "creationComplete event"
//Initiate JPlayer
$(document).ready(function(){
    var stream = {
        mp3: "http://streaming.radionomy.com/ABC-Jazz"
    ready = false;
    $("#liveStream").jPlayer({
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream);
        pause: function() {
            $(this).jPlayer("clearMedia");
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream).jPlayer("play");
        swfPath: "js",
        supplied: "mp3",
        preload: "none",
        wmode: "window",
        keyEnabled: true
//Create function for Play & Pause
function playPause(){
    if( $("#liveStream").data("jPlayer").status.paused ) {
        $("#liveStream").jPlayer("play");
    else {
        $("#liveStream").jPlayer("pause");
The above code used to be within a player.js file that i called into edge, As you have recomended to me i have moved this code to within edge...
When i try to play the stream i get the following error from the console "Javascript error in event handler! Event Type = element"
It is refering to edge.3.0.0.min.js
In a bit stuck now as to why it is not working....
This error is usually generated when the scripts are not talking to each other so im guessing it should be an easy one for you guys as my knowledge of jquery is not great!

Will Edge Animate work nicely with a pre-existing site that already uses some jQuery plugins?

I have a site started and I am using the Quicksand plugin for jQuery that sorts and filters objects on my page, will Edge Animate work with that code, or do I have to do something to keep everything working?
Thanks all!
Aza

Hi jeremy
Thanks for sharing the info. We'll look into this and get back.
Thanks
Manigandan

Adobe Edge Animate CC and jQuery Reel

Hi!
Is there a step-by-step tutorial how to include popular jQuery Reel plugin with Edge Animate project?
I mean to insert 360-rotation image gallery inside project in WYSIWYG mode of Edge Animate.
I know there's possibility to import js files, but when i import jQuery Reel .js file and then put image on scene and add "reel" class to it - nothing works.

Check out my tutorial here:
MJ Page Design

Help with jQuery and Edge Animate

Hello there. I am new to Adobe Edge Animate and have had a lot of trouble loading my jQuery into the project for drag and drop features. Do you have any recommendations, suggestions, tutoring? I am in Upstate New York.
Many thanks!

Thank you, thank you, thank you for all of your help so far. It took me a while to figure out what the error was that I was having. Unfortunately, I know the error but not the cause. The file you sent from the dropbox did not work, but I had a few other samples, one from your website, and one from Lynda.com. I assumed the jQuery library was not loading properly-
I went back and forth to the different Animate project folders, and by comparing those that worked with those that didn't, I was able to copy the jQuery libraries and place them in the correct location- until I got it right. So, I was able to continue with the Draggable feature, but I am not sure why the files were not adding to the right folders- I will have to continue to practice so I don't have to duplicate a folder and project to start out right.
The files I moved were:
In the JS folder:
and the Edge Includes folder:
For some reason, the jqueery-2.0.3.min.js needed to be there as well, and I think this might have been the error.
Anyway...
So I have the Draggable working, here is a sample:
http://mrteelin.com/Superhero2/Superhero2.html
Before I moved on to the drop feature, I wanted to see if the drag would work on an iPad. I am going to be creating personalized refrigerator magnets for students for the iPad, so just draggable to start will be helpful. I have added the touch-punch and then added the draggable code to the starttouch tab, but it isn't working.
Here is a .zip if anyone is brave enough to keep helping!
http://mrteelin.com/Superhero.zip
Thanks again!

Edge Animate code into Dreamweaver jquery mobile theme?

I am having trouble getting my Edge Animate file to work on my Dreamweaver jquery mobile theme web site. I was told to get the code from my animate file and put it in my dreamweaver web site. Kind of like this.....copy the Edge runtime code, paste in web site under <head>. Then copy div stage code, and paste it in my website under the content div. I just cant seem to get it to work. It shows up blank.

Ok, i got it. I was making this a lot harder then it needed to be. If anyone else has this problem, you just publish your project when in Adobe Edge Animate, then save in the folder you are using for your website. Then in Dreamweaver you can go to insert media, find the file and insert it. All is well.

Adobe Edge Animate JavaScript Coding issues/page load time speeds

To let you have an idea of my skill set I have a background in animation and design and have been taking classes in web development. My question is about how to create an interactive website that loads various animation depending on the user's choice and current place within the Adobe Edge Animate timeline. The website I developed for a client @ www.goshowpro.com works but loads slower than I want and doesn't format properly on my client's Macbook (I believe he needs to update his browsers but that is something else.)
So as you can see from looking at my website I used a multitude of HTML files to create my vision of an interactive website based off of a theatrical stage. I know this is not an ideal method. I would prefer to have it all on one page but I am having trouble with my javascript coding. I was wondering if there would be away to expedite my current site's load time and if not if you could look at my NEW coding. (This IS NOT the current coding on the site.)
if = "hstop" "chomstop" "shomstop" "phomstop"
{sym.play("hporstart")};
else = "hconstop" "sconstop" "pconstop"
{sym.play("cporstart")};
else = "hserstop" "cserstop" "pserstop"
{sym.play("sporstart")};
It looks crappy but I'm trying to learn so don't laugh too much. Thanks again.
Michael

Hi, Marlene-
We currently bundle jQuery 1.7.1 with the Animate runtime. In order to call fadeOut() on the element newSquare, you would do the following:
sym.$("newSquare").fadeOut();
OR
sym.getSymbol("newSquare").getSymbolElement().fadeOut();
Hope that helps!
-Elaine

Adobe Edge Animate CC image loading bug

hello,
The animation which i created in Adobe Edge Animate which is published for web, and when i load the main file in browser noticed that the images which i used inside the Edge Animate for animations are loading two times one with "edge.3.0.0.min.js:240" and "jquery-2.0.3.min.js:5", i hope this is a bug. how can i a avoided this multiple loading of same image files.

Hi, canpark-
We do not have a Korean localized version of Edge Animate, sorry!
-Elaine

How do I pass a variable from edge animate to an external JS?

I need to pass a variable value from Edge Animate to an external JS file. How can I do it?

Not sure if this is the best way ,but works
Set the variable as a property of a global variable
Like
SET
window.myVar = 'your value';
AdobeEdge.myVar = 'your value';
Read
window.myVar
AdobeEdge.myVar

Edge Animate loading jquery twice. External jquery plugin error.

Similar Messages

Maybe you are looking for