Sizing the flash movie from the html document, depending of the browser size, using JavaScript

Home -> PredWeb Flash Blog -> Sizing the flash movie from the html document, depending of the browser size, using JavaScript

Sizing the flash movie from the html document, depending of the browser size, using JavaScript

Usually sizing of flash sites and applications is done in the flash file itself by positioning of elements depending the stage.stageWidth and stage.stageHeight. In some cases, however, we have to embed the application so that on a certain amount of sizing browser to stop and show the scrollbars and over a certain size, the flash to be fixed on the maximum allowable size. One option is to make it inside the flash itself by making a container with scrollbars, but this is often associated with many problems and requires time and a lot of code. However, this can be done with just a few lines of JavaScript code to verify the size of the browser and dimension <div> container that contains the flash to the desired size.
Let's look at an example where we have flash embeded on 100% in <div> container with id = 'swfHolder'. In this case, we want the flash to always be 100% of the browser, but if the browser size is smaller than 950x650px or greater than 1200x900px the flash resize to stop and dimensioned to maintain these rates.
Here is the embed code for our sample flash:

</object>

</div>

If we leave things at this stage, the flash will always be dimensioned to 100% of the browser.
To achieve our goal we must add the following JavaScript in <head> </head> section of the html document:
<script language="JavaScript" type="text/javascript">

</script>
Let's look at the script:
This line will call the resizeHolder function to resize the container on the first page load.
window.onload=resizeHolder;
With this lines we add event listener that will call our resizeHolder function on each browser resize
window.onresize = function(event) {
resizeHolder();
} Here is the resizeHolder function itself: function resizeHolder(){ In these two variables we store the new size of the browser after resizing - respectively the height and width in pixels. var currH = document.body.clientHeight;
var currW = document.body.clientWidth; In these two variables we store the desired minimum size in which we want to show the flash - respectively height and width in pixels var minHeight = 650;
var minWidth = 950; In these two variables we store the desired maximum size in which we want to show the flash - respectively width and height in pixels var maxWidth = 1200;
var maxHeight = 900; This is the <div> container that holds our flash movie var holder = document.getElementById("swfHolder"); In the next if-else statements we check the current browser size respectively to the minimum and the maximum size we want. If the browser size is smaller than the desired minimum size, than the container will be resized to the minHeight and minWidth. If the browser size is bigger than the desired maximum size, than the container will be resized to the maxHeight and maxWidth. In all other cases the container will be on 100% of the browser size. if(currH < minHeight){
holder.style.height = minHeight+'px';
}else if(currH > maxHeight){
holder.style.height = maxHeight+'px';
}else{
holder.style.height = '100%';
}

if(currW < minWidth){
holder.style.width = minWidth+'px';
}else if(currW > maxWidth){
holder.style.width = maxWidth+'px';
}else{
holder.style.width = '100%';
}
} If you want sizing only for the minimum dimension, without maximum allowable size for the flash, then set the following values for the maxWidth and maxHeight: var maxWidth = currW;
var maxHeight = currH; If you want sizing only for the maximum dimension, without minimum allowable size for the flash, then set the following values for the minWidth and minHeight: var minWidth = currW;
var minHeight = currH; The code is tested on the most used browsers and Operating Systems and works fine.
By the way, this approach might be used for any <div> container, not only containing flash movies, but I'm sure you already guessed this :-)