You are not logged in.

wtservizi

Trainee

  • "wtservizi" started this thread

Posts: 44

Location: ITALY

Occupation: Photographer

  • Send private message

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

wtservizi

Trainee

  • "wtservizi" started this thread

Posts: 44

Location: ITALY

Occupation: Photographer

  • Send private message

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

wtservizi

Trainee

  • "wtservizi" started this thread

Posts: 44

Location: ITALY

Occupation: Photographer

  • Send private message

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.

wtservizi

Trainee

  • "wtservizi" started this thread

Posts: 44

Location: ITALY

Occupation: Photographer

  • Send private message

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

wtservizi

Trainee

  • "wtservizi" started this thread

Posts: 44

Location: ITALY

Occupation: Photographer

  • Send private message

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