Flash Embed Tip: Minimum width and height for liquid layouts

November 1st, 2007 | by Matt |

Over the course of your career you often come up with solutions to such small problems that you completely forget about them. One instance for me is coming with a really simple way to ensure that a Flash site has a minimum height and/or width while using a liquid layout. When a designer gives you a comp and he or she says "I want this to be 'fullscreen'", you immediately think that you'll be setting the width and height of the embed code to 100%. However, you soon realize that you have to account for smaller screen sizes than the size at which the site was designed for.

You could create you're own horizontal and vertical scrollbars within your Flash piece to handle such a situation, but I much prefer the scrollbars within the browser, as a user is much more apt to recognize them and feel more comfortable using them. Here is my tip for handling this.

Say you have a piece of Flash content embedded in your page with SWFObject as such:

var so = new SWFObject("Home.swf", "myFlashContent", "100%", "100%", "8", "#000000");
so.write("flashcontent");

Straightforward, of course. Now start by adding this Javascript function up within the page's HEAD tag:

function adjustSWFHeight() {
    if(document.body.clientHeight <= 768)
        document.getElementById("myFlashContent").style.height = "680px";
    else
        document.getElementById("myFlashContent").style.height = "100%";
 
    if(document.body.clientWidth <= 1000)
        document.getElementById("myFlashContent").style.width= "1000px";
    else
        document.getElementById("myFlashContent").style.width= "100%";
}

Simple enough, right? The only thing you'll have to customize is the condition statement which defines the minimum height of the Flash content and the edge at which to use the minimum height over a 100% value. Next, set the onLoad and onResize properties of the page's BODY tag.

<body onLoad="adjustSWFHeight();" onResize="adjustSWFHeight();">

And thats it! o far it seems to work in Firefox, IE and Safari pretty well. Perhaps it will help you!

  1. One Response to “Flash Embed Tip: Minimum width and height for liquid layouts”

  2. By Andrew on Nov 1, 2007 | Reply

    Care to post a demo to better illustrate your example?

Post a Comment