Need help with placing a flash movie

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

EvulDeeds
New php-forum User
New php-forum User
Posts: 3
Joined: Wed Mar 09, 2011 6:23 pm

Need help with placing a flash movie

Postby EvulDeeds » Wed Mar 09, 2011 6:35 pm

Hello guys,

My current webdesign is using a .jpg for a banner... Basicly i wanna change it to a .swf file...

Currently i have one page the index, And 5 .css files. (also i tried adding javascript already but im failing..)
Basicly i want to change hdr_pic.jpg to hdr_pic.swf but it's not that simple...

Any help would be greatly appreciated!

Here is how it looks now...:

Index.html:

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome - Aria Gardens.com</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<!--navigation -->
<div class="container_16">
<div class="grid_16 navbg">
<ul class="navlink">
   <li class="active" title="Home">Home</li>
   <li><a href="about.html" title="About">About</a></li>
   <li><a href="#" title="Service">Portfolio</a></li>
   <li><a href="#" title="Solution">Solution</a></li>
   <li class="nodivider"><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
</div>

<!--navigation -->
<!--header -->
   <div class="container_16">
   <div class="grid_16 hdrbg">
     <a href="index.html"><img src="images/logo.png" alt="AriaGardens.com" border="0" class="logo" title="AriaGardens.com"/></a>
    
      <h1><br/>
      Always wanted to live in paradise?</h1>
      </div>
   </div>

<!--header -->
<!--body -->
<div class="container_16">
<div class="grid_16" id="body">
<div class="grid_6  alpha">
<!--left panel -->
<div id="lftPan">
<h2 class="service">Our services</h2>
<p class="genareted"></p>
<div class="clear"></div>
<p class="pic">&nbsp;</p>
<ul class="numberLink">
   <li><span>01</span>Verzin iets leuks</li>
   <li><span>02</span>Verzin iets leuks</li>
   <li><span>03</span>Verzin iets leuks</li>
</ul>
</div>
<!--left panel -->
</div>
<div class="grid_10 omega">
<h2>Know about our business</h2>
<p class="vero">Zoiets als service en kwaliteit is een must ofzo</p>
<p class="sedTxt">Dan hier zoiets als we zijn een vrij fris bedrijf maar wel ervaren
<span>Hier dan de eerste alinea van je 'about' us page de MORE knop refereert daar dan weer naar</span>
</p>
<a href="#" class="moreaTwo" title="more">more</a>
<div class="grid_5 alpha ">
<h2>Latest news</h2>
<p class="newsthumb">9<span>Mar</span></p>
<p class="many">Als je dan dus op more klikt moet er een popupje komen met de rest van de tekst<a href="#" title="more" class="manyMore">more...</a></p>

<p class="newsthumb1">9<span>Mar</span></p>
<p class="many1">Blablabla Constructiepagina online blabla bouw nieuwe web...<a href="#" title="more" class="manyMore">more...</a></p><br/><br/><br/><br/>


</div>
</div>
</div>
</div>

<!--body -->
<!--footer -->
<div class="container_16">
<div class="grid_16" id="footer">

<ul class="footerlink">
                     <li><a href="index.html" title="Home">Home</a></li><li>|</li>
                     <li><a href="about.html" title=" About">About</a></li><li>|</li>
                     <li><a href="#" title="Service">Service</a></li><li>|</li>
                     <li><a href="#" title="Solution">Solution</a></li><li>|</li>
                     <li><a href="#" title="Contact">Contact</a></li>   
   </ul>
               
               
               <p class="clear">&nbsp;</p>
                  <p class="copyright">©Copyright AriaGardens. All Rights Reserved.</p>
</div>
</div>
<!--footer -->
</body>
</html>



Base.css:

Code: Select all

/* this calls the files for everything. see index.html */
@import url("reset.css");
@import url("960.css");
@import url("text.css");
@import url("master.css");



Reset.css:

Code: Select all

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}



960.css:

Code: Select all

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}

.container_12 .grid_3,.container_16 .grid_4{width:220px}

.container_12 .grid_6,.container_16 .grid_8{width:460px}

.container_12 .grid_9,.container_16 .grid_12{width:700px}

.container_12 .grid_12,.container_16 .grid_16{width:940px}

.alpha{margin-left:0}

.omega{margin-right:0}

.container_12 .grid_1{width:60px}

.container_12 .grid_2{width:140px}

.container_12 .grid_4{width:300px}

.container_12 .grid_5{width:380px}

.container_12 .grid_7{width:540px}

.container_12 .grid_8{width:620px}

.container_12 .grid_10{width:780px}

.container_12 .grid_11{width:860px}

.container_16 .grid_1{width:40px}

.container_16 .grid_2{width:100px}

.container_16 .grid_3{width:160px}

.container_16 .grid_5{width:280px}

.container_16 .grid_6{width:340px}

.container_16 .grid_7{width:400px}

.container_16 .grid_9{width:520px}

.container_16 .grid_10{width:580px}

