Adobe Edge noConflict fix

Recently our designer here at Skynet Solutions, Inc. started playing around with Adobe Edge, which helps create animation using HTML5, CSS3, and JavaScript. He sent over some files and asked me if I could get them to work on our website. The request sounded simple enough. However, I quickly ran into issues since Edge uses jQuery and Skynet has a strong history of using a different library, Mootools. I realized this and put it in noConflict mode, yet it still didn’t work. Even though Edge was passing the noConflict variable jQuery, it was not using it the entire time within itself; often the variable it renamed it to was overwritten by another variable or function.

The attached file can overwrite the original folder “edge_includes.” I left the original files for reference which have a appended underscore before the file names.

You will still need to do slight editing on your project file that it provided which is rather simple. At the bottom of the file I started with:

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
 $.Edge.initialize(symbols);
});
/**
 * Adobe Edge Timeline Launch
 */
$(window).load(function() {
  $.Edge.play();
});

I simply added the noConflict() function and changed the four instances of “$” to “jQuery”.

/**
 * Adobe Edge DOM Ready Event Handler
 */
jQuery.noConflict();
jQuery(window).ready(function() {
  jQuery.Edge.initialize(symbols);
});
/**
 * Adobe Edge Timeline Launch
 */
jQuery(window).load(function() {
  jQuery.Edge.play();
});

Download “edge_includes” files.

(Source: Skynet Solutions)

By Blaine Schmeisser