By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,360 Members | 3,011 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,360 IT Pros & Developers. It's quick & easy.

Combine crossbrowser JavaScript, DOM, swfobject, & ActionScript 3's ExternalInterface

P: 1
I'm using a swf as a background for all of the content on a site. Every page has the same background (swf) but with different amount of content. I want to sync the height of the div of the content with the div of the swf so that the swf nicely frames the content.

I have been able to find pieces of this overwhelming puzzle but have been quite unsuccessful at putting them together. I'm a complete novice when it comes to javascript and actionscript so I need a step by step guide. I am on a deadline and have been at this for weeks and am quite frustrated.

So far it has "worked" on Safari only after I refresh the page several times. So I definitely need a crossbrowser javascript. Also, after reading what some sites had to say I tried just letting the swf height equal 100% so that it just passively expands by itself but given my limited success with Safari I don't want to take my chances so I need to have a two-way communication between JavaScript and actionscript 3, which is how I found ExternalInterface. However, all the tutorials on everything I have found are so specific to one particular project or they are severely lacking in explanation that I couldn't modify them for my purposes.

Any help with any of these pieces of the puzzle would be greatly appreciated.

1. Cross-browser JavaScript & DOM
2. ExternalInterface in actionscript 3
3. swfobject
4. coordinating all three



1. I found this crossbrowser code for getting the properties.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function getStyle(el, cssprop){
  4.  if (el.currentStyle) //IE
  5.   return el.currentStyle[cssprop];
  6.  else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  7.   return document.defaultView.getComputedStyle(el, "")[cssprop];
  8.  else //try and get inline style
  9.   return el.style[cssprop];
  10. }
  11.  
  12. var mydiv=document.getElementById("test");
  13.  
  14. alert(getStyle(mydiv, 'height')); //alerts 80px
  15.  
  16. </script>
  17.  
However, I wasn't able to modify is so that I get the height of one div and set another div to that height.






