HTMLHelp Forums > Vertical center in HTML and focus on flash

Full Version: Vertical center in HTML and focus on flash

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

pichi

Aug 11 2008, 12:16 AM

Hello,

I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be.

I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus.

I can center align the flash like this:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Always Follow Dreams</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">

</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
</head>
<BODY>
<CENTER>
  <DIV align=right></DIV>
</CENTER>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">
        </script><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" >
          <param name="movie" value="test.swf">
          <param name="quality" value="high">
          <embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed>
        </object>
        </noscript></P>
      </TD>
  </TR></TBODY></TABLE>
</BODY></HTML>

As you can see this source code will center align both ways horizontally and vertically.
I belive this is doing the job:

CODE

Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie.
I can do this with the following code:

CODE

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body onLoad="window.document.test.focus();">
<center>
<table width="100%" height="100%" align="center">
<tr>
<td valign="middle" align="center">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed>
</object></noscript>
</center>
</td>
</tr>
</table>
</body>
</html>

The focus part works with this i believe:

CODE

where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error:

'window.document.test' is null or not an object

This page is right now on my site:

My Webpage

And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean.

My question is:

IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ?

Thank you.

pandy

Aug 11 2008, 12:57 AM

The reason your method for vertical centering works in the first case is that in that document you use a short HTML doctype that triggers Quirks Mode. The XHTML doctype you use for second document triggers Standards Mode (AKA Strict Mode). The focus script has nothing to do with it.

You need to read this
http://hsivonen.iki.fi/doctype/
and this (click "Cancel" when the prompt pops up - you don't want to go to the new site)
http://www.xs4all.nl/~ppk/css2tests/100percheight.html
and maybe this (scroll down to the last heading).
http://css-discuss.incutio.com/?page=CenteringBlockElement

You can use a HTML doctype, but you should use HTML 4.01, not HTML 4.0, for validation reasons if nothing else.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.