WordPress.org

Ready to get started?Download WordPress

Forums

Edge Suite
[resolved] Responsive script won't work in WordPress? (6 posts)

  1. Ninjamankid
    Member
    Posted 1 year ago #

    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/

  2. ti2m
    Member
    Plugin Author

    Posted 1 year ago #

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

  3. ti2m
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  4. Ninjamankid
    Member
    Posted 1 year ago #

    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

  5. ti2m
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  6. Ninjamankid
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.