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.
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.
Whoa! Great tute. I need to implement this on my own site. Thanks.
View Wai Man’s profile
Sweet! This is exactly what I needed. Indeed a great tutorial. Much thanks.
very thanks
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.
@jorge Do you a link so i could see it?
it doesnt seem to load the .swf
http://lavena.com.mx/
Looks like your swf is not on the server. if i try and just load
http://lavena.com.mx/lavena.swf
nothing comes up.
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.
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?
sorry, here’s the URL: http://www.tfo.be/jobs/kl
@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.
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.
@Mitch
You would have to set your swf up to be aligned top left in when you create it.
Got it. Works great so far.
Thanks again!
@ptriek
I ran into the same issue. Be sure that “html” and “body” are set to 100% height as well.
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?
Hmm. All my html tags were stripped from the post…
@Mitch
Do you have a link to the page?
Josh
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
Hi,
I am having problems getting this to work on IE6. Is this a known issue? Works fine on all other browsers.
Thanks,
Malin
Thanks so much!
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.
Hmmm
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
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
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?
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.
you could use script to get the monitor size and then pass that into the plugin. check out Get Monitor Screen Resolution with Javascript.
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
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
The site works in my IE7 as well. If you remove the FlashResize plugin does the flash still break?
hey.
i’m having the same issue.
It works on safari, chrome and firefox, but not on some IE7.
was there any solution to this???
the site is http://demo.resourcetitle.com
thanks.
nevermind. it was the flash plugin that was causing the problem.
your resize works great.
I will check it out on my test machine. It was working in IE6. Do you have a link i could look at?
Thanks Josh
do you have a link to the live example?