.container_16 .grid_11{width:640px}

.container_16 .grid_13{width:760px}

.container_16 .grid_14{width:820px}

.container_16 .grid_15{width:880px}.

container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}

.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}

.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}

.container_12 .prefix_1{padding-left:80px}

.container_12 .prefix_2{padding-left:160px}

.container_12 .prefix_4{padding-left:320px}

.container_12 .prefix_5{padding-left:400px}

.container_12 .prefix_7{padding-left:560px}

.container_12 .prefix_8{padding-left:640px}

.container_12 .prefix_10{padding-left:800px}

.container_12 .prefix_11{padding-left:880px}

.container_16 .prefix_1{padding-left:60px}

.container_16 .prefix_2{padding-left:120px}

.container_16 .prefix_3{padding-left:180px}

.container_16 .prefix_5{padding-left:300px}

.container_16 .prefix_6{padding-left:360px}

.container_16 .prefix_7{padding-left:420px}

.container_16 .prefix_9{padding-left:540px}

.container_16 .prefix_10{padding-left:600px}

.container_16 .prefix_11{padding-left:660px}

.container_16 .prefix_13{padding-left:780px}

.container_16 .prefix_14{padding-left:840px}

.container_16 .prefix_15{padding-left:900px}

.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}

.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}

.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}

.container_12 .suffix_1{padding-right:80px}

.container_12 .suffix_2{padding-right:160px}

.container_12 .suffix_4{padding-right:320px}

.container_12 .suffix_5{padding-right:400px}

.container_12 .suffix_7{padding-right:560px}

.container_12 .suffix_8{padding-right:640px}

.container_12 .suffix_10{padding-right:800px}

.container_12 .suffix_11{padding-right:880px}

.container_16 .suffix_1{padding-right:60px}

.container_16 .suffix_2{padding-right:120px}

.container_16 .suffix_3{padding-right:180px}

.container_16 .suffix_5{padding-right:300px}

.container_16 .suffix_6{padding-right:360px}

.container_16 .suffix_7{padding-right:420px}

.container_16 .suffix_9{padding-right:540px}

.container_16 .suffix_10{padding-right:600px}

.container_16 .suffix_11{padding-right:660px}

.container_16 .suffix_13{padding-right:780px}

.container_16 .suffix_14{padding-right:840px}

.container_16 .suffix_15{padding-right:900px}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}

.clearfix{display:inline-block}

* html .clearfix{height:1%}

.clearfix{display:block}



text.css:

Code: Select all

body{font:12px/1.5 Arial, Helvetica, sans-serif; color:#878585;}

a:focus{outline:1px dotted invert}

hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}

h1{font-size:25px}

h2{font-size:23px}

h3{font-size:21px}

h4{font-size:19px}

h5{font-size:17px}

h6{font-size:15px}

ol{list-style:decimal}

ul{list-style:square}

li{margin-left:30px}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}



And this is the file i think needs attention...
master.css:

Code: Select all

/* this is the master css we will use for styling */

body{
margin:0;
padding:0;
}
p, ul, li, a, h1, h2, h3, h4, div, form, label, input{
padding:0;
margin:0;
}
img{
padding:0;
margin:0;
border:none;
display:block;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
p{
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#181B0E;
background-color:inherit;
}
/*-------------------------------------navigation----------------------------*/
.navbg{
background:url(../images/nav_bg.gif) repeat-x 0 0;
height:39px;
}
ul.navlink{
padding:0 0 0 187px;
margin:0;
}
ul.navlink li{
float:left;
background:url(../images/divider.gif) no-repeat right 0;
padding:0 38px;
width:auto;
}
ul.navlink li.active{
color:#C33305;
background-color:inherit;
font-weight:bold;
padding:0 38px;
display:block;
line-height:39px;
}
ul.navlink li.nodivider{
background-image:none;
}
ul.navlink li a{
color:#fff;
background-color:inherit;
font-weight:bold;
line-height:39px;
}
ul.navlink li a:hover{
color:#C33305;
background-color:inherit;
}

/*--------------------------------------header------------------------------------*/
#hdr{
background:url(../images/hdr_bg.gif) repeat-x 0 0;
height:253px;
}
.hdrBg{
   height:254px;
   background-image: url(../images/hdr_pic.jpg);
   background-repeat: no-repeat;
   background-position: 0 0;
}
img.logo{
margin:37px 0 31px 20px;
}
h1{
   font:normal 20px/22px Georgia, "Times New Roman", Times, serif;
   color:#093;
   padding:0 0 16px 20px;
}
h1 span{
display:block;
font-size:12px;
line-height:18px;
color:#6D5B0F;
background-color:inherit;
width:320px;
padding-top:5px;
}
a.readmore{
background:url(../images/more_butt.gif) no-repeat 0 0;
width:80px;
line-height:20px;
font-weight:bold;
color:#fff;
background-color:inherit;
text-align:center;
float:left;
margin-left:20px;
}
a.readmore:hover{
color:#000;
background-color:inherit;
}
.bg{
background-color:#000;
color:inherit;
}
/*--------------------------------body--------------------------------------*/
#body{
background-color:#EEEEEE;
color:inherit;
border-top:solid 1px #fff;
padding:30px 0;
}

