A lot of people have blogged about this and there have been a few attempts at libraries which solves the problem. Some have gained status and some have gracefully failed silently. It’s only recently that I encountered the need to use this method and frankly I prefer browser scrollbars as most users do in my opinion. I feel they are more responsive and have better performance. But damn it ain’t easy getting this to work properly and at one point I wondered if it is actually worth the trouble.

Quick overview of the problem

It may be worth pointing out that in most cases there are two distinct reasons a flash website might have, for wanting to enable the browser scrollbar.

• If the window is resized to a smaller size that was designed for - a scrollbar would be nice.
• If the content is larger than the original design - a scrollbar would be nice

SWFResize, SWFForcesize and SWFObject

SWFResize is a nice little add-on to the SWFObject solution. Inducted into the OSFlash hall of fame, it is with regret that this add-on doesn’t work anymore. Reasons not being for lack of development but rather the release of SWFObject version 2. Enter SWFForcesize, another attempt to solve the fullscreen flash with browser scrollbar. Very similar to SWFResize this add-on too worked quite well but also only with SWFObject version prior to 2.

We all love SWFObject. It’s the next best thing since sliced bread. It kicked dust in all the proverbial cowboy faces and irritates the crap out of Jakob Nielson purists. Before the release of the mighty version 2, SWFObject seemed to work quite well with the afore mentioned add-ons.

Lucky for us Bobby van der Sluis and Geoff Stearns did some sterling work and included an example for solving the first requirement when showing full flash with a browser scrollbar in the latest version of SWFObject. This doesn’t however solve the problem of content being larger than the original design. For this we need to make some changes to Bobby’s example code.

SWFObject original code

<script type="text/javascript">
//<![CDATA[
function getViewportSize() { 
    var size = [0, 0]; 
    if (typeof window.innerWidth != "undefined") { 
        size = [window.innerWidth, window.innerHeight];
    } 
    else if (typeof document.documentElement != "undefined" && 
         typeof document.documentElement.clientWidth != "undefined" && 
         document.documentElement.clientWidth != 0) {
        size = [document.documentElement.clientWidth, document.documentElement.clientHeight]; 
    }
    else {
        size = [document.getElementsByTagName("body")[0].clientWidth, 
            document.getElementsByTagName("body")[0].clientHeight]; 
    }
    return size; 
}
function createFullBrowserFlash() {
    swfobject.createCSS("html", "height:100%;");
    swfobject.createCSS("body", "height:100%;");
    swfobject.createCSS("#container", "margin:0; width:100%; height:100%; min-width:980px; min-height:553px;");
    window.onresize = function() {
        var el = document.getElementById("container");
        var size = getViewportSize(); 
        el.style.width = size[0] < 980 ? "980px" : "100%";
        el.style.height = size[1] < 553 ? "553px" : "100%";
    };
    window.onresize();
}   
swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.0");
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
    swfobject.addDomLoadEvent(createFullBrowserFlash);
}
//]]>
</script>

The solution

<script type="text/javascript">
//<![CDATA[

var size = getViewportSize();    
function getViewportSize() 
{ 
    var size = [0, 0]; 
    if (typeof window.innerWidth != "undefined") { 
        size = [window.innerWidth, window.innerHeight];
    } 
    else if (typeof document.documentElement != "undefined" && 
         typeof document.documentElement.clientWidth != "undefined" && 
         document.documentElement.clientWidth != 0) {
        size = [document.documentElement.clientWidth, document.documentElement.clientHeight]; 
    }
    else {
        size = [document.getElementsByTagName("body")[0].clientWidth, 
            document.getElementsByTagName("body")[0].clientHeight]; 
    }
    return size; 
}
function createFullBrowserFlash() 
{
    swfobject.createCSS("html", "height:100%;");
    swfobject.createCSS("body", "height:100%;");
    swfobject.createCSS("#container", "margin:0; width:100%; height:100%; min-width:980px; min-height:553px;");
}   
function setHeight( h )
{
    if ( h < size[1] ) h = "100%";
    var el = document.getElementById("container");
    if ( h != "100%" ) el.style.height = h < 553 ? "553px" : h + "px";
    else el.style.height = "100%";
}

var flashvars = { };
var params = { "allowscriptaccess": "samedomain" };

swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.0", false, flashvars, params);
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
    swfobject.addDomLoadEvent( createFullBrowserFlash );
}
//]]>
</script>

The basic changes are the removal of the window.resize listener as this is now handled through Actionscript and the addition of a setHeight() Javascript method. This method will be called from each Flash page with a new height. It checks to see if the value supplied is less than the minimum height, if it is then use 100% as the height. If not, set the container div’s height to the new value. Easy peasy.

I only set the hight as that was all I required from the resize, although in some cases you might need to add the width too.

Selah.

Tested

IE6, IE7 FF 3.0.3 Safari 3.1

Resources

• Example of first requirement, i.e. minimum size restriction