Adobe Edge (jQuery) symbols behaving unexpectedly: a cry for help.
April 25, 2014 6:40 AM   Subscribe

I've created rollover animations and click to link symbols which work fine on the first visit to the page. However on revisits, the animations break. I don't know enough about jQuery to spot what I am doing wrong. I've watched almost every tutorial on the topic on, posted a question (unanswered) in the forums and Googled all to no avail. I am certain it is simply a snippet of code I am missing.

The page is here

Clicking on any producer link will take you to the live site so hit back in your browser to return to the page. That when the animations start falling apart.

I would be eternally grateful if someone could point me in the right direction.
posted by kthanksbai to Computers & Internet (7 answers total)
Not broken for me.

Chrome 34, OSX
posted by fontophilic at 7:12 AM on April 25, 2014

Not broken for me, either. IE 8, Win 7.
posted by Falwless at 7:15 AM on April 25, 2014

Definitely broken in Firefox for me. The links are ok on a page refresh, but clicking through and going back breaks the animation.

I suspect that the problem lies somewhere in the fact that you're loading the rollover link things into iframes from multiple html files. It looks on first glance as if these little html files are being cached and the browser is attempting to preserve the last state they were in when you return to the main page.

I'd try putting the content inline instead of loading all of those html files. I don't know if it's you or Adobe Edge that's done that, but it seems like a weird way to achieve the outcome you've gone for.
posted by pipeski at 7:22 AM on April 25, 2014

It broke for me on reload (Chrome 34, OSX). In the dev console I get a bunch of messages like this:

Resource interpreted as Image but transferred with MIME type application/javascript: ""

I don't know much (anything) about Adobe Edge, but my (somewhat educated) guess is that it's a race condition going on here. Suppose some script (A) is interfering with another script (B), but on initial pageload B loads and runs first. On subsequent pageloads everything is cached, so A runs first and messes everything up.

Also, looking at the inspector it seems you have some hugely redundant Javascript in there. jquery-2.0.3.min.js and edge.3.0.0.min.js are both being loaded once for each element (from different URLs), something like 20 times each. You also have a copy of jquery-1.8.3.min.js in there for some reason.

This is not only hugely inefficient for bandwidth but could also cause script problems. jQuery is a well-behaved library that doesn't cause side effects when loaded, so I don't think that's the culprit, but I have no idea what Edge is doing. It's possible you have 20-something copies of Edge all trying to do the same thing to the webpage and interfering with each other.
posted by neckro23 at 7:43 AM on April 25, 2014

Oh, I didn't notice that the animations are in iframes as pipeski pointed out. You probably shouldn't be doing it that way.

Also, it seems that when the page is "broken" it still works eventually, but it takes several seconds for anything to show up.

So, new guess: The page works, but on initial load the browser only has to handle these Edge graphics one at a time as they load. On reload, they're all available immediately, but the browser suddenly has to crunch the huge scripts (remember, it's loading jQuery and Edge for every image) before anything starts to happen.

(I haven't looked too closely at the page, I'm just aiming at low-hanging fruit here.)
posted by neckro23 at 7:50 AM on April 25, 2014

The multiple copies of jquery and edge probably come from the many separate html files that are being loaded into the iframes (on preview, etc. etc.)
posted by pipeski at 7:50 AM on April 25, 2014

Thanks to all of you! I've seen discussion of Adobe Edge "bloat" and I suspect that it is indeed the culprit. I'm going to leave this unresolved in case someone with Edge experience may wander by. Again, I am deeply appreciative.
posted by kthanksbai at 9:48 AM on April 25, 2014

« Older Blogs written by bookstore employees or librarians   |   Homemade leather conditioners for a Coach purse? Newer »
This thread is closed to new comments.