Fill browser, with header and footer

17 views
Skip to first unread message

rrodseth

unread,
Jul 3, 2008, 8:31:12 PM7/3/08
to SWFObject
Could someone please point me at a canonical example (that works
"everywhere") for embedding a Flex app so that it takes up all of the
browser window, with the exception of a header (and preferably a
footer as well). I would think this is a very common case.

I am embedding the app with 100% for width and height.

swfobject.embedSWF("myapp.swf", "flashcontent", "100%", "100%",
"9.0.0", "expressInstall.swf", flashvars,params,attributes);

It seems that the "flashcontent" DIV needs to be resized. I had some
success using the non-JavaScript approach described here:

http://www.alistapart.com/articles/conflictingabsolutepositions/

but it failed on Safari (worked for the alternate content if I didn't
embed the SWF, but the SWF was clipped if I did).

Thanks!

Philip Hutchison

unread,
Jul 5, 2008, 3:43:31 PM7/5/08
to swfo...@googlegroups.com
i don't know if i'd call it "canonical", but i have a decent example here:
http://pipwerks.com/lab/swfobject/full-screen/2.0/index.html

the key is to set the CSS height properties for all page elements (due to CSS inheritance)

- philip

Richard Rodseth

unread,
Jul 5, 2008, 4:17:26 PM7/5/08
to swfo...@googlegroups.com
Hi Philip

Yes, I've been looking at your helpful pages, but unless I'm missing
something, the one you link to doesn't have a fixed size header area
above the SWF.

On the other hand, my example seems to be working on Safari now, so
perhaps I just needed to clear the cache. If I add scale: "exactFit"
to mine I don't see the SWF at all, but it doesn't seem to be
necessary.

Bobby

unread,
Jul 5, 2008, 6:44:34 PM7/5/08
to SWFObject
@Philip: just added a link to your excellent examples to the SWFObject
documentation page http://code.google.com/p/swfobject/wiki/documentation

@Richard:
- when embedding your app with a 100% width and height, if possible,
it is best to do all the layout mgt inside Flash, e.g. make
calculations based on your Stage width and height to position and set
the height of all your page components
- when your top header and footer do need to be in HTML, you should
use JavaScript (fixed positioning doesn't work in IE 6 and lower, I
believe) to determine your available Flash viewport height, and scale
the div that a 100%-100% embedded Flash movie is in accordingly, using
the same principles as: http://hossgifford.com/resizer/
Reply all
Reply to author
Forward
0 new messages