Getting jmpress.js working with Adobe Edge Animate div positioning?

[Mike Pinder]

Hi all, I've just integrated jmpress.js with Adobe Edge and have got different <div>'s to work with jmpress step classes. The problem is that Edge Animate uses HTML5 to statically position the div's on the Stage and that messes with the way in which jmpress.js renders the div's in the transistions. Is there any way to get jmpress.js to work cleanly with Edge Animate's HTML5 GUI and div positioning?

Here is what Edge outputs for a jmpress.js step div class layer within its container div:

<div id="Stage_first" class="Stage_first_id step" data-x="0" data-y="0" data-z="0" data-rotate-y="0" data-scale="0" style="position: absolute; margin: 0px; left: 258px; top: 135px; width: 450px; height: 450px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); background-color: rgb(49, 180, 106); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; -webkit-transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);"><div id="Stage_Text" class="Stage_Text_id" style="position: absolute; margin: 0px; left: 73px; top: 57px; width: auto; height: auto; right: auto; bottom: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: rgb(0, 0, 0); font-weight: normal; text-decoration: none; white-space: nowrap;">slide 1</div></div>

Any help would be much appreciated!

[Mike Pinder]

I managed to solve it in fact, so here is what I did in my CompositionReady...

You can now assign jmpress commands to your div's as follows using jQuery attr:

sym.$('first').attr({
   "data-x": -10,
   "data-y": 0,
   "data-z": -900,
   "data-rotate-y": 0,
   "data-scale": 0
});

Then call your jmpress:

sym.$("jmpress").jmpress({
//originX: "40%",
//originY: "40%"
});

Then assign positional information to the <div id "jmpress"></div> that you are using. Put this as well in your CompositionReady:

sym.$('jmpress').css("top", "50%" );
sym.$('jmpress').css("left", "50%" );

Then you have to strip out the inline div attributes in Edge Animate for width and height for your jmpress .step class elements using jQuery css replace as follows in your CompositionReady in Edge:

sym.$('.step').css("width", "");
sym.$('.step').css("height", "");

This effectively removes the width/height attributes.

Now your div's in Edge will appear where they are supposed to :)

Hope that helps someone too...