Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin

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.

.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.


     

Html to be replaced by 100% Flash.

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.

.zip .js only Demo

36 thoughts on “Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin”

  1. help any one!
    it works great on my local server but doesn’t when i upload it to my web sever. i don’t understand.

  2. i figure it out… it was a silly mistake, the .swf file was call LaVena.swf instead of lavena.swf so it wouldnt load, i didn’t know it’d be case sensitive, the funny thing was it worked on my computer and when i uploaded the whole thing to another server it worked just fine there too.
    Thanks a lot for your help i really appreciate.

  3. thanks for your interesting post – i tried it in combination with swfobject – everything works fine – except when i maximize the browser window in Firefox, the swf disappears.
    any thoughts?

  4. @ptriek

    It is the container div that is causing you problems. You may want to have the flashResize function attached to the container div instead of the content div. You will also need to set your flash to 100% in the swfobject.

  5. Thanks for sharing this.
    Where do you set the alignment of the swf (ie what if you want it to stay in the upper left?)
    Thanks again.

  6. I’m trying to figure out how to add row of html based text and images (links) below the Flash. As a test, I’ve tried placing Now what? both inside and after the “flash-scroll” div, but the text doesn’t show up. Code is below. Any help will be appreciated.

    $(document).ready(function() {
    $(‘#flash-scroll’).flashResize({
    minWidth: 1130,
    minHeight: 600
    });
    });

    body {margin:0px;padding:0px}


    <!–
    if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
    alert(“This page requires AC_RunActiveContent.js.”);
    } else {
    var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
    if(hasRightVersion) { // if we’ve detected an acceptable version
    // embed the flash movie
    AC_FL_RunContent(
    ‘codebase’, ‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0’,
    ‘width’, ‘100%’,
    ‘height’, ‘100%’,
    ‘src’, ‘YoTube39’,
    ‘quality’, ‘high’,
    ‘pluginspage’, ‘http://www.macromedia.com/go/getflashplayer’,
    ‘align’, ‘top’,
    ‘play’, ‘true’,
    ‘loop’, ‘true’,
    ‘scale’, ‘noscale’,
    ‘wmode’, ‘window’,
    ‘devicefont’, ‘false’,
    ‘id’, ‘YoTube39’,
    ‘bgcolor’, ‘#ffffff’,
    ‘name’, ‘YoTube39’,
    ‘menu’, ‘true’,
    ‘allowScriptAccess’,’sameDomain’,
    ‘allowFullScreen’,’true’,
    ‘movie’, ‘YoTube39’,
    ‘salign’, ‘lt’,
    ‘FlashVars’, ‘VL=’+VL_param
    ); //end AC code
    } else { // flash is too old or we can’t detect the plugin
    var alternateContent = ‘Alternate HTML content should be placed here.’
    + ‘This content requires the Adobe Flash Player.’
    + ‘Get Flash‘;
    document.write(alternateContent); // insert non-flash content
    }
    }
    // –>

    Now what?

  7. i set this up on a clients website and it seemed to work great. however, for some unknown reason it wont display on the clients computer in IE7. it works fine in my IE7. other flash displays fine in the IE7 in question. any idea what could be causing this issue?

    the site is tinasedonne.com

  8. Hi,

    I am having problems getting this to work on IE6. Is this a known issue? Works fine on all other browsers.

    Thanks,
    Malin

  9. I’m trying to implementyour script in my html.
    I can not get scroll bar to work .What am I doing wrong? My html is below.
    Thanks for help!
    Predrag

    flashResize jQuery Plugin

    $(document).ready(function() {

    //Write out the falsh
    $(‘#myFlash’).flash({
    src: ‘bunny.swf’,
    width: “100%”,
    height: “100%”,
    bgcolor: “#000000”
    },
    {
    version: 8
    });

    //Flash Resize Setup
    $(‘#myFlash’).flashResize({
    minWidth: 800,
    minHeight: 750
    });

    });

    body{ padding:0px; margin:0px;}
    .flash-replaced .alt {
    display: block;
    height: 0;
    position: absolute;
    overflow: hidden;
    width: 0;
    }

    Think2loud presents Flash resizing made easy.

  10. I hope code is now visible in correct format.This is flash generated html .
    What am I doing wrong?

    <head>

    xmlFullscreenCross_Izmenjen
    AC_FL_RunContent = 0;

    $(document).ready(function() {
    $(‘#myFlash’).flash({
    src: ‘xmlFullscreenCross_Izmenjen.swf’,
    width: “100%”,
    height: “100%”,
    bgcolor: “#000000”
    },
    {
    version: 8
    });
    $(‘#myFlash’).flashResize({
    minWidth: 800,
    minHeight: 750
    });
    });

    body{ padding:0px; margin:0px;}
    .flash-replaced .alt {
    display: block;
    height: 0;
    position: absolute;
    overflow: hidden;
    width: 0;
    }

    if (AC_FL_RunContent == 0) {
    alert(“This page requires AC_RunActiveContent.js.”);
    } else {
    AC_FL_RunContent(
    ‘codebase’, ‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0’,
    ‘width’, ‘100%’,
    ‘height’, ‘100%’,
    …………….
    …………..
    ……………….
    <div id=”myFlash”
    Think2loud presents Flash resizing made easy

  11. Thank you for the information!

    So far, I could only get this to work in Firefox 3, in conjunction with the jQuery Flash Plugin used for embedding the swf file. However, this combination didn’t seem to work well in IE7…

    I could not get this to work at all with swfobject(2), and it doesn’t appear anyone else could either.

    Thanks, sd

  12. Okay I kinda figured out my question. Could it be possible to adjust min values (as variables) according to the browser size or the monitor size.

    Thank you.

  13. Hey, nice plugin. Do you know if this plugin can be made to work for an image instead of an swf? I’ve been tinkering, but cannot get it to work well. (I’m trying to mirror the exact resize behavior between flash and non-flash pages). Curiously, it does work if I load an image into the jquery flash plugin rather than a swf, but there is a kind of “flash-load-time blink” which is unfortunate for an image.

    Best
    David

    1. Hey David

      That is a very interesting idea. i think you could probably do if it you set the image width and height to 100% inside the div that you run the plugin on. Something like:

      I think that could work if you make sure the div is set to 100% to start.

      Josh

Comments are closed.