I have a flash object in my page that i want to make as large as possible. The page is pretty much bare, except for one thing: a bar at the top.
Html:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
// setting flashvars, params, attributes
//...
// adding swf
swfobject.embedSWF("myflash.swf", "myAlternativeContent", "100%", "100%", "9.0.114", "swfobject/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id='banner'>
this is random text, could be an image, could be a menu, with a certain random height i cannot predict
</div>
<div>
<div id="myAlternativeContent">
</div>
</div>
</body>
When i view this page in IE 8, the flash object has indeed a height of 100%, but it is of the browser window, not of the parent div. That means i get a vertical scrollbar and if i scroll it, the flash fills the entire window. This is not what i want. I want the page to have no scrollbar, and the flash to have the height of the rest of the window.
I tried this solution with javascript (after the closing div):
<script language="javascript" type="text/javascript">
function getWindowHeight() {
// by http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var myHeight = 0;
if( typeof( window.innerWidth ) == "number" ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in "standards compliant mode"
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
var otherheight = document.getElementById("banner").offsetHeight;
document.getElementById("myAlternativeContent").parentNode.style.height = (getWindowHeight() - otherheight) + "px";
</script>
But then i see that even though the height of the parent div gets set to the correct amount, the flash object completely ignores it and does not redraw or whatever, and just keeps its merry height.
How can i accomplish what i want to do? No scroll bar, a banner thing on top, and then the rest of the window filled with my flash object?
Modified answer: Try modifying the call to swfobject.embedSWF so that the height you give it is calculated correctly instead of being a %age – ie set it to:
You also need to be careful in case the window is resized… (See point #1). This is an issue your current code has as well