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
- <script type="text/javascript">
- function getStyle(el, cssprop){
- if (el.currentStyle) //IE
- return el.currentStyle[cssprop];
- else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
- return document.defaultView.getComputedStyle(el, "")[cssprop];
- else //try and get inline style
- return el.style[cssprop];
- }
- var mydiv=document.getElementById("test");
- alert(getStyle(mydiv, 'height')); //alerts 80px
- </script>
Here's the code I had some limited success with:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Exp-5</title>
- <script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
- </script>
- <script type="text/javascript" src="swfobject.js">
- </script>
- <script type="text/javascript">
- swfobject.registerObject("container", "9.0.0", "expressInstall.swf");
- </script>
- <script type="text/javascript">
- jQuery (document).ready(function() {
- var $results = jQuery('#results');
- var $content = jQuery('#content');
- jQuery('<p>Computed height: ' + $content.height() + '</p>').appendTo($results);
- jQuery('<p>Inner height: ' + $content.innerHeight() + '</p>').appendTo($results);
- jQuery('<p>Outer height: ' + $content.outerHeight() + '</p>').appendTo($results);
- jQuery('<p>Document outer height: ' + jQuery(document).outerHeight() + '</p>').appendTo($results);
- jQuery('<p>Document inner height: ' + jQuery(document).innerHeight() + '</p>').appendTo($results);
- jQuery('<p>Window outer height: ' + jQuery(window).outerHeight() + '</p>').appendTo($results);
- jQuery('<p>Window inner height: ' + jQuery(window).innerHeight() + '</p>').appendTo($results);
- });
- </script>
- <script type='text/javascript'>
- function getTheStyle()
- {
- var elem = document.getElementById("content");
- var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
- document.getElementById("output").innerHTML = theCSSprop;
- document.getElementById("container").style.height = theCSSprop;
- }
- function getTheNext()
- {
- var elem2 = document.getElementById("container");
- var theCSSprop2 = window.getComputedStyle(elem2,null).getPropertyValue("height");
- document.getElementById("change_2").innerHTML = theCSSprop2;
- }
- </script>
- <style type="text/css">
- <!--
- body {
- font: 12px Verdana, Arial, Helvetica, sans-serif;
- background-image: url(images/body-bg.png);
- background-repeat: repeat;
- padding: 0px;
- margin: 0px;
- }
- .bgrounddiv {
- margin-left: 1%;
- margin-right: 1%;
- border: 1px solid #FF0000;
- height: 563px;
- }
- .bgrounddiv #container {
- padding: 0px;
- margin: 0px;
- width: 964px;
- height: 563px;
- position: relative;
- left: 0px;
- top: 0px;
- border: 1px solid #009900;
- }
- #content {
- padding: 0px;
- margin: 0px;
- position: absolute;
- left: 0px;
- top: 0px;
- z-index: 500;
- width: 984px;
- border: 1px solid #666666;
- overflow: visible;
- }
- #output{
- background-color: #cccccc;
- position: absolute;
- left: 520px;
- top: 150px;
- height: 50px;
- width: 150px;
- color:#000000;
- z-index: 1000;
- }
- #change_2{
- background-color: #cccccc;
- position: absolute;
- left: 310px;
- top: 150px;
- height: 50px;
- width: 150px;
- color:#000000;
- z-index: 1000;
- }
- #changebutton{
- background-color: #cccccc;
- position: absolute;
- left: 55px;
- top: 220px;
- height: 30px;
- width: 150px;
- color:#000000;
- z-index: 1000;
- }
- #results{
- background-color: #cccccc;
- position: absolute;
- left: 37px;
- top: 250px;
- height: 200px;
- width: 200px;
- color:#000000;
- z-index: 1000;
- }
- -->
- </style>
- </head>
- <body onload="getTheStyle()">
- <div id="changebutton">
- <button onclick="getTheNext()">Check</button>
- </div>
- <div id="output"></div>
- <div id="change_2"></div>
- <div class="bgrounddiv" align="center">
- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="964" height="100%" id="container" name="Redesign_background-7" align="middle">
- <param name="movie" value="Redesign_background-7.swf" />
- <param name="scale" value="noscale" />
- <param name="wmode" value="transparent" />
- <!--[if !IE]>-->
- <object type="application/x-shockwave-flash" data="Redesign_background-7.swf" width="964" height="100%" align="middle">
- <param name="scale" value="noscale" />
- <param name="wmode" value="transparent" />
- <!--<![endif]-->
- <a href="http://www.adobe.com/go/getflashplayer">
- <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
- </a>
- <!--[if !IE]>-->
- </object>
- <!--<![endif]-->
- </object>
- <div id="content">
- <div id="results"></div>
- <!--<p>Hello</p>
- <p>Hello</p>-->
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- <p>Hello</p>
- </div>
- </div>
- </body>
- </html>