thanks a lot finaly I found

venz — Tue, 20 Jan 2009 23:44:48 +0000

thanks a lot
finaly I found some solution
I added styles to the body tag:
*position:absolute;
*height:100%;
and now the script gets the proper window.innerHeight and the image is centered verticaly at the browser window and not at the whole page height.
It's strange for me because this problem was caused even by empty base tag in the header () and the script centered the image according whole pahe height not the vissible part.

best, venz

Welcome to TWF, venz~! It

decibel.places — Tue, 20 Jan 2009 23:01:48 +0000

Welcome to TWF, venz~!

It would help if you can post a link to the full page or attach an html file (and it needs to have the .html extension, not .htm)

You should probably start a new thread for your specific problem.

hi there, i have similar

venz — Tue, 20 Jan 2009 20:20:12 +0000

hi there,
i have similar problem and if anybody can help that will be great.
i'm using a script found on the internet but it doesn't center the image correcr in IE when a base tag is included in the head. i think the problem comes from this function:

// Return the available content width and height space in browser window
function GetInsideWindowSize() {
	 if (window.innerWidth) {
		  return {x:window.innerWidth, y:window.innerHeight};
    }
    else
    {
		 var baseArray = document.getElementsByTagName("base");
		 if (baseArray.length == 0)
		 {
			 if (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) {
				  return {x:document.body.parentNode.clientWidth, y:document.body.parentNode.clientHeight};
			 } else if (document.body && document.body.clientWidth) {
				  return {x:document.body.clientWidth, y:document.body.clientHeight};
			 }
		 }
		 else
		 {
			 if (document.body && document.body.clientWidth) {
				  return {x:document.body.clientWidth, y:document.body.clientHeight};
			 } else if (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) {
				  return {x:document.body.parentNode.clientWidth, y:document.body.parentNode.clientHeight};
			 }
		 }
    }
    return {x:0, y:0};
}

IE center the image verticaly according the whole page height and not according the inner window height. and the problem is only when base tag is used in the head. in firefox is fine.
i'm not good with the scripts and lost a few days trying to fix this.
please help.

best regards, venz

Hi Steve, It takes a few

decibel.places — Tue, 06 Jan 2009 20:05:03 +0000

Hi Steve,

It takes a few minutes for your flash to load, and meanwhile there is a blank screen.

Either keep it on the screen to load by removing this code:

<script language="JavaScript">
<!--
var disp = document.getElementById("flash");
if (ie)
{ 
//hide while loading
disp.style.visibility = "hidden";
}
else
{
//if not IE, move flash off screen until it loads
disp.style.marginTop = "-2000px";
disp.style.marginLeft = "-2000px";
}

//-->
</script>

or put a placeholder there that will be covered by the flash

Thank you very much! The

diluant — Tue, 06 Jan 2009 19:57:28 +0000

Thank you very much! The site is working great now. As for the flash detection kit i will take a look at it later, but you the man!

This code will hide the

decibel.places — Sun, 28 Dec 2008 17:12:25 +0000

This code will hide the flash while it is loading, center it on the screen, and reposition it when the browser window is resized:

(note that in the attached file I have added base href)

<html>
<head>
<script language="JavaScript">
		<!--
		var ie = document.all? true : false;
		function winSize() {
  		    var myWidth = 0, myHeight = 0;
		    if( typeof( window.innerWidth ) == 'number' ) {
			  //Non-IE
			  myWidth = window.innerWidth;
			  myHeight = window.innerHeight;
		    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			  //IE 6+ in 'standards compliant mode'
			  myWidth = document.documentElement.clientWidth;
			  myHeight = document.documentElement.clientHeight;
		    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			  //IE 4 compatible
			  myWidth = document.body.clientWidth;
			  myHeight = document.body.clientHeight;
		    }
			
			if (myWidth > 900 || myHeight > 480)
			{
				//center flash on larger screens
				if (myHeight > 480) disp.style.marginTop = myHeight/2 - 240 + "px";
				else disp.style.marginTop = "0px";
				if (myWidth > 900) disp.style.marginLeft = myWidth/2 - 450 + "px";
				else disp.style.marginLeft = "0px";
			}
			else
			{
				//on 800x600 screen, put flash flush top/left
				disp.style.marginTop = "0px";
				disp.style.marginLeft = "0px";	
			}
		  }
			
		function init(){
			//display flash onload
			if (ie) disp.style.visibility = "visible";
			winSize();
		}

		onload = init;
		onresize = winSize;
		//-->
		</script>

	</head>

	<body>

		<div>
			<object style="position: absolute" id="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width=900 height=480 align="middle">
				<param name="movie" value="menu.swf"/>
				<param name="quality" value="best"/>
				<param name="play" value="true"/>
				<embed src="menu.swf" width=900 height=480></embed>
			</object>		<!-- test with image, not flash --><!-- <IMG id="flash" name="loader" SRC="ssBBJhome.png" WIDTH="200" HEIGHT="125" BORDER="0" ALT=""> -->
		</div>

	<script language="JavaScript">
	<!--
	var disp = document.getElementById("flash");
	if (ie)
	{		
		//hide while loading
		disp.style.visibility = "hidden";
	}
	else
	{
		//if not IE, move flash off screen until it loads
		disp.style.marginTop = "-2000px";
		disp.style.marginLeft = "-2000px";
	}
	
	//-->
	</script>

	</body>
</html>

I would also recommend loading the Flash using the flash detection kit

For this post, I reworked a snippet I created 3 years ago - I think it is a good resource to post on DZone

Oh this is good! Thank you.

diluant — Sat, 27 Dec 2008 21:52:06 +0000

Oh this is good! Thank you. One more question though, if i where to center the flash movie vertically what should i do?

Hi diluant, Welcome to TWF!

decibel.places — Sat, 27 Dec 2008 21:22:59 +0000

Hi diluant,

Welcome to TWF!

Ok, we have some problems...

Your link doesn't work, I think it is supposed to be http://pages.videotron.com/diluant/ which displays a blank page...

Let's look at the source code (which is not the same as the file you attached)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p>
<object type="application/x-shockwave-flash
data="menu.swf" 
width="900" height="480">
</object></p>
</td>
</tr>
</table>
</body>

I do not think you need the xml declaration: <?xml version="1.0" encoding="utf-8"?>

let's simplify your html tag <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> to <html>

AND CLOSE IT AT THE END OF THE DOCUMENT!! </html>

Let's add center to your p tag <p align="center">

Your code to embed the flash object is incomplete:

<object width="900" height="480">
<param name="movie" value="menu.swf">
<embed src="menu.swf" width="900" height="480"></embed>
</object>

You are no longer using a table, get rid of this code:

</td>
</tr>
</table>

et voila this code works!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p align="center">
<object width="900" height="480">
<param name="movie" value="menu.swf">
<embed src="menu.swf" width="900" height="480"></embed>
</object>

</p>

</body>
</html>

in the attached file, I added <base href="http://pages.videotron.com/diluant/"> so it works locally...