You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Monday, March 16th 2009, 11:40am

100% width/height Panorama in Firefox

I am trying to made a page with a left column <div id="left"> containing some menu and a right column <div id="panorama"> containing the panorama that must fill 100% of the remaining surface of the page. Here below the page.

It works fine with IE and Safari, but with Firefox the panorama is not shown due to the 100% size issue of Firefox.

The first FAQ at http://code.google.com/p/swfobject/wiki/faq seems to provide a solution but I don't understand how to implement step 3 with krpano.

I have tryed the resizepano() function available in http://krpano.com/108beta/flash10_example.html, that works with swfobject 1.5 but I am not able to use with swfobject 2.1 (that I need to use)

Any suggestion? Thanks Marco

<html>
<head runat="server">
<title>test krpano</title>
<script type="text/javascript" src="swfobject21/swfobject.js"></script>
<script type="text/javascript" src="swfobject21/swfkrpanomousewheel.js"></script>
<script type="text/javascript">
var flashvars = {
pano: "myPano.xml"
}
var params = {
allowfullscreen: true,
bgcolor: "#000000"
}
var attributes = {
id: 'divKrpano',
name: 'krpano'
}
swfobject.embedSWF("krpano.swf",
"divKrpano",
"100%",
"100%",
"9.0.28",
"swfobject21/expressInstall.swf",
flashvars,
params,
attributes);
swfkrpanomousewheel.registerObject("krpano");
</script>
</head>

<body>
<div>
<div id="left" style="width: 200px; float: left">
menu here
</div>
<div id="panorama" style="margin-left: 200px">
<div id="divKrpano">
<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/…lash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>

pdxvr

Beginner

Posts: 14

Location: Portland

  • Send private message

2

Monday, March 16th 2009, 8:05pm

typically this is fixed by forcing the browser into 'quirks mode' by changing the doctype to this:

Source code

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


put that at the top of the page before the html tag

3

Tuesday, March 17th 2009, 10:50am

Unfortunately forcing the browser in quirks mode doesn't solve the problem

Any other suggestion?

Thanks

4

Tuesday, March 17th 2009, 10:31pm

Hi,

the width/height 100% settings of an html element are relative to the size of the parent element,
so the parents must have also a width/height of 100% to make it fullscreen,

best regards,
Klaus

5

Wednesday, March 18th 2009, 12:23am

hi Klaus,

unfortunately this rule seems not to be true with Firefox.

If I set <divid="PanoramaContainer"style="margin-left: 200px; height: 100%; width: 100%;"> the krpano is still not displayed in Firefox, and furthermore in IE and Safari the total width is 200px larger then 100% of the window.

To see something in Firefox at least one of the two sizes must be set in absolute pixels, like

<divid="PanoramaContainer"style="margin-left: 200px; height: 500px">

but this doesn't fill the 100% height

Any other suggestion?

Thanks Marco

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

6

Wednesday, March 18th 2009, 3:22am

This seems to work...

http://testsite.marlincreek.com/demo/css…tourstyle4.html

css code...

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* Test css sheet */

body
{
	background: #030839;
	font-family: Georgia, "Times New Roman", Times, serif;
}

div.container
{
	position: relative;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}


div.left_col
{
	float: left;
	width: 20%;
	height: 400px;
	background-color: #FFFFFF;
}

div.pano
{
	float: right;
	width: 80%;
	height: 400px;
}


You can view the source of the html page.

7

Thursday, March 19th 2009, 9:55am

Thanks Graydon

your suggestion is good but works only if the height of div.pano is set on an absolute pixel amount (height: 400px in your example).

If you set both the height and the width to a xx% (in order to fill horizontally and vertically the window) Firefox do not display any panorama.

Marco

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

8

Thursday, March 19th 2009, 9:16pm

oh yeah, i see that requirement now in your post(s)...

Sorry I can't help anymore at this point in time.

9

Thursday, March 19th 2009, 10:04pm

Hi, I'm not a HTML/CSS specialist but % values for height are always a problem,
also try googling for it, you will find many topics

did you also set the "body" height to "100%" ?
maybe only this is missing...

best regards,
Klaus

10

Friday, March 20th 2009, 9:19am

Solved!! Thanks to all

The problem was to set 100% height also to the <html> element and to the <form> element (i am using asp.net).

I have done this setting a style with 100% height to all the block elements of the chain from <html> down to <div id="krPano">

<style type="text/css">
html, body, #form1, #divxxx...#divyyy, #krPano
{
height:100%;
}
body
{
margin:0;
padding:0;
overflow:hidden;
}
</style>

Similar threads