Html 5/CSS 3 - Flash; state of the market

Thu Nov 18, 2010 11:47 am

Hi Dan
Please see screen print, I made a Flash and Html5 version with the Html5 having Flash Full Back.
The attach screen print is the result, both came out the same size, the first was with Safari, then opened the same html file with Google Chrome which of course opened the Flash file. Both look the same to me?

I set both to 800 x 600 window and used the normal ggt html template.
Please if you are still having trouble can you provide more information.

Which version of Pano2VR.
Which web browser you are using
Mac or PC
Which OS
Which html5/Css3 ggt html template are you using?

Kind regards
hopki

HJTravels · Thu Nov 18, 2010 4:12 pm

I can get the tour to display at any resolution except 100%x100%. I can get 100% width but not 100% height. I'm using Pano2VR3, using the latest versions of Firefox, Safari & IE, on a PC with Vista or XP. Not sure why it won't go to 100% Height.

Dan

HJTravels · Wed Dec 01, 2010 4:01 pm

Still don't have an answer to my problem. When I try to display my tour at 100%x100% in flash it gives me 100% width but shrinks the height down to like 200pixles height. Here is the HTML from the index.html page:

Code: Select all

<!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>Hotel Brexton Virtual Tour</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script type="text/javascript">
			function updateOrientation() {
				switch(window.orientation) {
					case  90:
					case -90:
						if (window.pageYOffset==0) {
							window.scrollTo(0, 1);
						}
					break;
					default:
						if (window.pageYOffset==0) {
							window.scrollTo(0, 1);
						}
					break;		
				}
			}
		</script>
    	<style type="text/css" title="Default">
			body{
				margin: 0px;
				padding: 0px;}
			#container{
				margin: 0px;
				padding: 0px;
				float:left; position: absolute;
            width: 100%;
            top: 0px;
            height: 100%;
            left: 0px;}
		</style>	
   
<script type="text/javascript" src="http://www.google.com/jsapi"></script>



</head>


<body onorientationchange="setTimeout(function() { updateOrientation(); }, 10);" >

<script type="text/javascript" src="resources/AC_OETags.js" language="javascript"></script>
<script type="text/javascript" src="resources/p2q_embed_object.js"></script>
<script type="text/javascript" src="resources/pano2vr_player.js"></script>
<script type="text/javascript" src="resources/modernizr-1.5.min.js"></script>
<script type="text/javascript" src="skin.js"></script>






<script type="text/javascript">
	if (Modernizr.csstransforms3d) {
		
		document.writeln('<div id="container" >');
		pano=new pano2vrPlayer("container");
		skin=new pano2vrSkin(pano);
		pano.readConfigUrl("1.xml");
	//			pano.readConfigString(panorama);
		updateOrientation();
		setTimeout(function() { updateOrientation(); }, 10);
		setTimeout(function() { updateOrientation(); }, 1000);
	} else {
		if (DetectFlashVer(9,0,0)) {
			
			p2q_EmbedFlash('1.swf','100%','100%',
				'bgcolor', '#f0f0f0',
				'play', 'true',
				'cache','true',
				'allowFullscreen','true',
				'autoplay','true'); 
		} else {  // flash is too old or we can't detect the plugin
			var alternateContent = 'This content requires the Adobe Flash Player Version 9 or higher. ';
			document.write(alternateContent);  // insert non-flash content
		}
	}
</script>




	<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
	try {
	var pageTracker = _gat._getTracker("UA-00000000-1");
	pageTracker._trackPageview();
	} catch(err) {}</script>
</body>
</html>

If I change the height of the flash to 900pixels it displays correctly, I would just like to have it like my other tours at 100% of the browser window. I am using several PC's with Vista and XP, and all the standard browsers. Any help would be great.

Thanks,
Dan

Fri Dec 03, 2010 3:26 pm

If I remember correctly the problem is the DOCTYPE. Try to use for example

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

height 100% should work. If you google "doctype 100% flash" you can find out more about this problem.