Support » Plugin: Edge Suite » Unable to center Edge stage whle using plugin

  • Resolved Dynastion



    I seem to have a problem with an animation I made. I used the edge plugin to make and import it but for some reason now I can’t seem to be able to center the animation on my page.

    I am using the shortcodes because the animation has to play above the other content. It’s like an animated splash-screen before you enter the website. (Yes Yes… I know people advice not to use splash-screens but it’s the way the customer wants it.)

    Hope you can help me out.


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


    Hi Dominic,

    I checked the composition and fixed the dimension parsing. Please try the dev version of the plugin.

    I don’t really get it to work as the height and width are set a bit strange in EA itself. Am not really sure what you are trying to do. Is there a testpage where you set it up?

    I currently have it running on my local host but I will transfer it pretty soon.

    What is the best way to target the animations? When I try to do it with their id for some reason it’s not working because the elements have a style which is not in css but set in the element.

    I now have the new version running but still no luck.

    Plugin Author ti2m


    EA will overwrite CSS like postion and so on with its own styles. Which properties do you want to set? For the stage id EA doesn’t touch margin or padding as far as I know and postion is set to relativ. Try to set the needed properties like width and height within the composition. I think that might be where the problem is as I didn’t really get as well what the setup of the dimensions was supposed to do.
    A dirty way is to use !important on a CSS property in your custom definitions which then won’t be overwritten by EA, but as said that is more of a hack than anything else.

    Let me know if it’s accessable online then I can take a look. I somehow have the feeling that something else is going wrong.

    Hey again Ti2m,

    First of all a happy new year of course!

    I am continuing my work on my website and I still can’t manage to position my animation correctly.

    You can find the website on the temporary domain:

    I really do like the plugin though. I am now checking if I can add the properties in the animation itself.


    I btw now also get an error message when I upload the animation:

    Warning: Invalid argument supplied for foreach() in /home/d3dveer/domains/ on line 157

    Plugin Author ti2m


    Hi Dominic,

    happy new year to you as well!

    I just looked at your page and I can’t find any stage div in the source. How do you include the animation? I’m not sure what you are planning will work with the plugin as you are trying to overlay the animation on other content. It “seems” to work because edge – for some reason – ankers the animation in the body if it can’t find the correct stage div, but that will result in strange behavior. The only thing I could think of right now is to use the “header method” as described in the Edge Suite tutorial to place the animation. Then you could try to overwrite the stage div css with !important and set it up as an overlay.
    I would highly recommend asking over in the edge animate adobe forum and check how people do that in general. If they got it worked out we can check how we can make it work with the plugin.

    Thanks for reporting the error, strange one as it’s related to removing a directory which doesn’t seem to exist. Problem seems to be the
    glob($dir . '/*') call. I’ll try to figure out what goes wrong. Any idea what server and PHP version you are working on?

    Plugin Author ti2m



    ok, so I just tried it. When you got the animation placed in the header, you can add the following to your CSS stylesheet (you have to look up the id of the div – search for ‘Stage’ in the HTML source code page view in the browser):

        position: absolute !important; /* That is not pretty, but no way around it. */
        top: 0px; /* Aligns the animation with the top of the header (can be removed or changed) */
        z-index: 5; /* Sets animation as overlay, set to negative value for background placement */
        /* Only use the following if you want to center the animation */
        left: 50%;
        margin-left: -346px; /* Half the width of the stage */
    Plugin Author ti2m


    Hi Dominic, I checked up on the error you got when uploading a new animation. Can you try the new dev version and check if you still get the error. Can’t reproduce the error, so that would help me a lot.


    For sure! Will install it right away.

    I also changed from short codes to the header placement and now I can find and position the stage! So that is perfect 🙂

    Only things I am trying to figure out now is how to actually prevent the website from showing before the animation is loaded. I tried with the pre-loader but it’s too slow. Since my animation is an overlay of the website I want it to show first before anything else.

    Thnk a lot for the help! Will check up on the error asap.

    I re-installed the plugin and the error is gone now 🙂 Very nice!

    Now all is left is figure out how to fix the pre-load.

    Thnk again!

    Ow before I forget, one thing which might be nice to intergrate in your plugin is a way to clear the number of animations you uploaded. Now every time I delete one the count just continues.

    Haha 36 tries so far 😉

    It would be nice if the number would just stay 1 if you delete the old animation before uploading a new one.


    Plugin Author ti2m


    Thanks for testing!

    What you could do with the loading is hide the main div through JS on body load and then at the end of the edge animation show the div again.

    I’m not planning on resting the IDs. Reason is that you use the IDs for shortcodes. If you have shortcodes set up e.g. for ID 3 and then delete the animation it just won’t show up. If you then reset the IDs currently ID 3 is valid again and shows an animation that wasn’t intended to be there at all.

    Aaaah then I understand 🙂

    I actually manage to fix it already. Added an extra overlaying div between the animation and the content which get’s hidden once the animation is ready loading.

    Works perfect!

    Do you maybe know how I can make sure an animation only plays once, only when you arrive at the website the first time?

    Plugin Author ti2m


    Also a good idea with the additional layer.

    Look into cookies to mark that a user has already seen the intro. You can either do that in PHP from wordpress or use a jQuery plugin to do it through JS. Other option would be to check the http_referrer in the PHP $_SEVER variable. If it’s empty or not your server then you know the user is not coming from your site to the current page and hasn’t seen the intro yet.

    Have to say, am really not a big fan of intros, but that’s of course up to you, at least make sure people can skip it 😉

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Unable to center Edge stage whle using plugin’ is closed to new replies.