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

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

  1. Wai Man wong on September 9, 2008 at 11:10 pm

    Whoa! Great tute. I need to implement this on my own site. Thanks.

    View Wai Man’s profile



  2. Bruce Robertson on September 15, 2008 at 11:05 pm

    Sweet! This is exactly what I needed. Indeed a great tutorial. Much thanks.



  3. çiçek on October 4, 2008 at 12:02 pm

    very thanks



  4. jorge mejia on November 10, 2008 at 2:52 pm

    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.



  5. Josh on November 10, 2008 at 2:55 pm

    @jorge Do you a link so i could see it?



  6. jorge mejia on November 10, 2008 at 4:02 pm

    it doesnt seem to load the .swf
    http://lavena.com.mx/



  7. Josh on November 10, 2008 at 4:18 pm

    Looks like your swf is not on the server. if i try and just load

    http://lavena.com.mx/lavena.swf

    nothing comes up.



  8. jorge mejia on November 10, 2008 at 8:04 pm

    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.



  9. ptriek on November 14, 2008 at 6:06 am

    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?



  10. ptriek on November 14, 2008 at 6:07 am

    sorry, here’s the URL: http://www.tfo.be/jobs/kl



  11. Josh on November 14, 2008 at 8:31 am

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



  12. Mitch on January 15, 2009 at 1:01 am

    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.



  13. Josh on January 15, 2009 at 9:37 am

    @Mitch
    You would have to set your swf up to be aligned top left in when you create it.



  14. Mitch on January 15, 2009 at 4:11 pm

    Got it. Works great so far.
    Thanks again!



  15. Wai Man Wong on January 26, 2009 at 11:49 am

    @ptriek
    I ran into the same issue. Be sure that “html” and “body” are set to 100% height as well.



  16. Mitch on February 22, 2009 at 12:52 am

    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?



  17. Mitch on February 22, 2009 at 12:56 am

    Hmm. All my html tags were stripped from the post…



  18. Josh on February 22, 2009 at 8:10 am

    @Mitch

    Do you have a link to the page?

    Josh



  19. […] This great plugin for jquery from think2loud.com handles the problem. […]



  20. charles on March 25, 2009 at 4:05 pm

    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



  21. Malin on May 18, 2009 at 7:15 am

    Hi,

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

    Thanks,
    Malin



  22. Josh on May 19, 2009 at 3:03 am

    Thanks so much!



  23. Predrag Pantelic on May 28, 2009 at 2:13 pm

    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.



  24. Predrag Pantelic on May 28, 2009 at 2:32 pm

    Hmmm



  25. Predrag Pantelic on May 28, 2009 at 2:58 pm

    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



  26. sideDoor on June 2, 2009 at 8:35 pm

    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



  27. Daniel Smith on July 10, 2009 at 10:23 am

    Hi, I was wondering if anyone knows how to implement this code to not re-size (large’n) the swf, when I resize the browser?



  28. alphav on August 18, 2009 at 4:00 am

    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.



  29. David on August 27, 2009 at 12:23 pm

    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



    • Josh on August 27, 2009 at 2:39 pm

      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