SWFObject add-on: Size limiting for full window flash
[slug]swfforcesize[/slug]Here's another add-on for SWFObject. This one allows you to create a full-window flash movie, but when the browser window is set below the specified size, the div containing the flash is kept at the minimum size and horizontal/vertical scrollbars are displayed.
Again it's easy to implement, you have to make a few small changes to the HTML/CSS/JavaScript
Firstly, you have to remove the !DOCTYPE declaration from the very top of the HTML document, as, for some reason, this causes the browser to scroll, even though the flash container is set to 100% height. Then modify the CSS so the the html's overflow is set to auto. Also, the #flashcontent div needs to have it's positioning set to absolute, this stops Safari on Mac OS from showing the vertical scrollbar.
-
html {
-
height: 100%;
-
overflow: auto;
-
}
-
-
#flashcontent {
-
position: absolute;
-
top: 0px;
-
left: 0px;
-
height: 100%;
-
width: 100%;
-
}
In the javascript, do the following:
-
var so = new SWFObject('flash.swf', 'website', '100%', '100%', '8', '#333333');
-
-
so.useExpressInstall('js/expressinstall.swf');
-
-
so.addParam('menu', 'false');
-
so.addParam('scale', 'noscale');
-
so.addParam('salign', 'lt');
-
-
if( so.write('flashcontent') )
-
{
-
var forcesize = new SWFForceSize( so, 900, 600 );
-
}
When you call the 'SWFForceSize' constructor, the last two arguments are the minimum width and height of the movie, in this case the minimum size is 900x600 px.
Download SWFForceSize here.
97 Comments so far
Leave a reply
Thanks! Works fine.
I have been meaning to implement this myself for a while but obviously had not gotten anything yet.
Just added it to this site: http://amused.nl
Bob, cool, glad it's useful (and working ;) )
Hi there, i am having a few problems with this, any chance for some guidance? Thanks
Huzzah! You rock! Thank you SO MUCH!!! :-)
Your sample js code reveals the single quote, I saw that swfobject uses double quottes. Possible place for problems mentioned above.
i.e.
var so = new SWFObject('flash.swf', 'website', '100%', '100%', '8', '#333333');
should be:
var so = new SWFObject("flash.swf", "website", "100%", "100%", "8", "#333333");
No?
Thanks, this is GREAT!
With Safari, during resizing I'm noticing some flickering when the scrollbar is disappearing and reappearing (when it should be always on).
Any idea how this can be 'fixed'? Or is this because the swfobject resizes it first to 100%, and then this object comes in and resizes it again?
Hmm, I'm also noting that the scrollbar when resizing is seen, and showing that there is some content to be scrolled, but when you release the mouse, no scrollbar is shown. (sometimes it does, sometimes it doesn't)..
When changing
var w = winSize.width
(repost of previous comment with some html stuff rewritten)
When changing
var w = winSize.width < this.minW? this.minW+"px" : "100%";
var h = winSize.height < this.minH? this.minH+"px" : "100%";
to
var w = winSize.width < this.minW? this.minW+"px" : winSize.width;
var h = winSize.height < this.minH? this.minH+"px" : winSize.height;
the resizing runs much smoother on Safari, I'll be checking other browsers now, and maybe adding some browser check for this behavior if the other browsers start acting funny because of this.
Euhm currently I'm only making matters worse.. ;)
I'll post a 'fixed' (in my eyes) version here when I'm happy with it...
I also noted a dependency mention in your code:
* Dependencies:
* SWFObject v2.0 - (c) 2006 Geoff Stearns.
* http://blog.deconcept.com/swfobject/
Where is this v2.0 of SWFObject to be found? I only have seen 1.4.4 as of yet (maybe that's why I have so many troubles?)
Hmm ok, silly me.. I forgot to include the css stuff mentioned in here.. *shame*.
This solved all my problems but one. When in IE, with a horizontal scrollbar. It forces the vertical scrollbar to be there also, with some space to scroll, even if the height is greater then the minimum height... (didn't yet succeed in fixing that..)
I could have saved me some time to check if the css was included.. hehe
Hi Zokdok, Yeah, in IE, it has both scrollbars, it's crap, but that's IE for you!
glad you worked out the CSS was missing! ;)
Now I ran across a new bug.. yeah..
In FireFox (v2.0), when you have your flash on Stage.align = "" (center), it aligns it at the top when I activate the resizer object... :(
I can't find any code in here that would behave as it does.
I've traced the bug being caused by postion:absolute; in firefox...
very weird.
When you leave that one out, it works in FireFox and Safari. I'll have to check it in IE.
situation: In IE / Windows, when resizing to a point where a scrollbar is needed, and after that resizing to larger where no scrollbar is needed, the right side keeps showing space for a scrollbar.
fix:
change:
if( document.all ) document.body.scroll = ( w!="100%" || h!="100%" )? "auto" : "no";
to:
if( document.all )
{
if ( (document.body.scroll = ( w!="100%" || h!="100%" )? "auto" : "no") == "auto")
{
document.body.style.overflow = "auto";
}
}
description:
it resets the overflow back to auto, and will update the empty space on the right where no scrollbar was even visible :)
hi,
i have experienced some problems with getWinSize under firefox 2.0, so i fixed it, here's the solution:
change:
// -----------------------
getWinSize: function()
{
var winH, winW;
if (parseInt(navigator.appVersion)>3) {
if ( document.body.offsetWidth ){
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
} else if ( document.body.offsetWidth ){
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
return { height: winH, width: winW };
},
// -----------------------
to:
// -----------------------
getWinHeight: function()
{
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
},
getWinWidth: function()
{
var windowWidth = 0;
if (typeof(window.innerWidth) == 'number') {
windowWidth = window.innerWidth;
} else {
if (document.documentElement && document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
if (document.body && document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
}
return windowWidth;
},
getWinSize: function()
{
var winH, winW;
winW = this.getWinWidth();
winH = this.getWinHeight();
return { height: winH, width: winW };
},
// -----------------------
Top 6 Flash Development Tools...
1) Fuse Kit For movieClip tweening I’ve been using the Zigo Tween engine until I saw Moses Gunesch at the Flash Forward conference in Austin showing off this amazing set of classes. Fuse is built upon the Zigo engine and expands the MovieClip tweenin...
hey thanks for the great fix to a common problem. however, is there any way for the stage size of the swf to be the actual size of the browser, currently it only is if its larger than the size params you pass in to the js.
for example if you are centering something on the screen according to the stage size in flash, if the user's browser is smaller than the dimensions you sent in flash sees the stage size as the size params you sent and not the actual window size.
I was loking ewerywhere for this, thanks!
You just saved my life ;-)
What a elegant yet powerful solution!
Thanks a million!!!
Please, my Firefox 2.0 window is still showing the vertical bar ! Can someone help me on this ?
Ops, it's just take out the html headlines that dreamweaver put when creating a new document :)
Locks up IE 6 and 7 on my machine. Interestingly, IE 5.5 works fine (but who is using that?!?!)
Thanks so much! This is absolutely wonderful and saved me hours (or days) of trying to dig through and write this myself. It works beautifully.
hello, this is cool and works great in fireworks but for some reason in IE it does some strange things on all objects which have filters on them. Objects are not in place and are sometimes not shown completely.
Any way to fix this?
i got it, if any one has the same problem just put all your content on another movie that you call on level 2.
@pixelbreaker
Awesome work! I was very excited to find this... and it has helped me immensely. Thank you. Also, being irked by the weird doctype problem, I found a solution! (I haven't tested it in all browsers yet). I noticed I only received the scrollbar when using a doctype of XHTML 1.0 Strict, but when switching it to transitional, I did not. Weird. But to the fix... by adding the css property "line-height: 0;" to the html selector, it stops the scrollbar from appearing when there is a doctype :) Enjoy!
@seb
I also ran into that problem with elements that had filters being displayed incorrectly or not at all in IE, and solved it by using SWFObject to embed a movie that's sole purpose is to load in the movie using the filters.
Jonathan Heaven
Hi,
I only get this message: You need to upgrade your Flash Player!
I have Flash Player 9 installed. A full sample would be appreciated. Better if it would include the fixed problems posted above. Hope someone still reads these messages. :)
Thanks!
Andrei
I removed the vertical scrollbar in Firefox by simply adding overflow-y: auto; to the css body.
I can't post the cods! Why?
anyone know of a way to call this from within an SWF?
for instance, in the case of content overflowing the browser window in one view within the SWF but not in another view.
i am building a site where the homepage is 900 x 600 but the product page is 900 x 1200 and so i would like to have the browser scroll appear on the product page but not on the home page.
sorry if i am missing something obvious.
thanks,
scottr
Hi there!
I have the same question as scottr.
It would be awesome to be able to send values to this from inside flash - that way different pages could have different scroll height...
Does anyone have an idea on how to deal with that?
Niklas
Hi, i also have the same question,
they used this on http://www.nike.com/nikeskateboarding/v3/.
it resizes dynamically depending on the content.
can somebody help?
i'v the same problem !!
i tried:
forc = function(w, h) {
var forcesize = new SWFForceSize( so, w, h );
}
if( so.write('flashcontent') ) {
forc(900, 600);
}
and in the flash button:
this.onRelease = function() {
getURL("javascript:forc(900, 2000);");
}
but didn't work !!! the scroll change.. but only if i click in the button and then i resize the IE window... =/
any idea?
god please send an angel !!!
Anyone help us please !! :-)
Here's a solution that uses only CSS to solve the problem:
http://www.antix.co.uk/code/css/imposing_minimum_width
Hi there guys!
After lots and lots of time trying to figure out how to use this script with the dynamic height - I've figured it out..! After looking at http://www.nike.com/nikeskateboarding/v3/ (thanks to Homeboy) I saw that the js-file(swfforcesize.js) they use is modified. So simply clear your browser cache and go to the Nike site and then go into your cache and fetch the updated js-file.
Then call the function like Paulo Araujo above does or use the more updated version and call the js-function with ExternalInterface in your actionscript.
the default browser scrollbar works fine with my height variable swf file, unless i click on the flash movie.
it seems as giving the flash movie focus disables the browser scrollbar to react. has anyone else experienced this behaviour?
ups i hvae to correct myself.
the mouse scroll wheel is the part which does not work anymore after giving focus to the flash movie. the scrollbar itself (when clicked or dragging) still works.
@ninklas, steve, homeboy:
add this line of code to your swfforcesize.js after line 19:
this.onResizeDiv();
it will resize the div when initialised and you'll get rid of your problems.
Hallo!
How I can use the script ? I trayed - no sucess.
I dont know CSS and JAVA, Someone ? please ! HELP
mercy @ ben !!
Homeboy and Niklas, I'm trying to do the resize but it doesn't work.
I've edited the index.html (added the 'forc' function) and uses the same code for the 'swfforcesize.js' as NIKE does and I'm calling from flash with 'getURL("javascript:forc(900, 2000);");'.
Am I missing something?
[...] pixelbreaker : SWFObject add-on: Size limiting for full window flash - SWFObject add-on: Size limiting for full window flash Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] pixelbreaker : SWFObject add-on: Size limiting for full window flash [...]
[...] pixelbreaker : SWFObject add-on: Size limiting for full window flash [...]
I've been using this without the resize thing for a while but now need to have a resizable page.
I got the swfforcesize from nike and couldn't make the difference with the one I had already. Anyway I tried it with the same function "forc" as above.
Don't work.
I also tried
getURL("javascript:SWFForceSize( so, 600, 1200 )");
since function SWFForceSize( swfObject, minWidth, minHeight )
is in the swfforcesize.js
but doesn't work also.
Can anyone who got this working put their code here?
i finally got it.
I think some more people might struggle with this so here's a working examble :
http://www.chez.com/seb78/swfforcesize.zip
a dead link. Please please give a working one.
a dead link. Please please give a working one. I have struggled with this for days...
There seems to be a problem with the use of filters. I tried to load the main swf in a container swf. That solved a lot of problems, but there's still a problem.
When the page needs a scrollbar and the following page doesn't, some of the movieclips are moved on the Y-axe with the width of the scrollbar. This happens in all the browsers. This is also only when the flash-content is centered...
Is there a solution for this problem?
I tried to center the container_mc but with Stage.width, but the problem still remains...
grtz,
vince
[...] Pixel Breaker (no nos sirvió de mucho pero los sites de nike lo usan siempre, una tecnica con javascript) [...]
Hi..
i've developped an other script doing quite the same thing.
For the css it generate it directely from the javascript script.
The script has been developped as well for swfObject, but can be used with ActiveContent or standalone.
( have as well the same problem with the doctype... if you find a solution ^^ )
If you want to check it and give me some advises:
http://www.daweed.info/laboratoire/javascript/gerer-la-position-et-les-scrolls-dun-site-flash-au-sein-dune-page-html
did anyone get the above working so that u can resize dynamically form flash, the trial above seems to go dead. Really need to know ho whtis can be acheived if someone could help. thanks in advance
Looking at the current swfforcesize.js code, I see this in the getWinSize function...
if ( document.body.offsetWidth ){ // Gecko / WebKit
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
} else if ( document.body.offsetWidth ){ // MS
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
...Both the if and else if statements do the same thing, don't they? That surely can't be right.
hi there, i recently implemented some of your scripts in my personal website, after that i discovered that people in their iphones may want to see it too, so i included a div with XHTML content so if u don't have flash can laso view the content:
http://www.theguaz.com/
But, i've lost all especial characters (i'm from Chile and want tildes and Ñ's and other stuff). How can i get those characters back?
theguaz
Hi, I was wondering if you are planning to have the SWFForceSize compatible with SWFObject 2.0. Otherwise I will have to look into it myself (not really a problem, but you get the inner workings of your own code, and after changing some stuff, I can't get it to work yet.)
Hi zok,
I haven't had a look yet, i'll look into it though.
Sweet!!!
hi
has anyone go thtis workign with swfobject 2.0 and how it implenets the swf now?
thanks in advance
ade
I have tried, but I haven't got a working one yet. Neither of the MacMousewheel script :(
I thought it would not be that hard, as most of the code is already there, but it would not come from me :( ...
i am a little confused here, swfobject2 is listed as a dependency but it does not appear to work with swfobject2
is there a working version with swfobject2?
thanx
Pz
Well the SWFObject2 mentioned here is was a svn repository version of SWFObject which never became the 2 but more like the 1.5.
we dropped back to swfobject 1.5 and its working great, thanx
Pz
Can any javascript experts get this working with swfobject 2?
I couldn't get the scrollbars to show up in IE6, but thanks to Zokdok, problem was fixed using the code below :)
Zokdok / December 22nd, 2006 10:09 am
fix:
change:
if( document.all ) document.body.scroll = ( w!="100%" || h!="100%" )? "auto" : "no";
to:
if( document.all )
{
if ( (document.body.scroll = ( w!="100%" || h!="100%" )? "auto" : "no") == "auto")
{
document.body.style.overflow = "auto";
}
}
I'm looking for a means of resizing the height of a flash window using SWFobject 1.5
I would like to be able to roll over a button (or by another action) in my flash element and have the height of the flash window change, any ideas on how this can be done, I've searched alot, but all i can find are instructions on making the flash window 100%.
I'm working with a transparent window that is layered over the page and would like to keep the flash window small, until it is called into action and covers part of the page.
Any thoughts would be helpful.
Tim
can you post a zip file with working example?
Hi, I can't figure out how to make the mouse wheel work (PC) and its driving me crazy. I'm using SWFForceSize with SFWObject but as soon as I click into my flash file it looses the mouse wheel function... anyway to fix this.
THANK YOU IN ADVANCE!!!!
don't work this script in IE
if( document.all ) document.body.scroll = ( w!="100%" || h!="100%" )? "auto" : "no";
to:
if( document.all )
{
if ( (document.body.scroll = ( w!="100%" || h!="100%" )? "auto" : "no") == "auto")
{
document.body.style.overflow = "auto";
}
}
try the swffit
http://swffit.millermedeiros.com/
it works with dynamic and static publishing of swfobject 2.0
[...] http://blog.pixelbreaker.com/flash/swfforcesize/ [...]
I got the scroll bars to show up but for some reason they are using the size of my embedded swf file as their minimum sizes instead of what I set them to with the SWFForceSize. Also, It won't center in any browser. I'm a bit new to this so if this makes sense to anyone, please help.
hey how does this work with swfObject 2.0 ????????????????
where and how should i put this:
var forcesize = new SWFForceSize(so, 1003, 622);
ussing swfobject 2.0 ???????
any help please
[...] - Mac Mousewheel scrolling in AS2 and SWFObject add-on: Size limiting for full window flash (my [...]
where and how should i put this:
var forcesize = new SWFForceSize(so, 1003, 622);
using swfobject 2.0 ???????
any help please
ok guys.. I need help.
I implemented the version of swfforcesize.js that I found on www.virginfestival.ca .
It works... www.u2r1media.com/testing/u2r1.html ... except that it doesn't resize to fit smaller browsers fully. It looks great on huge screens or normal screens. Right now its cutting off a little of the top and bottom on small screens. How can I ensure it shrinks to fit?
Am I missing an actionscript (right now I don't have any regarding window or swf size) or something in the css or java?
Help please! I've got deadlines to meet!
also, not to sound totally dumb, but what exactly does the mousewheel script do? Do I need that?
Thanks in advance..
[...] 2) SWFforceSize: este aqui permite colocar uma altura mnima para o SWF. Deste jeito da pra deixar o flash em 100% na tela mas definir uma altura mnima de tela para colocar ou no o scroll (http://blog.pixelbreaker.com/flash/swfforcesize/) [...]
awesome awesome awesome!!!!!!
any ideas on calling SWFForcesize with actionscript? i need it to resize dynamically depending on the content with the flash file.
i'll give it a go myself but if anyone's done it successfully, i'd love to know!
cheers
[...] SWFForceSize is similar. "Size limiting for full window flash" Not exactly sure how they differ internally, but the approach that might work is hinted in the documentation and API But only when static publishing via the use of [...]
Has anyone got this working with SWFObject 2.0 yet? This Resizer is the only feature holding me up from using the newer 2.0 embed code. Thank you Pixel Breaker.
Im wth you Zen Monkey. I just spend all day trying to figure out why i was all bugged out in FF and IE, whilst not in safari, and it turns out it was because of SWFForceSize. Looks like something in the newer SWFObject code is causing it not to work.
Did anyone solve the problem yet, with dynamically resizing the page according to the size of the flashfile?
So when I expand my content in flash.... the scrollbar dynamically follows...
Please someone make a working example and upload!
Thank you.
i have a problem regarding the runActiveContent issue in the html file. where do i insert the script so that my swfforceresize will work?
[...] swfobjectでエンベッド(設定によりますが、エンベッドが成功したらSWFForceSizeで最小サイズを固定) [...]
[...] a little 'googling' I found this SWFObject addon for explicitly setting a 'minimum' stage dimension, and hence providing scroll bars should the [...]
i found a solution:
at swfforcesize.js original:
function SWFForceSize( swfObject, minWidth, minHeight )
{
this.div = swfObject.getAttribute('id');
this.minW = minWidth;
this.minH = minHeight;
var o = this;
this.addWindowEvent( 'onload', this, this.onLoadDiv );
this.addWindowEvent( 'onresize', this, this.onResizeDiv );
}
and it dont work with SWFObject 2.0 but if you change the function parameters like this it will work:
function SWFForceSize( id, minWidth, minHeight )
{
this.div = id;
this.minW = minWidth;
this.minH = minHeight;
var o = this;
this.addWindowEvent( 'onload', this, this.onLoadDiv );
this.addWindowEvent( 'onresize', this, this.onResizeDiv );
}
just use this:
new SWFForceSize( "flash_content", 992, 588 );
Can i use that way Gabriel?
hugs
found js that is easy to use and works well with swfobject 2.0. This is how the js should be set up in my opinion.
http://swffit.millermedeiros.com/
[...] フルflashサイトで規定のwindowサイズ以下の場合、window側のスクロールバーを表示したいという要望がちょくちょくある。 swfforcesize.jsを使えばいいんだけど、使わない場合の対策をちょっとメモ。 [...]
[...] javascriptのライブラリはswffit と swfforcesizeなどがある。両者ともSwfObjectと併せて使用することを前提にしている。swfforcesizeはシンプルにコンテンツサイズを最大に設定してくれるだけだが、swffitは最小サイズ、最大サイズ、リサイズ時のイベントハンドらを登録できたりとswfforcesizeよりも高機能、ドキュメントもしっかりしてる。swffitを採用しているサイトは複数あったから、結構有名なライブラリなのかな。 [...]
Hello, it works like magic and I'd like to say thaks, the problem is this:
I resize the window to activate the scrollbars, and they appear. But when I go fullscreen again, the shadow of the vertical scrollbar is there and takes the color set for the background
[...] フルFlashサイトの最小サイズ 昨日、ちょっとサイトを弄っていて、所有の初代MacBookで確認したら、サイトのメニューがTOP以外で表示されていないという状態になってました。 原因はというか、仕様のとおりなんですが、自作のStageResizeクラスではリサイズイベントを発生させるStageの最小サイズを設定できるようになっているんですが、そのサイズが1000×800とMacBookの縦解像度の800と同じで、単純に画面領域が足りていなかっただけというお話なんですが、まぁ、かなりまずいので、すぐに元々導入予定で忘れていたswffitを導入しました。 これでブラウザが指定サイズ以下の時にはスクロールバーが表示されるようになります。 使い方は簡単なのでサイトを見ていただくとして、ふと、他のフルFlashサイトはどうなってるんだろうと思い、軽く見回ってみたんですが、いろいろな方法で対策されているようで、他にもswffitと同じようなものでswfforcesizeってのもあるんですね。 まったく対処していないサイトもあったり、またはCSSのmin-height,min-widthを使っているとこもありました。 swffitはSWFObjectの使用が前提でSWFAddressとも同時に利用できます。 個人的にはswffitが楽でよさそうです。 [...]
[...] http://blog.pixelbreaker.com/flash/swfforcesize/ [...]
Nice been lookin for this.
Thanks
[...] http://blog.pixelbreaker.com/flash/swfforcesize/ [...]
Thank's