39 Replies Latest reply on Feb 16, 2010 5:53 AM by waterdad568

    swfObject 2 .Trying to center in the browser

    hrsminsec Level 1

      This is my first go at using swfObject 2.

       

      I am trying to center my swf both Vertical and Horizontal in the browser.

      In swfObject there does not appear to be an automatic way to do this.

      I have amended the basic script below which works, but my question is...

       

      Have I layed it out in the best order, if not, what should I change, or if there is a better way to do it please advice.

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
       <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
         var flashvars = {};
         var params = {};
         params.menu = "false";
         params.scale = "noscale";
         var attributes = {};
         attributes.align = "middle";
         swfobject.embedSWF("Site.swf", "FlashDiv", "784", "500", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
        </script>
       </head>
          
          
      <body bgcolor="#FFFFFF"> 
      <div style="position: absolute; top: 25%;display: table-cell; vertical-align: middle; text-align: center; width: 100%; padding: 0;"> 
      <body>
        <div id="FlashDiv">
         <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
         </a>
        </div>
       </body>
      </html>
      </html>
      
      


      Thanks

        • 1. Re: swfObject 2 .Trying to center in the browser
          robdillon Most Valuable Participant

          Yes, using CSS is the best way to layout the Flash object in your html. I use a different approach, something like this:

          <style type="text/css">
          #divFloat {
          position:absolute;
          top:50%;
          left:50%;
          right:50%;
          bottom:50%;
          margin-top: negative half the height of the object, e.g. -200px;
          margin-left: negative half the width of the object, e.g. -275px;
          }
          </code>

           

          and then put a div named divFloat around your Flash movie.

          1 person found this helpful
          • 2. Re: swfObject 2 .Trying to center in the browser
            hrsminsec Level 1

            Many thanks for the help.

             

            I have tried lots of ways to add the code as you suggested, but I get errors, because I must not be placing it correctly. Here is my last attempt..

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
            <head>
              <title></title>
              
            <style type="text/css">
             #divFloat {
             position:absolute;
             top:50%;
             left:50%;
             right:50%;
             bottom:50%;
             margin-top: -250px;
             margin-left: -392px;
             }
             </code> 
                    
             <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              
              
              <script type="text/javascript" src="swfobject.js"></script>
              <script type="text/javascript">
               var flashvars = {};
               var params = {};
               var attributes = {};
               attributes.align = "middle";
               
               
               <divFloat>
               swfobject.embedSWF("Site.swf", "FlashDiv", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
               </divFloat>
               
               
              </script>
             
            </head>
             
             
             
             
             <body>
              <div id="FlashDiv">
               <a href="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
               </a>
              </div>
             </body>
            </html>
            
            • 3. Re: swfObject 2 .Trying to center in the browser
              robdillon Most Valuable Participant

              Move the <divFloat> tags to outside of the <javascript> tags.

              1 person found this helpful
              • 4. Re: swfObject 2 .Trying to center in the browser
                hrsminsec Level 1

                Thanks.

                 

                It now looks like it should work and shows no errors, but when I publish, the swf does not center, it just stays at the left side.

                 

                This is how it looks now..

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                 <head>
                  <title></title>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                  
                  
                <style type="text/css">
                #divFloat {
                 position:absolute;
                 top:50%;
                 left:50%;
                 right:50%;
                 bottom:50%;
                 margin:-250px;
                 margin-left:-392px;
                 }
                </style>
                 
                 <divFloat>
                  <script type="text/javascript" src="swfobject.js"></script>
                  <script type="text/javascript">
                   var flashvars = {};
                   var params = {};
                   var attributes = {};
                   attributes.align = "middle";
                   swfobject.embedSWF("Site.swf", "FlashDiv", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                  </script>
                 </divFloat>
                    
                    
                    </head>
                 <body>
                  <div id="FlashDiv">
                   <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                   </a>
                  </div>
                 </body>
                </html>
                
                • 5. Re: swfObject 2 .Trying to center in the browser
                  robdillon Most Valuable Participant

                  It should look more like this:

                   

                  <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
                  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                  <head>
                    <title></title>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                   
                   
                  <style type="text/css">
                  #divFloat {
                  position:absolute;
                  top:50%;
                  left:50%;
                  right:50%;
                  bottom:50%;
                  margin:-250px;
                  margin-left:-392px;
                  }
                  </style>

                    <script type="text/javascript" src="swfobject.js"></script>
                    <script type="text/javascript">
                     var flashvars = {};
                     var params = {};
                     var attributes = {};
                     attributes.align = middle;
                     swfobject.embedSWF(Site.swf, FlashDiv, 784, 500, 9.0.0, expressInstall.swf, flashvars, params, attributes);
                    </script>
                     
                     
                      </head>
                  <body>

                  <div id=divFloat>


                    <div id="FlashDiv">
                     <a href="http://www.adobe.com/go/getflashplayer">
                      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                     </a>
                    </div>

                  </div>


                  </body>


                  </html>

                  Or you could just call the div in the css definition "FlashDiv".


                  • 6. Re: swfObject 2 .Trying to center in the browser
                    hrsminsec Level 1

                    Thanks again. Really appreciated.

                     

                    I am now 99% there. The code did not work again, but I took your, <div id=divFloat> suggestion and using the code below the swf now centers correctly.

                     

                    The only problem now left is the Adobe download button to getFlashplayer still will not center. It registers itself at the Top left corner of where the swf loads.

                     

                    Adding the code align="middle to, <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" align="middle" />

                    makes no difference either.

                     

                    As I said so close. Thanks.

                     

                     

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                     <head>
                      <title></title>
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                      
                      
                    <style type="text/css">
                    #divFloat {
                     position:absolute;
                     top:50%;
                     left:50%;
                     right:50%;
                     bottom:50%;
                     margin:-250px;
                     margin-left:-392px;
                     }
                    </style>
                     
                    <div id=divFloat>
                      <script type="text/javascript" src="swfobject.js"></script>
                      <script type="text/javascript">
                       var flashvars = {};
                       var params = {};
                       var attributes = {};
                       attributes.align = "middle";
                       swfobject.embedSWF("Site.swf", "FlashDiv", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                      </script>
                     </divFloat>
                        
                        
                        </head>
                     <body>
                      <div id="FlashDiv">
                       <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" align="middle" />
                       </a>
                      </div>
                     </body>
                    </html>
                    
                    • 7. Re: swfObject 2 .Trying to center in the browser
                      hrsminsec Level 1

                      OK. This now looks better, but whilst my swf centers the getFlashplayer still does not..

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                       <head>
                        <title></title>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        
                        
                      <style type="text/css">
                      #divFloat {
                       position:absolute;
                       top:50%;
                       left:50%;
                       right:50%;
                       bottom:50%;
                       margin:-250px;
                       margin-left:-392px;
                       }
                      </style>
                      
                      <script type="text/javascript" src="swfobject.js"></script>
                        <script type="text/javascript">
                         var flashvars = {};
                         var params = {};
                         var attributes = {};
                         attributes.align = "middle";
                         swfobject.embedSWF("Site.swf", "divFloat", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                        </script>
                       </head>
                       
                          <body>
                        <div id="divFloat">
                         <a href="http://www.adobe.com/go/getflashplayer">
                          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" align="middle" />
                         </a>
                        </div>
                              
                       </body>
                      </html>
                      
                      • 8. Re: swfObject 2 .Trying to center in the browser
                        waterdad568 Level 3

                        It looks like the button is external to the .swf, if that is the case you can just use another id for that button and position it with css internal or external css... it appears your using an internal style in your html doc, so add another id in your css style block and then add the id to the image string for example:

                         

                         

                         

                         

                        hrsminsec wrote:

                         

                        OK. This now looks better, but whilst my swf centers the getFlashplayer still does not..

                         

                        
                        <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
                        <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                         <head>
                          <title></title>
                          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                          
                          
                        <style type="text/css">
                        #divFloat {
                         position:absolute;
                         top:50%;
                         left:50%;
                         right:50%;
                         bottom:50%;
                         margin:-250px;
                         margin-left:-392px;
                         }
                        


                        #newDiv {
                        position:absolute;
                        top:200px;
                        left:400px; //or where ever you want it
                        {

                        //OR option two: remove above and div below then add this id="button" in img string

                        #button {
                        position:absolute;
                        top:200px;
                        left:400px;
                        {



                        </style> <script type="text/javascript" src="swfobject.js"></script>   <script type="text/javascript">    var flashvars = {};    var params = {};    var attributes = {};    attributes.align = middle;
                           swfobject.embedSWF(Site.swf, divFloat, 784, 500, 9.0.0, expressInstall.swf, flashvars, params, attributes);
                          </script> </head>     <body>
                        //remove div if using option two, remove id tag if using the div as placement
                        <div id="newDiv">    <a href="http://www.adobe.com/go/getflashplayer">     <img id="button" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />    </a>   </div>         </body> </html>
                        • 9. Re: swfObject 2 .Trying to center in the browser
                          hrsminsec Level 1

                          waterdad568 wrote. It looks like the button is external to the .swf......

                           

                          Thanks for the help. This is my latest attempt. What is strange is that in Flash your suggetion works. The external Flash button centers on the stage, but when I hit F12 and publish it registers with the top corner of my Site.swf which is centered.

                          So close. I guess I am still doing somthing wrong....

                           

                           

                           

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                           <head>
                            <title></title>
                            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                            
                            
                          <style type="text/css">
                          #divFloat {
                           position:absolute;
                           top:50%;
                           left:50%;
                           right:50%;
                           bottom:50%;
                           margin:-250px;
                           margin-left:-392px;
                          }
                           
                           +*#button {
                          position:absolute;
                          top:-600px;
                          left:300px; 
                          {*+
                          }
                          </style>
                          
                          
                          <script type="text/javascript" src="swfobject.js"></script>
                            <script type="text/javascript">
                             var flashvars = {};
                             var params = {};
                             var attributes = {};
                             attributes.align = "middle";
                             swfobject.embedSWF("Site.swf", "divFloat", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                            </script>
                           </head>
                           
                              <body>
                            <div id="divFloat">
                             <a href="http://www.adobe.com/go/getflashplayer">
                              <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" +*id="button"*+ />
                             </a>
                            </div>
                                
                           </body>
                          </html>
                          
                          • 10. Re: swfObject 2 .Trying to center in the browser
                            waterdad568 Level 3
                            Copy and paste this code exactly as it is into your html file. Save it then try it. Don't publish it, just copy and save the html that you copied this from. You have already published and embedded the .swf, IN this doc, and the .swf  has nothing to do with the external image being called from the html. 

                             

                             

                             

                            
                            <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
                            <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                             <head>
                              <title></title>
                              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                              
                              
                            <style type="text/css">
                            #divFloat {
                             position:absolute;
                             top:50%;
                             left:50%;
                             right:50%;
                             bottom:50%;
                             margin:-250px;
                             margin-left:-392px;
                            }
                             
                            #button {
                            position:absolute;
                            top:600px;
                            left:300px; 
                            }
                            
                            </style> <script type="text/javascript" src="swfobject.js"></script>   <script type="text/javascript">    var flashvars = {};    var params = {};    var attributes = {};    attributes.align = middle;
                               swfobject.embedSWF(Site.swf, divFloat, 784, 500, 9.0.0, expressInstall.swf, flashvars, params, attributes);
                              </script> </head>     <body>
                               <a href="http://www.adobe.com/go/getflashplayer">
                                 <img id="button" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                                 </a>
                                         </body> </html>
                            • 11. Re: swfObject 2 .Trying to center in the browser
                              hrsminsec Level 1

                              Thanks for the reply.

                               

                              When I copy/paste the code making no changes,  I get an error at this line.

                               

                              swfobject.embedSWF(Site.swf, divFloat, 784, 500, 9.0.0, expressInstall.swf, flashvars, params, attributes);  
                              

                               

                              Changing it to this gives no errors

                               

                               

                              swfobject.embedSWF("Site.swf", "divFloat", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                              

                               

                               

                               

                              Changing it or leaving the error the results are the same.

                               

                              The #button works correctly.

                               

                              However if I publish it, the adobe button still loads correctly and is placed at whatever the px is for the #button, but my Site.swf no longer works and does not load.

                              • 12. Re: swfObject 2 .Trying to center in the browser
                                hrsminsec Level 1


                                waterdad568 and Rob Dillon.

                                 

                                Many thanks for helping me.

                                 

                                I finally got it working and post the code below one final time for anyone else who my have the same problem....

                                 

                                 

                                 

                                <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
                                <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                                 <head>
                                  <title></title>
                                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                  
                                  
                                <style type="text/css">
                                #divFloat {
                                 position:absolute;
                                 top:50%;
                                 left:50%;
                                 right:50%;
                                 bottom:50%;
                                 margin:-250px;
                                 margin-left:-392px;
                                }
                                 
                                #button {
                                position:absolute;
                                top:230px;
                                left:320px; 
                                }
                                </style>
                                <script type="text/javascript" src="swfobject.js"></script>
                                  <script type="text/javascript">
                                   var flashvars = {};
                                   var params = {};
                                   var attributes = {};
                                   attributes.align = "middle";
                                   swfobject.embedSWF("Site.swf", "divFloat", "784", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                                  </script>
                                 
                                 
                                 </head>
                                 
                                    <body>
                                <div id="divFloat">
                                   <a href="http://www.adobe.com/go/getflashplayer">     <img id="button" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />     </a>
                                    
                                   </div>
                                      
                                 </body>
                                </html>
                                
                                • 13. Re: swfObject 2 .Trying to center in the browser
                                  jerohero

                                  Hi guys,  I seem to be having the exact same problem, trying to center my swf verticallly in my html page and found your discussion on this topic. I tried using your adaptations on my code, but cannot get it to work. I'm not an html expert and copied the code. I'm hoping you might be able to point me in the right direction. I converted the original (non-centered) code:

                                  into the code underneath using your adaptations, but clearly with errors, because the swf doesn't play at all. I hope you can help me out of this mess.
                                  • 14. Re: swfObject 2 .Trying to center in the browser
                                    jerohero Level 1

                                    Oops, again:

                                     

                                    I seem to be having the exact same problem, trying to center my swf verticallly in my html page and found your discussion on this topic. I tried using your adaptations on my code, but cannot get it to work. I'm not an html expert and copied the code. I'm hoping you might be able to point me in the right direction. I converted the original (non-centered) code:

                                     

                                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
                                    <head>
                                    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                                    <script src="swfobject.js" type="text/javascript"></script>
                                    <style type="text/css">
                                    #swfContainer {position:relative;width:700px;margin:0 auto;padding:0;}
                                    #swfContainer2 {position:relative;width:700px;height:500px;overflow:hidden;margin:0 auto;padding:0;}
                                    </style>
                                    </head>
                                    <body>
                                    <div id="swfContainer"><div id="swfBox"></div></div>
                                    <script type="text/javascript" src="swfobject.js"></script>
                                    <script type="text/javascript">
                                     var flashvars = {};
                                     var params = {allowfullscreen: "true",wmode: "transparent",allowscriptaccess: "always"};
                                     var attributes = {};
                                     swfobject.embedSWF("movie.swf", "swfBox", "700", "500", "9.0.0", false, flashvars, params, attributes); 
                                    </script>
                                    <noscript>
                                    <div id="swfContainer2">
                                         <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="700" height="500">
                                              <param name="movie" value="movie.swf" />
                                              <param name="allowfullscreen" value="true" />
                                              <param name="wmode" value="transparent" />
                                              <param name="allowscriptaccess" value="always" />
                                              <embed
                                                   type="application/x-shockwave-flash"
                                                   id="player2"
                                                   name="player2"
                                                   src="movie.swf" 
                                                   width="700" 
                                                   height="500"
                                                   allowscriptaccess="always" 
                                                   allowfullscreen="true"
                                                   wmode="transparent"
                                              />
                                         </object>
                                    </div>
                                    </noscript>
                                    </body>
                                    </html>
                                    
                                    
                                    
                                    
                                    
                                    
                                    

                                     

                                    • 15. Re: swfObject 2 .Trying to center in the browser
                                      jerohero Level 1

                                      into the code underneath using your adaptations, but clearly with errors, because the swf doesn't play at all. I hope you can help me out of this mess.

                                      Again, I'm not a coder and try to get it to work by trial-and-error.. but to no avail.

                                       

                                       

                                       

                                      
                                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                                      
                                      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
                                      <head>
                                      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                                      <script src="swfobject.js" type="text/javascript"></script>
                                      <style type="text/css">
                                      #swfContainer {position:absolute;top:50%;left:50%;right:50%;bottom:50%;margin:-250px;margin-left:-350px;}
                                      #swfContainer2 {position:absolute;top:50%;left:50%;right:50%;bottom:50%;margin:-250px;margin-left:-350px;}
                                      </style>
                                      
                                      <script type="text/javascript" src="swfobject.js"></script>
                                      <script type="text/javascript">
                                       var flashvars = {};
                                       var params = {allowfullscreen: "true",wmode: "transparent",allowscriptaccess: "always",scale: "noscale",menu: "false"};
                                       var attributes = {};
                                       attributes.align = middle;
                                       swfobject.embedSWF("movie.swf", "swfBox", "700", "500", "9.0.0", false, flashvars, params, attributes); 
                                      </script>
                                      </head>
                                      
                                      <body>
                                      <div id="swfContainer"><div id="swfBox"></div></div>
                                      </div>
                                      
                                      <noscript>
                                      <div id="swfContainer2">
                                           <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="700" height="500">
                                                <param name="movie" value="movie.swf" />
                                                <param name="allowfullscreen" value="true" />
                                                <param name="wmode" value="transparent" />
                                                <param name="allowscriptaccess" value="always" />
                                                <param name="scale" value="noscale" />
                                                <param name="menu" value="false" />
                                                <embed
                                                     type="application/x-shockwave-flash"
                                                     id="player2"
                                                     name="player2"
                                                     src="movie.swf" 
                                                     width="700" 
                                                     height="500"
                                                     allowscriptaccess="always" 
                                                     allowfullscreen="true"
                                                     wmode="transparent"
                                                     scale="noscale"
                                                     menu="false"
                                                />
                                           </object>
                                      </div>
                                      </noscript>
                                      </body>
                                      </html>
                                      
                                      
                                      • 16. Re: swfObject 2 .Trying to center in the browser
                                        hrsminsec Level 1

                                        I am not expert enough to help you, but my last code posted does work.

                                         

                                         

                                        If you swap my .swf for yours and have the ..

                                         

                                        expressInstall.swf

                                        swfobject.js

                                         

                                        in the same folder it will work.

                                         

                                         

                                        Hope this helps...

                                        • 17. Re: swfObject 2 .Trying to center in the browser
                                          robdillon Most Valuable Participant

                                          You had quite a few mistakes in the html. Here is a version that works, at least for me:

                                           

                                          -----------------------------

                                           


                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                           

                                          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
                                          <head>
                                          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                                          <script src="swfobject.js" type="text/javascript"></script>
                                          <style type="text/css">
                                          #swfContainer {
                                          position:absolute;
                                          top:50%;
                                          left:50%;
                                          right:50%;
                                          bottom:50%;
                                          margin:-250px;
                                          margin-left:-350px;
                                          }

                                           

                                          #swfContainer2 {
                                          position:absolute;
                                          top:50%;
                                          left:50%;
                                          right:50%;
                                          bottom:50%;
                                          margin:-250px;
                                          margin-left:-350px;
                                          }

                                           

                                          </style>

                                           

                                          <script type="text/javascript" src="swfobject.js"></script>
                                          <script type="text/javascript">
                                          var flashvars = {};
                                          var params = {};
                                          params.menu = "false";
                                          //params.wmode = "transparent";
                                          params.allowfullscreen = "true";
                                          //params.allowscriptaccess: "always";
                                          //params.scale: "noscale";
                                          var attributes = {};
                                          attributes.align = "middle";
                                          swfobject.embedSWF("movie.swf", "swfContainer", "700", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
                                          </script>
                                          </head>

                                           

                                          <body>
                                          <div id="swfContainer">
                                              <a href="http://www.adobe.com/go/getflashplayer">     <img id="button" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />     </a>
                                          </div>

                                           

                                          <div id="swfContainer2">
                                          <noscript>
                                          noscript
                                              <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="700" height="500" id="movie" align="middle">
                                              <param name="allowScriptAccess" value="sameDomain" />
                                              <param name="allowFullScreen" value="false" />
                                              <param name="movie" value="movie.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#00cc99" />    <embed src="movie.swf" quality="high" bgcolor="#00cc99" width="700" height="500" name="movie" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
                                              </object>
                                          </noscript>
                                          </div>

                                           


                                          </body>
                                          </html>

                                           

                                          -----------------------

                                          You can use the swfObject's generator.html to create most of the needed html for you. I found that some of the parameters generated by swfObject made the html fail, and so I commented those out. You'll have to go line by line to see the changes that I made. Hope this works for you.

                                           

                                          I added the word "noscript" to the noscript section as a telltale when I was testing the code. You probably want to remove that after you've tested your version.

                                          • 18. Re: swfObject 2 .Trying to center in the browser
                                            jerohero Level 1

                                            Fantastic! Thank you very very much. Yes I realize I had quite a few mistakes there. I got it working now, even without commenting out the params. The only problem now seems to be that whenever a browser window is too small for the movie, the middle of the movie is shown and a scrollbar does appear, BUT one can only scroll down, not up, cutting off the top of the page.

                                            So for example, when a window is only big enough to show 50% of the movies height, the middle 50% is shown and the scrollbar can be used to scroll down to see the bottom 25% while the top 25% is cut off. Any suggestions for this issue?

                                            • 19. Re: swfObject 2 .Trying to center in the browser
                                              robdillon Most Valuable Participant

                                              You can use Javascript to tell you the size of the user's screen and then size of the current browser window. You could then use that information along with the size of your movie to tell you whether your movie will fit when its floating in a browser window. If it will, let it float, if it won't fit, then use an alternate positioning.

                                              • 20. Re: swfObject 2 .Trying to center in the browser
                                                jerohero Level 1

                                                Ah thanks, that makes sense. But when a user resizes his window after loading of the page, does it reposition? I'm totally not familiar with this.. do you happen to know how to code this?

                                                • 21. Re: swfObject 2 .Trying to center in the browser
                                                  waterdad568 Level 3

                                                  CSS absolute positioning is just that, absolute. If a users browser is resized the elements do not move, if you want the view to change with the browser window size and the elements react and reposition, than you would use relative positioning, typically with position:relative, top:xx%; left:xx%;you can also use xxpx; in relative positioning.

                                                   

                                                  Read here:

                                                   

                                                  http://www.w3schools.com/Css/css_positioning.asp

                                                  • 22. Re: swfObject 2 .Trying to center in the browser
                                                    jerohero Level 1

                                                    I see. But I can't just replace "absolute" by "relative" in the code Rob helped me with (I just tried). How would I incorporate this relative positioning in the vertical centering code above to make the page look good?

                                                    Cheers.

                                                    • 23. Re: swfObject 2 .Trying to center in the browser
                                                      waterdad568 Level 3

                                                      Remove the right and bottom parameters, and only use top and left. Relative will error when you try and force it to do something it can't such as force a difference of 50% of a width/height smaller than the element. If you use top and left only, if the browser resizes smaller than the clip, then the bottom and right will just fall of the window. 10lbs of you know what in a 5 lb bag.

                                                      • 24. Re: swfObject 2 .Trying to center in the browser
                                                        jerohero Level 1

                                                        Ok, I removed the bottom and right parameters, but it still won't show right. What do I do with the margin and margin-left parameters?

                                                         

                                                        #swfContainer {position:relative;top:50%;left:50%;margin:-250px;margin-left:-350px;}
                                                        #swfContainer2 {position:relative;top:50%;left:50%;margin:-250px;margin-left:-350px;}
                                                        

                                                        • 25. Re: swfObject 2 .Trying to center in the browser
                                                          waterdad568 Level 3

                                                          Margins create spaces between elements/containers, as padding creates spaces within them, they are usually used for text and positioning elements so

                                                          they do not appear right up against the edges so to speak, and give you justification of the elements inside or next to other containers.

                                                           

                                                          I'm not sure why you are using negative margin attributes to position something that probably does not need them as your basically filling the container edge to edge with content (the mc).

                                                           

                                                          You will have to play with those numbers, start with margin/padding both at "0" and change the positions of top and left untill it aligns in the desired location using only top and left, presuming also the registration points of the objects are set to 0,0.

                                                          • 26. Re: swfObject 2 .Trying to center in the browser
                                                            jerohero Level 1

                                                            Thanks waterdad. But should I not keep the top/left parameters at 50% for the centering? The negative margins are based on the discussion above, to vertically center the swf in the window or container. With my original parameters (relative/width/height) it wouldn't center vertically, but with the ones Rob suggested it would. But that led to the top disappearing when the window got too small.

                                                            • 27. Re: swfObject 2 .Trying to center in the browser
                                                              waterdad568 Level 3

                                                              Please don't take this the wrong way, but you are bouncing around from one issue to another without knowing the basics.

                                                               

                                                              It appears you have not grasped the concept of css layout and positioning, so I would highly recommend that you go back to basics and learn the proper way to use css, instead of just plugging away without the proper knowledge.

                                                               

                                                              Go back to the w3schools, and go through the css tutorials, here is another one that will help as a reference while you learn:

                                                               

                                                              http://www.w3.org/TR/CSS2/visuren.html

                                                               

                                                              It seems you are now looking to build what some call a liquid layout. All elements position themselves based on the users window size.

                                                               

                                                              Pay close attention to the "float" properties, if you use one element with float depending on your content, you may have to use the float with all to acheive your desired effect.

                                                              • 28. Re: swfObject 2 .Trying to center in the browser
                                                                jerohero Level 1

                                                                Hi waterdad,

                                                                No offense taken. You're right, I am definitely not familiar with all the css basics, but need to fix this adaptation to a site quickly without having the time to truly go and learn all the basics for it. Can only do that after. My site has only one container with one swf in it and it just needs to position vertically in the browser window. As simple as I thought that would be, I cannot get the right parameters to accomplish this, so that's why I'm seeking help...

                                                                • 29. Re: swfObject 2 .Trying to center in the browser
                                                                  waterdad568 Level 3

                                                                  Remove the css references entirely.

                                                                   

                                                                  In your doc, use html tags instead of css for the moment, it will accomplish the task, until you can perform css layouts properly,  add <center> </center> in between the body tags

                                                                   

                                                                  <body><center> content </center> </body>, and then use line breaks to drop it below the top of the window to where you want it. <br><br> etc.

                                                                   

                                                                  That will solve the prob long enough to get the css down then you can come back and adjust with purely css.

                                                                  • 30. Re: swfObject 2 .Trying to center in the browser
                                                                    jerohero Level 1

                                                                    Thanks for the advice. Horizontal centering is not the problem, it's the vertical and unfortunately the line breaks do not solve that for different sized windows. I know I need to get css down more, but would much much appreciate adjustment advice on the css code I posted above to get this out of the way. It must be in that one line of positioning parameters code. I wish I knew how exactly, but then I wouldn't be here asking for help.. Please!

                                                                    • 31. Re: swfObject 2 .Trying to center in the browser
                                                                      waterdad568 Level 3

                                                                      Is the entire page, just one single .swf file 700 x 500 on a null background?? That you want centered in a resizable browser? Named movie.swf?

                                                                       

                                                                      Is the object embed code above what was published by flash with html? And the only other element is the get flash button?

                                                                      • 32. Re: swfObject 2 .Trying to center in the browser
                                                                        jerohero Level 1

                                                                        Yes that's all. It's one flash movie in a container. No get flash button needed. It sits at the top of the page, but needs to be centered vertically.

                                                                        • 34. Re: swfObject 2 .Trying to center in the browser
                                                                          jerohero Level 1

                                                                          You wrote the script?? Wow, amazing! Thanks so much!! You saved my life! I'll have to go give it a try tomorrow.

                                                                          • 35. Re: swfObject 2 .Trying to center in the browser
                                                                            jerohero Level 1

                                                                            It seems to be working fine! Thanks again!

                                                                            But is there still need to use the object/embed tags in there? It seems that when using those, the SWFObject is never read.

                                                                             

                                                                            Thing is, I now want to add

                                                                            var macmousewheel = new SWFMacMouseWheel(so);

                                                                            to the SWFObject, but that part of the script is never read. So is object/embed still necessary when using SWFObject?
                                                                            Cheers!

                                                                            • 36. Re: swfObject 2 .Trying to center in the browser
                                                                              jerohero Level 1

                                                                              The SWFMacMouseWheel uses this code, with only SWFObject and no object/embed tags. Works there, but not with my swf. Why does this swf not need the object/embed tags?

                                                                               

                                                                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                                                                              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

                                                                                  <head>

                                                                                      <title></title>

                                                                                      <meta http-equiv="content-type" content="text/html; charset=utf-8" />

                                                                                      <script type="text/javascript" src="js/swfobject.js"></script>

                                                                                      <script type="text/javascript" src="js/swfaddress.js"></script>

                                                                                      <script type="text/javascript" src="js/swfmacmousewheel.js"></script>

                                                                                      <style type="text/css">

                                                                               

                                                                                          /* hide from ie on mac \*/

                                                                                           html {

                                                                                                height: 100%;

                                                                                                overflow: hidden;

                                                                                           }

                                                                               

                                                                                           #flashcontent {

                                                                                                height: 100%;

                                                                                           }

                                                                                           /* end hide */

                                                                               

                                                                                           body {

                                                                                                height: 100%;

                                                                                                margin: 0;

                                                                                                padding: 0;

                                                                                                background-color: #262B2D;

                                                                                              font: 76% Arial, sans-serif;

                                                                                           }

                                                                                      </style>

                                                                                  </head>

                                                                                  <body>

                                                                                       <div id="flashcontent">

                                                                                            <strong>You need to upgrade your Flash Player!</strong>

                                                                                       </div>

                                                                                       <script type="text/javascript">

                                                                                           // <![CDATA[

                                                                                            var so = new SWFObject('example.swf', 'website', '280', '280', '8', '#262B2D');

                                                                                          so.useExpressInstall('js/expressinstall.swf');

                                                                                            so.addParam('menu', 'false');

                                                                                            so.addParam('scale', 'noscale');

                                                                                            so.addParam('salign', 'lt');          

                                                                                            so.write('flashcontent');

                                                                                            

                                                                                            var macmousewheel = new SWFMacMouseWheel( so );

                                                                                           // ]]>

                                                                                       </script>

                                                                                  </body>

                                                                              </html>

                                                                              • 37. Re: swfObject 2 .Trying to center in the browser
                                                                                waterdad568 Level 3

                                                                                Object and embed tags are simply two different ways used by different browsers to render an object/element in an html container, and by using both in combination renders across different browsers. A .swf file is simply another element in an html file. I am not familiar with macmousewheel.js, but javascript can dynamically place elements in an html container also.

                                                                                 

                                                                                SWFObject is a way to cleanly place swf elements (in html) (objects in flash) to display/render alignment in a different browsers, typically IE and Mozilla variants. If you want to simply place a flash file (an swf published by flash) in an html for display on multi browsers then you would do so with object/embed tags, and so swfobject.js is not necessarily needed, however if you wish to cleanly align an swf file, then SWFObject is a js script used to align the swf in an html container.

                                                                                • 38. Re: swfObject 2 .Trying to center in the browser
                                                                                  jerohero Level 1

                                                                                  Thanks for the explanation. Much appreciated. So one wouldn't use both the object/embed tags and SWFObject simultaniously? Its either or, right? Because in my case, when using the object/embed tags (and aligning the swf with your earlier code suggestions), the SWFObject code doesn't seem to be used. But for my macmousewheel.js to work with the SWFObject, the SWFObject code needs to be read, so would I then need to get rid of the object/embed tags?

                                                                                  • 39. Re: swfObject 2 .Trying to center in the browser
                                                                                    waterdad568 Level 3

                                                                                    If the swf is centered in the browser window, then the swfobject is being read. Again I am not familiar with macmouseobject.js, you may want to refer to that code blocks documentation. I do not know how to integrate them, or why they error if they do. That is not a flash issue, it is a javascript issue. And as I said above, in some form the swf needs to be "put" into the HTML and that is typically done with object tags for some browsers, and embed tags for others, which is why you would typically use both to be cross browser compatable.