
Ever had a problem where a site or application you are creating looks great when scaled to the browser window at a large screen size but crap when viewed on smaller screens? A major issue with sites that are embedded via SWFObject and set to 100% x 100% is that when viewed via a smaller screen size resolution, things get messed up and overlap each other and some elements become un-viewable, which of course provides for nightmare positioning issues if done via actionscript within the application. I have had this problem myself a few times recently and was looking for a way to implement the resizing via javascript within the browser when I stumbled across a fantastic utility called swffit. Swffit is incredibly simple to use and works well with SWFObject. What it actually does is control how the browser window interacts with your flash application's resize settings, once it gets smaller than your defined window size it adds a scollbar, when it is bigger the scrollbar dissappears. As an example, my main site now uses swffit and in the main javascript which I use to embed my swf I have simply included the fit() function of swffit like so:
-
<script type="text/javascript" src="http://libs.ultravisual.co.uk/js/swfobject/swfobject.js"></script>
-
<script type="text/javascript" src="http://libs.ultravisual.co.uk/js/swffit/swffit.js"></script>
-
<script type="text/javascript">
-
-
var flashvars = {};
-
var params = {};
-
var attributes = {};
-
-
params.menu = "false";
-
params.quality = "high";
-
params.scale = "no_scale";
-
params.bgcolor = "#FFFFFF";
-
params.allowFullScreen = "true";
-
params.AllowScriptAccess = "always";
-
-
attributes.id = "flash";
-
-
swfobject.embedSWF("MainLoader.swf", "myContent", "100%", "650", "9.0.0", "expressinstall.swf", flashvars, params, attributes);
-
-
swffit.fit("flash");
-
-
</script>
As you can see via swfobject I have defined a window height of 650 pixels, swffit registers this and listens out for when the browser window goes below this size, when it does it adds a vertical scroll bar so that when a user with a small window size views the site they are able to view the site properly rather than all squashed up! There are loads of other features available as can be found within the example folder of the downloadable swffit source files. More details can also be found on the swffit site.

Posted in
Tags: 



![Validate my RSS feed [Valid RSS]](http://www.ultravisual.co.uk/blog/images/valid-rss.png)

