WordPress.org

Support

Support » Plugins and Hacks » Edge Suite » [Resolved] Responsive script won't work in WordPress?

[Resolved] Responsive script won't work in WordPress?

  • Hi,

    I have 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:

    • Works perfectly when previewed from inside Edge Animate – whole animation scales as it should.
    • Does not work at all inside WP – no scaling takes place.

    I’m not a coder so I have no idea what might be happening. Maybe the plug-in flushes the script (unlikely). Maybe the script is written to work on an ordinary html page and not a dynamic one, like WP? Any help would be greatly appreciated since this script seems very useful!

    I have posted this on the Adobe Edge Animate forum as well.

    Regards

    Johan

    http://wordpress.org/extend/plugins/edge-suite/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author ti2m

    @ti2m

    Can you sent me your OAM to edge@timm-jansen.de, then I’ll check what’s happening.

    Plugin Author ti2m

    @ti2m

    The fix is actually quiet simple, just remove the # in front of ‘#Stage’ within
    sym.$("#Stage").css so it says sym.$("Stage").css. That should fix the whole thing and it should also work with shortcodes. Let me know if that solves it for you.

    HI,

    I still can’t get the animation to show up. I removed the # but problem persists. Could it have something to do with the theme I am using? Maybe the .oam doesn’t find the JQuery files? I’ll mail my latest .oam.

    Johan

    Plugin Author ti2m

    @ti2m

    Don’t think it’s the theme, which one are you using? Just sent me your current version per mail and I’ll check it.

    Actually it now works if you follow the tip above:

    The fix is actually quiet simple, just remove the # in front of ‘#Stage’ within
    sym.$(“#Stage”).css so it says sym.$(“Stage”).css. That should fix the whole thing and it should also work with shortcodes.

    Don’t know why it didn’t work before, I probably screwed something up somewhere.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Responsive script won't work in WordPress?’ is closed to new replies.
Skip to toolbar