09 Sep, 2008
Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin
Posted by: Josh In: JavaScript
Got a great Flash site? Can it be used by someone with low resolution? This plugin offers an easy way to keep your full browser Flash from getting too small.
Source: (.zip) (.js only) | Demo
The first thing you need to do is get jQuery set up and running. Once you have that done, I recommend the jQuery Flash Plugin for embedding your Flash movies, but you can use any method you like. Now you need to download and include the jQuery FlashResize Plugin.
With the plugin included and ready to use, we need to get it running. You will need to have an element to use as your placeholder. The body tag can be used, but I always use a container element, usually a div.
<body> <div id="flash-scroll"> <p>Html to be replaced by 100% Flash.</p> </div> </body>
With the HTML set up for the scroll bars, you simply need to add the call to the FlashResize plugin in the document.ready function. The plugin only has two parameters minWidth and minHeight. If you don’t specify a value, then the Flash container is set to 100% and no scroll bar is added.
So just set the parameters to your minimum values and that’s it. As you can see below, the Flash has been set to a minimum of 800 by 750.
$(document).ready(function() { $('#flash-scroll').flashResize({ minWidth: 800, minHeight: 750 }); });
If you would like to see this plugin in action, check out the demo.
