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

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

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

  
<!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>

Apr 13 '10 #1

Subscribe Post Reply

2747

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...

C / C++

Injecting Javascript in a User Control

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...

.NET Framework

need html dropdown to populate javascript variable please

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...

Javascript

Returning value from a javascript to actionscript call problem

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...

Flash / Actionscript

No TABLES in html. No hacks in CSS. Any layout possible, crossbrowser. Try it.

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...

HTML / CSS

How can I call Flash function using JavaScript?

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...

Flash / Actionscript

Problem with javascript code on FireFox

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)....

Flash / Actionscript

Calling JavaScript from ActionScript

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...

Flash / Actionscript

Importing javascript to html file

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...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

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

Similar topics