6 Replies Latest reply on Jan 23, 2013 2:52 AM by jdhughen

    Can't center preloader in browser window

    jdhughen Level 1

      I'm trying to center the preloader in the browser. this is a single full page animation.  I'm currently centering the stage using..



      sym.$("#Stage").css({"margin": "auto"})

      which is working find for the stage but it doesn't cover the preloader. my preloader elements are "loaderbar" and "loading".  I seached the forum and found a post about centering the preloader but that solution is not working for me.



      I tried....




      #loader-bar { margin: auto; }

      #loading { margin: auto; }


      --> (without the comment tag)

      in the header but it doesn't work for me. the loader is loading on the left of the browser window (full screen width is 1920) while the stage is loading in the center of the browser window. My stage size is 800x600. I tried including that in the css above but that didn't work either.


      any ideas anyone ??




      Joel H

        • 1. Re: Can't center preloader in browser window

          Open up your preferred HTML editor. Dreamweaver, notepad etc.


          Open up your edge html file.


          Place this within the header tags:


          <style type="text/css">


          #Stage {



              margin-right: auto;

              margin-left: auto;






          Should do the trick!

          • 2. Re: Can't center preloader in browser window
            jdhughen Level 1

            Thanks but that doesn't work for me. All it does is center the stage which is after it's loaded.  I was doing that already with script from within the edge file with


            sym.$("#Stage").css({"margin": "auto"});


            I need something that will center the preloader while the stage stuff is still loading ??


            Maybe I could do it with script in the header or within the "preloader" script file ?? is there a way to un minify or otherwise edit the preloader script?


            Joel H

            • 3. Re: Can't center preloader in browser window
              jdhughen Level 1

              I found this in the "preloader" script file



                 dom: [






                    font:['Arial, Helvetica, sans-serif',24,"rgba(2,26,146,1.00)","normal","none","italic"]











                 dom: [



              loadingEvt=function(e) {

                       // insert code to be run during preloading here



              //preload loadingEvent

              })( "EDGE-1584403355");


              Can I edit this in some way to centere the "loaderbar" and "loading" elements in the borwser? like maybe in the "loadingEvt=function(e) { " section at the bottom ???



              Joel H

              • 4. Re: Can't center preloader in browser window

                I had the same problem while developing my first edge site. My only workaround for centering the preloader was to undo the stage centering no matter the method so that the preloader and stage were both 0,0.  Next I embedded the edge output html into another html page that centers the div or iframe (whichever method you choose).


                That way the preloader and the stage are loading at 0,0 of the iframe or div that is centered on the new html.  That was the only workaround I could find to center the preloader. It works no matter how shoddy it might be.


                I am pretty unexperienced in java so I opted for this method rather than poking around in the script files.

                • 5. Re: Can't center preloader in browser window
                  JonathanMarino Level 1

                  Just to make sure:


                  Are you toggling the "scale-position" to %


                  within your preloader stage, like this:


                  Screen Shot 2013-01-22 at 2.22.34 PM.png

                  • 6. Re: Can't center preloader in browser window
                    jdhughen Level 1

                    I tried changing the preloader element "scale-position" to "%". That moved them to center but at the top of the screen and with the left side of each elemnet at center.

                    After experimenting with several differnet thing I found the following that centered the preloader AND the stage....


                    First I removed any stage centering css script from the edge project.

                    left my stage set to PX - 800x600

                    set each preloader element set to PX and placed them on the stage area where I wanted them to come up.

                    In my html page header I added....



                    <style type="text/css">

                    #Stage, #loaderbar, #loading {



                        margin-right: auto;

                        margin-left: auto;



                    --> (without the comment tags


                    I'm not saying that this is the only way to do it. Just that this centers my stage AND my preloader in this project in any screen size/browser that I tested including iphone and ipad. Like I mentioned I tried lots of combinations of the above and this is what worked for me. If I set the width to "inherit" everything shifted to the left.  If I set the scale-postion to % everything was on top of each other at the top of the screen. Anyway... it's working now. I wish I understood why this works and the other seemingly logical solutions don't for future reference and just so I felt like I learned something rather then just got something to work, but, it's working, I'm behind, so I'm moving on.

                    Thanks for the input.