Most of the full flash website i’ve to do with bigyouth are meant to be resizable to a certain size.
Before, we were using swffit which is really great most of the time (we also had problems with encoding a long time ago) ; we were bored of adding “another” js lib just for a little trick which can be made with a little css achievement.
So, we created CSSFit. This is not so different from swffit, and is just for our pleasure to find different solutions
What’s inside ?
Well, not so many files. You’ve an html/css template which provides the basics to make it work, and an example to see it in action.
The idea is to set some css default rules to swf, html and body dom objects :
html, body
{
width:100%;
height:100%;
min-width:960px;
min-height:600px;
margin:0px;
padding:0px;
overflow:auto;
}
#flash
{
width:100%;
height:100%;
}
Easy stuff
But what about IEs ? They dont’ support min-width/height easily since IE4 to 7. We added an other css with some IE specific css tags inside (which are javascript).
html, body
{
overflow-x:expression(document.body.clientWidth > 960 ? "hidden" : "auto");
overflow-y:expression(document.body.clientHeight > 600 ? "hidden" : "auto");
}
#flash
{
width:expression(document.body.clientWidth > 960 ? "100%" : "960px" );
height:expression(document.body.clientHeight > 600 ? "100%" : "600px" );
}
So, the trick is to load the “ie specific” stylesheet when needed to override css definitions. In that way, we use conditionnal commentaries :
<!--[if lte IE 7]> <link href="css/ie-fix.css" rel="stylesheet" type="text/css" /> <![endif]-->
The last thing to know is you’ve to add this commentary at the bottom of the page, after the body object’s closure tag ; as we use javascript inside the “ie-specific” css, we’ve to wait to this object to be fully loaded.
<html> <head> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> <!--[if lte IE 7]> <link href="css/ie-fix.css" rel="stylesheet" type="text/css" /> <![endif]--> </html>
There’s a demo just here and the googlecode project is already available and fully free
.