Pano height not 100% of window when using Klaus's Simpleviewer gallery example

nefar1ous · October 23, 2011 at 9:51 PM

When using the HTML and javascript as copied from Klaus's example of the simple viewer gallery, my pano only goes 100% full height using Safari. Firefox and IE only show Height of about 150 px. Both Width and Height are set to 100% (width works fine). The example by Klaus uses a strip image and I am using a multi-res pano. It worked fine before I added the simple viewer and made the HTML changes.

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Wat Saket | The Vihara | Front Entrance</title>
	<meta name="viewport" content="target-densitydpi=device-dpi, 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 http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#000000; margin:0; padding:0; }
* html, * html body{ overflow: hidden; }
a{ color:#AAAAAA; text-decoration:underline; }
a:hover{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>


<div id="krpanoDIV">
	<noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript>
</div>


<script type="text/javascript" src="./swfobject/swfobject.js"></script>
<script type="text/javascript" src="./swfobject/swfkrpanomousewheel.js"></script>


<script type="text/javascript">
// <![CDATA[


	if (typeof(deconcept) !== 'undefined' && deconcept.SWFObjectUtil.getPlayerVersion().major >= 6)
	{
		var so = new SWFObject("tour.swf", "krpanoSWFObject", "100%", "100%", "9.0.28","#000000");
		so.addParam("allowFullScreen","true");
		so.addVariable("pano", "tour.xml");
		so.useExpressInstall("./swfobject/expressinstall.swf");
		so.setAttribute("xiRedirectUrl", window.location);
		if ( so.write("krpanoDIV") ) { var mousewheelfixes = new SWFkrpanoMouseWheel(so); }
	}
	else
	{
		document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Adobe Flash Player 9 needed<br><br><br><a href="http://www.adobe.com/go/getflashplayer/"  target="_blank"><IMG SRC="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr></table>';
	}
// ]]>
</script>


</body>
</html>

Display More

Any help?
Thx, Tony

Jarredja · October 23, 2011 at 11:36 PM

Try removing

<!DOCTYPE html>

Or read up on doctype and using % in height.

nefar1ous · October 24, 2011 at 6:52 PM

Quote from Jarredja

Try removing
<!DOCTYPE html>
Or read up on doctype and using % in height.

Thanks Jarredja,
That did the trick. Appreciate the basic lesson in HTML.
Tony

Zephyr · October 25, 2011 at 7:46 PM

removing the doctype is bad practice.

try adding the following CSS style:

html {
height: 100%
}

nefar1ous · November 13, 2011 at 6:36 PM

Quote from Zephyr

removing the doctype is bad practice.
try adding the following CSS style:
html {
height: 100%
}

I appreciate the guidance, I also thought a lack of DOCTYPE was bad practice. I just now managed the time to research a bit and found the correct solution... which is to use margins set to AUTO. If IE8 and back, you must use DOCTYPE or it breaks.
So far it works to center the DIV with the pano in Safari, IE, and Firefox without any hiccups. Just using % alone was not working and was actually the start of my headache. Using strict pixel sizes was never a problem.
SAMPLE

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head>
<style>
#pano { margin-left:auto; margin-right:auto; width: 80%; height: 70%;
				border: 2px solid #ffffff; border-radius: 5px 5px 5px 5px; }
</style>
</head>

Pano height not 100% of window when using Klaus's Simpleviewer gallery example

Participate now!

Users Viewing This Thread