/*---------------------------------left panel-------------------------------------*/
#lftPan{
padding:0 19px 0 20px;
}
/*------------------------------form one-----------------------------*/
form.one{
border:solid 1px #D0CECE;
background-color:#fff;
color:inherit;
padding:15px 15px 13px 19px;
}
p.member{
font-size:24px;
line-height:29px;
color:#30331F;
background-color:inherit;

}
label{
line-height:20px;
color:#30331F;
background-color:inherit;
width:80px;
float:left;
padding-top:11px;
}
input.txtfield{
border:solid 1px #D7D6D6;
background-color:#fff;
color:#000;
float:left;
width:181px;
height:18px;
margin:11px 0 0 0;
}
p.forgot{
background:url(../images/forgot_thumb.gif) no-repeat 0 50%;
line-height:16px;
float:left;
width:auto;
padding:0 0 0 15px;
margin-top:15px;
}
p.forgot a{
color:#CE6712;
background-color:inherit;
font-weight:bold;
}
p.forgot a:hover{
text-decoration:underline;
}
input.login{
background:url(../images/login.gif) no-repeat 0 0;
width:48px;
height:20px;
cursor:pointer;
border:none;
float:right;
margin-top:14px;
}
h2{
font-size:24px;
line-height:30px;
color:#31331F;
background-color:inherit;
font-weight:normal;
}
h2.service{
padding:23px 0 14px 0;
}
p.genareted{
color:#CE6712;
background-color:inherit;
line-height:15px;
font-weight:bold;
padding-bottom:13px;

}
p.pic{
   background:url(../images/pic1.png) no-repeat 0 0;
   width:301px;
   height:124px;
}

ul.numberLink{
padding:18px 0 0 0;
margin:0;
}

ul.numberLink li {
color:#165575;
background-color:inherit;
font-size:12px;
width:301px;
margin:0;
height:58px;
padding:0;
font-weight:bold;

}
ul.numberLink li span{
background:url(../images/round_bullet.gif) no-repeat 0 0;
font-size:18px;
line-height:39px;
color:#fff;
background-color:inherit;
width:40px;
display:block;
text-align:center;
float:left;
padding-right:15px;
}

/*-----------------------------right panel-------------------------------------*/
p.vero{
   line-height:18px;
   color:#fff;
   font-weight:bold;
   width:560px;
   background-color:#666;
   text-align:center;
   margin-top:10px;
}
p.sedTxt{
color:#CE6712;
background-color:inherit;
font-weight:bold;
width:560px;
padding:12px 0 15px 0;
}
p.sedTxt span{
display:block;
color:#181B0E;
background-color:inherit;
font-weight:normal;
}
a.moreaTwo{
background:url(../images/more_butt_two.gif) no-repeat 0 0;
width:56px;
line-height:20px;
font-weight:bold;
color:#fff;
background-color:inherit;
text-align:center;
display:block;
margin-bottom:29px;
}
a.moreaTwo:hover{
color:#000;
background-color:inherit;
}
p.loremtxt{
color:#D35C10;
background-color:inherit;
font-weight:bold;
padding:12px 0 9px 0;
}
p.newsthumb {
background:url(../images/news_thumb.gif) no-repeat 0 0;
width:38px;
height:50px;
line-height:25px;
color:#fff;
background-color:inherit;
text-align:center;
font-weight:bold;
float:left;
padding-right:11px;

}
p.newsthumb span{
display:block;
}
p.many {
color:#131506;
background-color:inherit;
line-height:18px;
padding:0 0 0 11px;
}
a.manyMore{
color:#165575;
background-color:inherit;
font-size:12px;
font-weight:bold;
line-height:18px;
}
a.manyMore:hover{
color:#D35C10;
background-color:inherit;
}

