100% Height and 100% Width Flash Embed with jQuery and swfObject
By jonkarna
This is a little tutorial I mocked up while running my own blog. Since I'm tearing my blog down, thought I would put it in a safe place. The goal of this project was to fill the browser window with an swf.
You would think that creating full browser flash, 100% height and 100% width, would be easy. However, from recent experience, I've realized the pains of making the flash embed do what I intend it to do. This article will help anyone who is struggling with a full browser flash embed.
I am using jquery. More specifically, I am using the swfObject jQuery plugin to embed the flash. If you don't want to use jQuery, you can just get swfObject here and follow their syntax as another way to do this. Here is an article that might also help.
$("#flashcontent .replace").flash({
swf: "flash/flash_main.swf",
width: "100%",
height: "100%",
params: {
wmode: "opaque"
}
});
Every tag that the flash is going to be embeded into needs to have a height of 100% specified.
html, body, #container, #flashcontent, #flashcontent .replace {height: 100%;}Here is the html structure for my page. I have too many levels of tags for this example, but I figured that it would really show how important it is that every tag has a height of 100% specified.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>...</head>
<body>
<div id="container">
<div id="flashcontent">
<div class="replace"></div>
</div>
</div>
</body>
</html>
Actarian 20 months ago
check also JFE Plugin @
http://www.eightclaws.com