Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Montag, 16. März 2009, 11:40

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>

2

Montag, 16. März 2009, 20:05

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

Quellcode

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


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

3

Dienstag, 17. März 2009, 10:50

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

Any other suggestion?

Thanks

4

Dienstag, 17. März 2009, 22:31

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

Mittwoch, 18. März 2009, 00:23

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

Profi

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

6

Mittwoch, 18. März 2009, 03:22

This seems to work...

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

css code...

Quellcode

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

Donnerstag, 19. März 2009, 09:55

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

Profi

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

8

Donnerstag, 19. März 2009, 21:16

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

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

9

Donnerstag, 19. März 2009, 22:04

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

Freitag, 20. März 2009, 09:19

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>

Ähnliche Themen