p.newsthumb1 {
background:url(../images/news_thumb.gif) no-repeat 0 0;
width:38px;
height:50px;
line-height:25px;
color:#fff;
background-color:inherit;
text-align:center;
font-weight:bold;
float:left;
padding-right:11px;
margin-top:18px;
}
p.newsthumb1 span{
display:block;
}
p.many1 {
color:#131506;
background-color:inherit;
line-height:18px;
padding:17px 0 0 11px;
}
a.manyMore1{
color:#165575;
background-color:inherit;
font-size:12px;
font-weight:bold;
line-height:18px;
}
a.manyMore1:hover{
color:#D35C10;
background-color:inherit;
}
.company{
width:256px;
}
p.manyTwo{
border:solid 1px #D8D8D8;
background:url(../images/many_bg.gif) repeat-x 0 0 #C9D8DD;
float:left;
color:#30331F;
padding:4px 25px 6px 9px;
display:block;
margin-bottom:7px;
width:auto;
}
p.manyTwo a{
color:#30331F;
background-color:inherit;
text-decoration:underline;
}
p.manyTwo a:hover{
text-decoration:none;
}
p.virgina{
color:#165575;
background-color:inherit;
font-weight:bold;
padding-bottom:25px;
}
.block{
background:url(../images/baner.jpg) no-repeat 0 0;
width:560px;
height:125px;
}
p.baner{
font-size:36px;
line-height:46px;
color:#C4EE4E;
background-color:inherit;
font-weight:bold;
padding:18px 0 0 79px;
}
p.baner span{
display:block;
color:#FAFFBD;
background-color:inherit;
font-size:12px;
line-height:18px;
}
 a.details{
background:url(../images/details_butt.gif) no-repeat 0 0;
width:68px;
line-height:20px;
text-align:center;
color:#30331F;
background-color:inherit;
display:block;
font-size:12px;
margin:9px 0 0 167px;

}
 a.details:hover{
 color:#fff;
 background-color:inherit;
 }
 
 /*--------------------------------ABOUT US-----------------------------------*/
 p.aboutTxt{
 color:#D35C10;
 background-color:inherit;
 font-weight:bold;
}
p.istTxt{
padding:15px 0 23px 0;
width:560px;
}
 p.Sydney{
 color:#D35C10;
 background-color:inherit;
 font-weight:bold;
 width:540px;
}
ul.aboutlink{
padding:17px 0 0 0;
margin:0;
}
ul.aboutlink li{
background:url(../images/black_arrow.gif) no-repeat 0 50%;
padding-left:15px;
}
ul.aboutlink li a{
color:#181B0E;
background-color:inherit;
font-size:12px;
line-height:18px;
font-weight:bold;
}
ul.aboutlink li a:hover{
text-decoration:underline;
}
/*------------------------------footer-------------------------------*/
#footer{
background:url(../images/footer_bg.gif) repeat-x 0 0;
height:97px;
}

ul.footerlink{
padding:21px 0 0 259px;
margin:0;
}
ul.footerlink li{
float:left;
padding:0 13px;
width:auto;
color:#C6E260;
background-color:inherit;
font-size:12px;
line-height:16px;
}
ul.footerlink li a{
color:#C6E260;
background-color:inherit;

}
ul.footerlink li a:hover{
color:#fff;
background-color:inherit;
}


p.copyright{
text-align:center;
color:#fff;
background-color:inherit;
font-size:12px;
line-height:18px;
padding:14px 0 0 0;
}
p.copyright span{
display:block;
}
p.copyright span a{
color:#C6E260;
background-color:inherit;
text-decoration:underline;
}
p.copyright span a:hover{
text-decoration:none;
}



swfobject_modified.js:

Code: Select all

