Inserting a flash movie in css

Javascript coding ..

Moderators: macek, egami, gesf

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

Inserting a flash movie in css

Postby EvulDeeds » Thu Mar 10, 2011 9:31 am

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!
The problem I see is that your jpg image is being displayed as a background image for the div with class .hdrBg.

But for a Flash movie, you'll need to be straightforward and just place the elements inline, rather than display it as a background.

How do I do this?


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;
            }
         }
      }
      
   };

}();

Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 1 guest