Responsive animation with script - not ok in Wordpress

Question

Hi,
I ahve been following Adobe Product Manager Sarah Justine's tutorial (http://sarahjustine.com) on how to make an animation responsive. She has created a script that seems to work perfectly when you resize your browser or use a handheld device. Script is inserted into the "Stage" component:
(choose compositionReady in dropdown and add code below)
var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage
sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-origin":"0 0"
function scaleStage() {
    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage
    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage
    var parentWidth = stage.parent().width(); // Get the parent of the stage width
    var stageWidth = stage.width(); // Get the stage width
    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales
    var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales
// Rescale the stage!
           stage.css('transform', 'scale(' + rescale + ')');
    stage.css(  '-o-transform', 'scale(' + rescale + ')');
           stage.css('-ms-transform', 'scale(' + rescale + ')');
    stage.css('-webkit-transform', 'scale(' + rescale + ')');
           stage.css('-moz-transform', 'scale(' + rescale + ')');
    stage.css('-o-transform', 'scale(' + rescale + ')');
    parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts
// Make it happen when the browser resizes
$(window).on('resize', function(){
           scaleStage();
// Make it happen when the page first loads
$(document).ready(function(){
    scaleStage();
My problem is that I use Wordpress and the Edge Animate plug-in and when I insert the animation there the script seems to do nothing. I'm not a coder so I have no idea what might be happening. I'm going to post this on the Wordpress plug-in support page and see is the developer has any ideas. I'll report back about that.
Any help would be greatly appreciated since this script seems very useful!
Regards
Johan

Answer 1

Ok, so the creator of the script, Sarah Justine came up with this solution:
I was able to get this to work, but not using shortcodes.
Follow the same method of uploading an OAM as you normally would. We’re going to use HTML instead of shortcodes, and Edge Suite will still populate your page with the necessary files.
Instead of the shortcode, use this:
<div style="width:100%; height:auto"><div id="Stage" class="EDGE-78729757"></div></div>
You can change the width to be whatever % you want and add some more inline CSS. Grab the class name from whatever Edge Suite reports from the composition.
I can't get this to work sadly. Continuing discssion with Sarah.
The WP plug-in developer came up with this change to the actual script:
The fix is actually quiet simple, just remove the # in front of '#Stage' within
sym.$(&quot;#Stage&quot;).css so it says sym.$(&quot;Stage&quot;).css. That should fix the whole thing and it should also work with shortcodes. Let me know if that solves it for you.
I couldn't get this to work either! Discussion continues.
Johan