Here's the code I had some limited success with:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Exp-5</title>
  7.  
  8. <script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
  9.  
  10. </script>
  11. <script type="text/javascript" src="swfobject.js"> 
  12. </script>
  13.  
  14. <script type="text/javascript"> 
  15.     swfobject.registerObject("container", "9.0.0", "expressInstall.swf");
  16. </script>
  17.  
  18.  
  19. <script type="text/javascript"> 
  20. jQuery (document).ready(function() {
  21. var $results = jQuery('#results');
  22. var $content = jQuery('#content');
  23. jQuery('<p>Computed height: ' + $content.height() + '</p>').appendTo($results); 
  24. jQuery('<p>Inner height: ' + $content.innerHeight() + '</p>').appendTo($results); 
  25. jQuery('<p>Outer height: ' + $content.outerHeight() + '</p>').appendTo($results); 
  26. jQuery('<p>Document outer height: ' + jQuery(document).outerHeight() + '</p>').appendTo($results);
  27. jQuery('<p>Document inner height: ' + jQuery(document).innerHeight() + '</p>').appendTo($results);
  28. jQuery('<p>Window outer height: ' + jQuery(window).outerHeight() + '</p>').appendTo($results);
  29. jQuery('<p>Window inner height: ' + jQuery(window).innerHeight() + '</p>').appendTo($results);
  30. });
  31.  
  32. </script>
  33.  
  34.  
  35.  
  36. <script type='text/javascript'> 
  37.  
  38. function getTheStyle()
  39. {  
  40.  
  41. var elem = document.getElementById("content");
  42.  
  43. var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
  44.  
  45.     document.getElementById("output").innerHTML = theCSSprop;
  46.     document.getElementById("container").style.height = theCSSprop;
  47.  
  48.    }  
  49.  
  50.  
  51. function getTheNext()
  52. {  
  53.  
  54. var elem2 = document.getElementById("container");
  55. var theCSSprop2 = window.getComputedStyle(elem2,null).getPropertyValue("height");
  56.  
  57.     document.getElementById("change_2").innerHTML = theCSSprop2; 
  58.    }  
  59.  
  60.  
  61. </script>
  62.  
  63.  
  64.  
  65. <style type="text/css"> 
  66. <!-- 
  67.  
  68.  body  {
  69.     font: 12px Verdana, Arial, Helvetica, sans-serif;
  70.     background-image: url(images/body-bg.png);
  71.     background-repeat: repeat;
  72.     padding: 0px;
  73.     margin: 0px;
  74.  
  75. }
  76.  
  77.  
  78. .bgrounddiv {
  79.    margin-left: 1%;
  80.    margin-right: 1%;
  81.    border: 1px solid #FF0000;
  82.    height: 563px;
  83.  
  84. }
  85.  
  86. .bgrounddiv #container {
  87.     padding: 0px;
  88.     margin: 0px;
  89.     width: 964px;
  90.     height: 563px;
  91.     position: relative;
  92.     left: 0px;
  93.     top: 0px;
  94.     border: 1px solid #009900;
  95. }
  96.  
  97. #content {
  98.     padding: 0px;
  99.     margin: 0px;
  100.     position: absolute;
  101.     left: 0px;
  102.     top: 0px;
  103.     z-index: 500;
  104.     width: 984px;
  105.     border: 1px solid #666666;
  106.     overflow: visible;
  107. }
  108.  
  109. #output{  
  110. background-color: #cccccc;
  111.    position: absolute;  
  112.    left:     520px;  
  113.    top:      150px;  
  114.    height:   50px;
  115.    width: 150px;
  116.    color:#000000;
  117.    z-index: 1000;
  118.  } 
  119.  
  120.  
  121.  #change_2{  
  122.    background-color: #cccccc;
  123.    position: absolute;  
  124.    left:     310px;  
  125.    top:      150px;  
  126.    height:   50px;
  127.    width: 150px;
  128.    color:#000000;
  129.    z-index: 1000;
  130.  } 
  131.  
  132.  
  133.   #changebutton{  
  134.    background-color: #cccccc;
  135.    position: absolute;  
  136.    left: 55px;  
  137.    top: 220px;  
  138.    height: 30px;
  139.    width: 150px;
  140.    color:#000000;
  141.    z-index: 1000;
  142.  } 
  143.  
  144.  
  145.   #results{  
  146.    background-color: #cccccc;
  147.    position: absolute;  
  148.    left: 37px;  
  149.    top: 250px;  
  150.    height: 200px;
  151.    width: 200px;
  152.    color:#000000;
  153.    z-index: 1000;
  154.  } 
  155.  
  156.  
  157.  
  158. --> 
  159. </style>
  160. </head>
  161.  
  162. <body onload="getTheStyle()">
  163. <div id="changebutton">
  164.   <button onclick="getTheNext()">Check</button>
  165. </div>
  166. <div id="output"></div> 
  167. <div id="change_2"></div> 
  168.  
  169.  
  170.  
  171. <div class="bgrounddiv" align="center">
  172.             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="964" height="100%" id="container" name="Redesign_background-7" align="middle">
  173.                 <param name="movie" value="Redesign_background-7.swf" />
  174.                 <param name="scale" value="noscale" />
  175.                 <param name="wmode" value="transparent" />
  176.                 <!--[if !IE]>-->
  177.                 <object type="application/x-shockwave-flash" data="Redesign_background-7.swf" width="964" height="100%" align="middle">
  178.                     <param name="scale" value="noscale" />
  179.                     <param name="wmode" value="transparent" />
  180.                 <!--<![endif]-->
  181.                     <a href="http://www.adobe.com/go/getflashplayer">
  182.                         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  183.                     </a>
  184.                 <!--[if !IE]>-->
  185.                 </object>
  186.                 <!--<![endif]-->
  187.             </object>
  188.  
  189.             <div id="content">
  190.  
  191.  
  192.             <div id="results"></div>
  193. <!--<p>Hello</p>
  194. <p>Hello</p>-->
  195. <p>Hello</p>
  196. <p>Hello</p>
  197. <p>Hello</p>
  198. <p>Hello</p>
  199. <p>Hello</p>
  200. <p>Hello</p>
  201. <p>Hello</p>
  202. <p>Hello</p>
  203. <p>Hello</p>
  204. <p>Hello</p>
  205. <p>Hello</p>
  206. <p>Hello</p>
  207. <p>Hello</p>
  208. <p>Hello</p>
  209. <p>Hello</p>
  210. <p>Hello</p>
  211. <p>Hello</p>
  212. <p>Hello</p>
  213. <p>Hello</p>
  214. <p>Hello</p>
  215. <p>Hello</p>
  216. <p>Hello</p>
  217. <p>Hello</p>
  218. <p>Hello</p>
  219. <p>Hello</p>
  220. <p>Hello</p>
  221. <p>Hello</p>
  222. <p>Hello</p>
  223. <p>Hello</p>
  224. <p>Hello</p>
  225. <p>Hello</p>
  226. <p>Hello</p>
  227. <p>Hello</p>
  228. <p>Hello</p>
  229. <p>Hello</p>
  230. <p>Hello</p>
  231. <p>Hello</p>
  232. <p>Hello</p>
  233. <p>Hello</p>
  234. <p>Hello</p>
  235.  
  236.             </div>
  237.  
  238. </div>
  239.  
  240. </body>
  241. </html>
  242.  
Apr 13 '10 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.