473,287 Members | 1,629 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

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

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
0 2744

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

Similar topics

0
by: Matt | last post by:
Hello, I am attempting to get a software prototype UI/demo built in Flash to talk with existing C++ (so I can exchange data and commands between the application-software already developed in the...
3
by: rsdev | last post by:
Hi, I have a user control that will eventually dynamically embed a flash movie, but I can't get the basics to work. I am using master pages then a home.aspx and then a user control. Here's...
3
daJunkCollector
by: daJunkCollector | last post by:
I have the html/javascript posted below, I imagine the fix to my problem is something simple that I am overlooking. My script is a little bit of html and javascript, and there is an embedded flash...
2
by: mfsiddiq | last post by:
HI I am facing some problem with my as-js communication.I am passing a String expression to a javascript function using ExternalInterface.call function upon mouse click.My string expression is as...
53
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...
0
forsiam
by: forsiam | last post by:
I've seen the example in http://www.thescripts.com/forum/thread694359.html but I still have problem about javascript. (I use SWFObject) My Action Script import...
1
by: sosuko | last post by:
Hi once again, I have default.html which loads 2 html files in 2 separate iframes, the 2 html file names are as follows :- (a). home_left.html -- swf file is embedded in this html. (b)....
2
by: NitinSawant | last post by:
Hello, I'm beginner to actionscript, I've defined following function in script tag of page <script type="text/javascript"> function showMessage(){ alert("javascript says: Hello...
5
by: phpmagesh | last post by:
Hi All, I have html page, in that i have some flash header. In that flash header i have sound on/off function. i implemented this in my html page. but i need some modification in this. now it...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.