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.
[css]
html {
height: 100%;
overflow: auto;
}
#flashcontent {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
[/css]
In the javascript, do the following:
[js]
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 );
}
[/js]
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 900×600 px.
Download SWFForceSize here.
78 Comments so far
Bob, cool, glad it’s useful (and working
)
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…
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?!?!)
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.
I removed the vertical scrollbar in Firefox by simply adding overflow-y: auto; to the css body.
I can’t post the cods! Why?
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
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
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!!!
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?
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
where and how should i put this:
var forcesize = new SWFForceSize(so, 1003, 622);
using swfobject 2.0 ???????
any help please
[...] 2) SWFforceSize: este aqui permite colocar uma altura m
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 [...]
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.
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/ [...]
[...] http://blog.pixelbreaker.com/flash/swfforcesize/ [...]
Thank’s
Removing your doctype will cause some SWFAddress functionality to fail in Internet Explorer 8