/*!   SWFObject v2.0 <http://code.google.com/p/swfobject/>
   Copyright (c) 2007 Geoff Stearns, Michael Williams, and Bobby van der Sluis
   This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/

var swfobject = function() {
   
   var UNDEF = "undefined",
      OBJECT = "object",
      SHOCKWAVE_FLASH = "Shockwave Flash",
      SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
      FLASH_MIME_TYPE = "application/x-shockwave-flash",
      EXPRESS_INSTALL_ID = "SWFObjectExprInst",
      
      win = window,
      doc = document,
      nav = navigator,
      
      domLoadFnArr = [],
      regObjArr = [],
      timer = null,
      storedAltContent = null,
      storedAltContentId = null,
      isDomLoaded = false,
      isExpressInstallActive = false;
   
   /* Centralized function for browser feature detection
      - Proprietary feature detection (conditional compiling) is used to detect Internet Explorer's features
      - User agent string detection is only used when no alternative is possible
      - Is executed directly for optimal performance
   */   
   var ua = function() {
      var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF && typeof doc.appendChild != UNDEF && typeof doc.replaceChild != UNDEF && typeof doc.removeChild != UNDEF && typeof doc.cloneNode != UNDEF,
         playerVersion = [0,0,0],
         d = null;
      if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
         d = nav.plugins[SHOCKWAVE_FLASH].description;
         if (d) {
            d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
            playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
            playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
            playerVersion[2] = /r/.test(d) ? parseInt(d.replace(/^.*r(.*)$/, "$1"), 10) : 0;
         }
      }
      else if (typeof win.ActiveXObject != UNDEF) {
         var a = null, fp6Crash = false;
         try {
            a = new ActiveXObject(SHOCKWAVE_FLASH_AX + ".7");
         }
         catch(e) {
            try {
               a = new ActiveXObject(SHOCKWAVE_FLASH_AX + ".6");
               playerVersion = [6,0,21];
               a.AllowScriptAccess = "always";  // Introduced in fp6.0.47
            }
            catch(e) {
               if (playerVersion[0] == 6) {
                  fp6Crash = true;
               }
            }
            if (!fp6Crash) {
               try {
                  a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
               }
               catch(e) {}
            }
         }
         if (!fp6Crash && a) { // a will return null when ActiveX is disabled
            try {
               d = a.GetVariable("$version");  // Will crash fp6.0.21/23/29
               if (d) {
                  d = d.split(" ")[1].split(",");
                  playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
               }
            }
            catch(e) {}
         }
      }
      var u = nav.userAgent.toLowerCase(),
         p = nav.platform.toLowerCase(),
         webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
         ie = false,
         windows = p ? /win/.test(p) : /win/.test(u),
         mac = p ? /mac/.test(p) : /mac/.test(u);
      /*@cc_on
         ie = true;
         @if (@_win32)
            windows = true;
         @elif (@_mac)
            mac = true;
         @end
      @*/
      return { w3cdom:w3cdom, pv:playerVersion, webkit:webkit, ie:ie, win:windows, mac:mac };
   }();

   /* Cross-browser onDomLoad
      - Based on Dean Edwards' solution: http://dean.edwards.name/weblog/2006/06/again/
      - Will fire an event as soon as the DOM of a page is loaded (supported by Gecko based browsers - like Firefox -, IE, Opera9+, Safari)
   */
   var onDomLoad = function() {
      if (!ua.w3cdom) {
         return;
      }
      addDomLoadEvent(main);
      if (ua.ie && ua.win) {
         try {  // Avoid a possible Operation Aborted error
            doc.write("<scr" + "ipt id=__ie_ondomload defer=true src=//:></scr" + "ipt>"); // String is split into pieces to avoid Norton AV to add code that can cause errors
            var s = getElementById("__ie_ondomload");
            if (s) {
               s.onreadystatechange = function() {
                  if (this.readyState == "complete") {
                     this.parentNode.removeChild(this);
                     callDomLoadFunctions();
                  }
               };
            }
         }
         catch(e) {}
      }
      if (ua.webkit && typeof doc.readyState != UNDEF) {
         timer = setInterval(function() { if (/loaded|complete/.test(doc.readyState)) { callDomLoadFunctions(); }}, 10);
      }
      if (typeof doc.addEventListener != UNDEF) {
         doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, null);
      }
      addLoadEvent(callDomLoadFunctions);
   }();
   
   function callDomLoadFunctions() {
      if (isDomLoaded) {
         return;
      }
      if (ua.ie && ua.win) { // test if we can really add elements to the DOM; we don't want to fire it too early
         var s = createElement("span");
         try { // Avoid a possible Operation Aborted error
            var t = doc.getElementsByTagName("body")[0].appendChild(s);
            t.parentNode.removeChild(t);
         }
         catch (e) {
            return;
         }
      }
      isDomLoaded = true;
      if (timer) {
         clearInterval(timer);
         timer = null;
      }
      var dl = domLoadFnArr.length;
      for (var i = 0; i < dl; i++) {
         domLoadFnArr[i]();
      }
   }
   
   function addDomLoadEvent(fn) {
      if (isDomLoaded) {
         fn();
      }
      else {
         domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
      }
   }
   
   /* Cross-browser onload
      - Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
      - Will fire an event as soon as a web page including all of its assets are loaded
    */
   function addLoadEvent(fn) {
      if (typeof win.addEventListener != UNDEF) {
         win.addEventListener("load", fn, false);
      }
      else if (typeof doc.addEventListener != UNDEF) {
         doc.addEventListener("load", fn, false);
      }
      else if (typeof win.attachEvent != UNDEF) {
         win.attachEvent("onload", fn);
      }
      else if (typeof win.onload == "function") {
         var fnOld = win.onload;
         win.onload = function() {
            fnOld();
            fn();
         };
      }
      else {
         win.onload = fn;
      }
   }
   
   /* Main function
      - Will preferably execute onDomLoad, otherwise onload (as a fallback)
   */
   function main() { // Static publishing only
      var rl = regObjArr.length;
      for (var i = 0; i < rl; i++) { // For each registered object element
         var id = regObjArr[i].id;
         if (ua.pv[0] > 0) {
            var obj = getElementById(id);
            if (obj) {
               regObjArr[i].width = obj.getAttribute("width") ? obj.getAttribute("width") : "0";
               regObjArr[i].height = obj.getAttribute("height") ? obj.getAttribute("height") : "0";
               if (hasPlayerVersion(regObjArr[i].swfVersion)) { // Flash plug-in version >= Flash content version: Houston, we have a match!
                  if (ua.webkit && ua.webkit < 312) { // Older webkit engines ignore the object element's nested param elements
                     fixParams(obj);
                  }
                  setVisibility(id, true);
               }
               else if (regObjArr[i].expressInstall && !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac)) { // Show the Adobe Express Install dialog if set by the web page author and if supported (fp6.0.65+ on Win/Mac OS only)
                  showExpressInstall(regObjArr[i]);
               }
               else { // Flash plug-in and Flash content version mismatch: display alternative content instead of Flash content
                  displayAltContent(obj);
               }
            }
         }
         else {  // If no fp is installed, we let the object element do its job (show alternative content)
            setVisibility(id, true);
         }
      }
   }
   
   /* Fix nested param elements, which are ignored by older webkit engines
      - This includes Safari up to and including version 1.2.2 on Mac OS 10.3
      - Fall back to the proprietary embed element
   */
   function fixParams(obj) {
      var nestedObj = obj.getElementsByTagName(OBJECT)[0];
      if (nestedObj) {
         var e = createElement("embed"), a = nestedObj.attributes;
         if (a) {
            var al = a.length;
            for (var i = 0; i < al; i++) {
               if (a[i].nodeName.toLowerCase() == "data") {
                  e.setAttribute("src", a[i].nodeValue);
               }
               else {
                  e.setAttribute(a[i].nodeName, a[i].nodeValue);
               }
            }
         }
         var c = nestedObj.childNodes;
         if (c) {
            var cl = c.length;
            for (var j = 0; j < cl; j++) {
               if (c[j].nodeType == 1 && c[j].nodeName.toLowerCase() == "param") {
                  e.setAttribute(c[j].getAttribute("name"), c[j].getAttribute("value"));
               }
            }
         }
         obj.parentNode.replaceChild(e, obj);
      }
   }
   
   /* Fix hanging audio/video threads and force open sockets and NetConnections to disconnect
      - Occurs when unloading a web page in IE using fp8+ and innerHTML/outerHTML
      - Dynamic publishing only
   */
   function fixObjectLeaks(id) {
      if (ua.ie && ua.win && hasPlayerVersion("8.0.0")) {
         win.attachEvent("onunload", function () {
            var obj = getElementById(id);
            if (obj) {
               for (var i in obj) {
                  if (typeof obj[i] == "function") {
                     obj[i] = function() {};
                  }
               }
               obj.parentNode.removeChild(obj);
            }
         });
      }
   }
   
   /* Show the Adobe Express Install dialog
      - Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
   */
   function showExpressInstall(regObj) {
      isExpressInstallActive = true;
      var obj = getElementById(regObj.id);
      if (obj) {
         if (regObj.altContentId) {
            var ac = getElementById(regObj.altContentId);
            if (ac) {
               storedAltContent = ac;
               storedAltContentId = regObj.altContentId;
            }
         }
         else {
            storedAltContent = abstractAltContent(obj);
         }
         if (!(/%$/.test(regObj.width)) && parseInt(regObj.width, 10) < 310) {
            regObj.width = "310";
         }
         if (!(/%$/.test(regObj.height)) && parseInt(regObj.height, 10) < 137) {
            regObj.height = "137";
         }
         doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
         var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
            dt = doc.title,
            fv = "MMredirectURL=" + win.location + "&MMplayerType=" + pt + "&MMdoctitle=" + dt,
            replaceId = regObj.id;
         // For IE when a SWF is loading (AND: not available in cache) wait for the onload event to fire to remove the original object element
         // In IE you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
         if (ua.ie && ua.win && obj.readyState != 4) {
            var newObj = createElement("div");
            replaceId += "SWFObjectNew";
            newObj.setAttribute("id", replaceId);
            obj.parentNode.insertBefore(newObj, obj); // Insert placeholder div that will be replaced by the object element that loads expressinstall.swf
            obj.style.display = "none";
            win.attachEvent("onload", function() { obj.parentNode.removeChild(obj); });
         }
         createSWF({ data:regObj.expressInstall, id:EXPRESS_INSTALL_ID, width:regObj.width, height:regObj.height }, { flashvars:fv }, replaceId);
      }
   }
   
   /* Functions to abstract and display alternative content
   */
   function displayAltContent(obj) {
      if (ua.ie && ua.win && obj.readyState != 4) {
         // For IE when a SWF is loading (AND: not available in cache) wait for the onload event to fire to remove the original object element
         // In IE you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
         var el = createElement("div");
         obj.parentNode.insertBefore(el, obj); // Insert placeholder div that will be replaced by the alternative content
         el.parentNode.replaceChild(abstractAltContent(obj), el);
         obj.style.display = "none";
         win.attachEvent("onload", function() { obj.parentNode.removeChild(obj); });
      }
      else {
         obj.parentNode.replaceChild(abstractAltContent(obj), obj);
      }
   }   

   function abstractAltContent(obj) {
      var ac = createElement("div");
      if (ua.win && ua.ie) {
         ac.innerHTML = obj.innerHTML;
      }
      else {
         var nestedObj = obj.getElementsByTagName(OBJECT)[0];
         if (nestedObj) {
            var c = nestedObj.childNodes;
            if (c) {
               var cl = c.length;
               for (var i = 0; i < cl; i++) {
                  if (!(c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param") && !(c[i].nodeType == 8)) {
                     ac.appendChild(c[i].cloneNode(true));
                  }
               }
            }
         }
      }
      return ac;
   }
   
   /* Cross-browser dynamic SWF creation
   */
   function createSWF(attObj, parObj, id) {
      var r, el = getElementById(id);
      if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
         attObj.id = id;
      }
      if (ua.ie && ua.win) { // IE, the object element and W3C DOM methods do not combine: fall back to outerHTML
         var att = "";
         for (var i in attObj) {
            if (attObj[i] != Object.prototype[i]) { // Filter out prototype additions from other potential libraries, like Object.prototype.toJSONString = function() {}
               if (i == "data") {
                  parObj.movie = attObj[i];
               }
               else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
                  att += ' class="' + attObj[i] + '"';
               }
               else if (i != "classid") {
                  att += ' ' + i + '="' + attObj[i] + '"';
               }
            }
         }
         var par = "";
         for (var j in parObj) {
            if (parObj[j] != Object.prototype[j]) { // Filter out prototype additions from other potential libraries
               par += '<param name="' + j + '" value="' + parObj[j] + '" />';
            }
         }
         el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
         fixObjectLeaks(attObj.id); // This bug affects dynamic publishing only
         r = getElementById(attObj.id);   
      }
      else if (ua.webkit && ua.webkit < 312) { // Older webkit engines ignore the object element's nested param elements: fall back to the proprietary embed element
         var e = createElement("embed");
         e.setAttribute("type", FLASH_MIME_TYPE);
         for (var k in attObj) {
            if (attObj[k] != Object.prototype[k]) { // Filter out prototype additions from other potential libraries
               if (k == "data") {
                  e.setAttribute("src", attObj[k]);
               }
               else if (k.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
                  e.setAttribute("class", attObj[k]);
               }
               else if (k != "classid") { // Filter out IE specific attribute
                  e.setAttribute(k, attObj[k]);
               }
            }
         }
         for (var l in parObj) {
            if (parObj[l] != Object.prototype[l]) { // Filter out prototype additions from other potential libraries
               if (l != "movie") { // Filter out IE specific param element
                  e.setAttribute(l, parObj[l]);
               }
            }
         }
         el.parentNode.replaceChild(e, el);
         r = e;
      }
      else { // Well-behaving browsers
         var o = createElement(OBJECT);
         o.setAttribute("type", FLASH_MIME_TYPE);
         for (var m in attObj) {
            if (attObj[m] != Object.prototype[m]) { // Filter out prototype additions from other potential libraries
               if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
                  o.setAttribute("class", attObj[m]);
               }
               else if (m != "classid") { // Filter out IE specific attribute
                  o.setAttribute(m, attObj[m]);
               }
            }
         }
         for (var n in parObj) {
            if (parObj[n] != Object.prototype[n] && n != "movie") { // Filter out prototype additions from other potential libraries and IE specific param element
               createObjParam(o, n, parObj[n]);
            }
         }
         el.parentNode.replaceChild(o, el);
         r = o;
      }
      return r;
   }
   
   function createObjParam(el, pName, pValue) {
      var p = createElement("param");
      p.setAttribute("name", pName);   
      p.setAttribute("value", pValue);
      el.appendChild(p);
   }
   
   function getElementById(id) {
      return doc.getElementById(id);
   }
   
   function createElement(el) {
      return doc.createElement(el);
   }
   
   function hasPlayerVersion(rv) {
      var pv = ua.pv, v = rv.split(".");
      v[0] = parseInt(v[0], 10);
      v[1] = parseInt(v[1], 10);
      v[2] = parseInt(v[2], 10);
      return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
   }
   
   /* Cross-browser dynamic CSS creation
      - Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
   */   
   function createCSS(sel, decl) {
      if (ua.ie && ua.mac) {
         return;
      }
      var h = doc.getElementsByTagName("head")[0], s = createElement("style");
      s.setAttribute("type", "text/css");
      s.setAttribute("media", "screen");
      if (!(ua.ie && ua.win) && typeof doc.createTextNode != UNDEF) {
         s.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
      }
      h.appendChild(s);
      if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
         var ls = doc.styleSheets[doc.styleSheets.length - 1];
         if (typeof ls.addRule == OBJECT) {
            ls.addRule(sel, decl);
         }
      }
   }
   
   function setVisibility(id, isVisible) {
      var v = isVisible ? "inherit" : "hidden";
      if (isDomLoaded) {
         getElementById(id).style.visibility = v;
      }
      else {
         createCSS("#" + id, "visibility:" + v);
      }
   }
   
   function getTargetVersion(obj) {
       if (!obj)
           return 0;
      var c = obj.childNodes;
      var cl = c.length;
      for (var i = 0; i < cl; i++) {
         if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "object") {
             c = c[i].childNodes;
             cl = c.length;
             i = 0;
         }     
         if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param" && c[i].getAttribute("name") == "swfversion") {
            return c[i].getAttribute("value");
         }
      }
      return 0;
   }
   
   function getExpressInstall(obj) {
       if (!obj)
           return "";
      var c = obj.childNodes;
      var cl = c.length;
      for (var i = 0; i < cl; i++) {
         if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "object") {
             c = c[i].childNodes;
             cl = c.length;
             i = 0;
         }     
         if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param" && c[i].getAttribute("name") == "expressinstall") {
             return c[i].getAttribute("value");
         }          
      }
      return "";
   }
   
   return {
      /* Public API
         - Reference: http://code.google.com/p/swfobject/wiki/SWFObject_2_0_documentation
      */
      registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr) {
         if (!ua.w3cdom || !objectIdStr) {
            return;
         }
         var obj = document.getElementById(objectIdStr);
         var xi = getExpressInstall(obj);
         var regObj = {};
         regObj.id = objectIdStr;
         regObj.swfVersion = swfVersionStr ? swfVersionStr : getTargetVersion(obj);
         regObj.expressInstall = xiSwfUrlStr ? xiSwfUrlStr : ((xi != "") ? xi : false);
         regObjArr[regObjArr.length] = regObj;
         setVisibility(objectIdStr, false);
      },
      
      getObjectById: function(objectIdStr) {
         var r = null;
         if (ua.w3cdom && isDomLoaded) {
            var o = getElementById(objectIdStr);
            if (o) {
               var n = o.getElementsByTagName(OBJECT)[0];
               if (!n || (n && typeof o.SetVariable != UNDEF)) {
                   r = o;
               }
               else if (typeof n.SetVariable != UNDEF) {
                  r = n;
               }
            }
         }
         return r;
      },
      
      embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj) {
         if (!ua.w3cdom || !swfUrlStr || !replaceElemIdStr || !widthStr || !heightStr || !swfVersionStr) {
            return;
         }
         widthStr += ""; // Auto-convert to string to make it idiot proof
         heightStr += "";
         if (hasPlayerVersion(swfVersionStr)) {
            setVisibility(replaceElemIdStr, false);
            var att = (typeof attObj == OBJECT) ? attObj : {};
            att.data = swfUrlStr;
            att.width = widthStr;
            att.height = heightStr;
            var par = (typeof parObj == OBJECT) ? parObj : {};
            if (typeof flashvarsObj == OBJECT) {
               for (var i in flashvarsObj) {
                  if (flashvarsObj[i] != Object.prototype[i]) { // Filter out prototype additions from other potential libraries
                     if (typeof par.flashvars != UNDEF) {
                        par.flashvars += "&" + i + "=" + flashvarsObj[i];
                     }
                     else {
                        par.flashvars = i + "=" + flashvarsObj[i];
                     }
                  }
               }
            }
            addDomLoadEvent(function() {
               createSWF(att, par, replaceElemIdStr);
               if (att.id == replaceElemIdStr) {
                  setVisibility(replaceElemIdStr, true);
               }
            });
         }
         else if (xiSwfUrlStr && !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac)) {
            setVisibility(replaceElemIdStr, false);
            addDomLoadEvent(function() {
               var regObj = {};
               regObj.id = regObj.altContentId = replaceElemIdStr;
               regObj.width = widthStr;
               regObj.height = heightStr;
               regObj.expressInstall = xiSwfUrlStr;
               showExpressInstall(regObj);
            });
         }
      },
      
      getFlashPlayerVersion: function() {
         return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
      },
      
      hasFlashPlayerVersion:hasPlayerVersion,
      
      createSWF: function(attObj, parObj, replaceElemIdStr) {
         if (ua.w3cdom && isDomLoaded) {
            return createSWF(attObj, parObj, replaceElemIdStr);
         }
         else {
            return undefined;
         }
      },
      
      createCSS: function(sel, decl) {
         if (ua.w3cdom) {
            createCSS(sel, decl);
         }
      },
      
      addDomLoadEvent:addDomLoadEvent,
      
      addLoadEvent:addLoadEvent,
      
      getQueryParamValue: function(param) {
         var q = doc.location.search || doc.location.hash;
         if (param == null) {
            return q;
         }
          if(q) {
            var pairs = q.substring(1).split("&");
            for (var i = 0; i < pairs.length; i++) {
               if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
                  return pairs[i].substring((pairs[i].indexOf("=") + 1));
               }
            }
         }
         return "";
      },
      
      // For internal usage only
      expressInstallCallback: function() {
         if (isExpressInstallActive && storedAltContent) {
            var obj = getElementById(EXPRESS_INSTALL_ID);
            if (obj) {
               obj.parentNode.replaceChild(storedAltContent, obj);
               if (storedAltContentId) {
                  setVisibility(storedAltContentId, true);
                  if (ua.ie && ua.win) {
                     storedAltContent.style.display = "block";
                  }
               }
               storedAltContent = null;
               storedAltContentId = null;
               isExpressInstallActive = false;
            }
         }
      }
      
   };

}();

main
New php-forum User
New php-forum User
Posts: 5
Joined: Fri Mar 11, 2011 2:43 pm

Re: Need help with placing a flash movie

Postby main » Tue Mar 29, 2011 11:57 pm

It seems like you are trying to place the swf with javascript, why is this?

Why not just place it directly in your source?


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 1 guest