Dynamically resizing Flash objects with JS

I was approached recently by one of our Flash developers, who needed to know if it was possible to dynamically resize a Shockwave Flash object in an iframe on a webpage. The piece of content in question was an educational (!) Flash game placed in an iframe at the top half of the page, with a sitewide toolbar in an iframe at the bottom of the page.

The requirements of the script were simple: the game object in the upper half of the page must react to any change in the height of the bottom iframe (the sitewide toolbar can shrink and grow depending on certain options being clicked) as well as normal (vertical) browser resizing.

Luckily, because iframes were being used, as far as the page that the game was embedded in was concerned, both actions were the same thing.

Problem 1: Determining the window height

Before I can resize the player, I have to find out whether it needs resizing, ie whether the iframe aperture becomes too short to accomodate the object.

I thought this bit was going to be easy, window.innerHeight works doesn’t it? Ah, no it doesn’t; in fact IE, Firefox and Safari all use different methods to determine the height of a window, which is a right royal pain in the arse. I ended up using the following function:

function getWindowHeight() {
  var myHeight = 0;
  if (typeof(window.innerWidth) == ‘number’) {
    return window.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  } else if (document.body && document.body.clientHeight) {
    return document.body.clientHeight;
  }
}

A lot of code to do something very simple isn’t it?

Problem 2: Setting the width and height

The great unknown (to me at the time), how does one resize an embedded object, particularly given that the object is embedded in different ways in different browsers: in Safari and Firefox, <object> and <embed> elements are used, and in IE, an <object> with a series of <param> elements are used.

Firstly, I ensured that the <object> element had an id="content_object" and the <embed> element (if rpesent) had an id="content_embed". It took a lot of trial and error experimentation to realise that (unsurprisingly), not all browsers liked having their <embed>s resized, and some (well, Safari) needed the <object>s tweaked too.

Anyway, I wrote the following function, that works nicely, and is maybe the single most useful code snippet to come out of this exercise:

function setDims(xx,yy) {
  var changeMe = document.getElementById(”content_embed”);
  changeMe.height = yy;
  changeMe.width = xx;
  if (navigator.userAgent.toLowerCase().indexOf(”safari”)!=-1) {
    var changemeObject = document.getElementById(”content_object”);
    changeMeObject.height = yy;
    changeMeObject.width = xx;
  }
}

Putting it all together

The magic needs to happen when the window resizes, yes?

window.onresize = function() {
  var defHeight = 370;
  var defWidth = 760;
  var windowHeight = getWindowHeight();
  if (windowHeight < defHeight) {
    var newwidth = parseInt((windowHeight * defWidth) / defHeight);
    setDims(newwidth,windowHeight);
  }
  else {
    setDims(defWidth,defHeight);
  }
}

So if the window (the script posted here was embedded in the source of the upper iframe) becomes shorter than the height of the flash object, it’s scaled, otherwise it remains it’s original size.

It’s a very specific example, and in the context of a larger application could (nay, should) be embedded within a larger Javascript class and I make no claims that the code posted is good for solving any problem other than the one I faced – it’s quick and dirty to say the least – but I found it quite interesting as I’ve never used JS to resize a flash object before, and it was just as fiddly as I expected it to be. I can see me using my setDims() function again, more than once.

• Friday 8th September
• Posted by Jordan Harper