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

Thursday, May 30th 2019, 11:27am

Javascript API Examples question

thank you for reading my question.

i need your understanding about best regards.



i am making a top navigation using css tag, but the height of the panorama does not change to 100% as shown below. Is there any problem?
it will be greatful if u can give any advice






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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html><html><head>	<title>krpano Javascript API Examples</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />		<style>

        *{margin:0; padding: 0; box-sizing: border-box;}
        li{list-style: none;}
        a{text-decoration: none;}
        /*header*/
        h1, .navi_icon{position: absolute;}
        h1{font-size: 18px; left:10px; top: 0px;}
        .navi_icon{right: 10px; top: 20px; color: #fff; font-size: 24px; cursor: pointer;}
        .top_navi {background-color: #ff0084; overflow: hidden; text-align: center;}
        .top_navi li{float: left; width: 25%; padding:10px 0;}
        .top_navi a{color:#fff;}
        .bottom_navi {overflow: hidden; text-align: center; height: 40px; line-height: 40px;
        background:#33cc;}
        .bottom_navi li{float: left; width: 20%; padding:10px 0; position: relative;}
        .bottom_navi a{color:#000; font-size: 14px;}
        .bottom_navi li:before{content: ''; position: absolute; width: 1px; left: 0; top: 14px; bottom: 14px; background-color: #333;}
        .bottom_navi li:first-child:before{display: none;}
        /* .pano{position: absolute; overflow: hidden;} */
		/* @-ms-viewport { width:device-width; } */
		/* @media only screen and (min-device-width:800px) { html { overflow:hidden; } } */
		/* html { height:100%; } */
		/* body { height:100%; } */
        header{ position: relative; background-color: blue;}
		#pano{ position: absolute; width: 100%; height: 100%; }


	</style>
</head>
<body>
    <header>
	    <nav>
	        <ul class="top_navi">
	            <li onclick="loadpano('pano2.xml');"><a href="#">Top_Menu</a></li>
	            <li><a href="#">Top_Menu</a></li>
	            <li><a href="#">Top_Menu</a></li>
	            <li><a href="#">Top_Menu</a></li>
	        </ul>
	        <ul class="bottom_navi">
	            <li><a href="#">Bottom Menu</a></li>
	            <li><a href="#">Bottom Menu</a></li>
	            <li><a href="#">Bottom Menu</a></li>
	            <li><a href="#">Bottom Menu</a></li>
	            <li><a href="#">Bottom Menu</a></li>
	        </ul>
	    </nav>
	<div id="pano" class="pano"></div>


	</header>


<script src="../../../krpano.js"></script>


<script>


	// global krpano interface (will be set in the onready callback)
	var krpano = null;


	// embed the krpano viewer into the 'pano' div element
	embedpano({
		swf : "../../../krpano.swf", 		// path to flash viewer (use null if no flash fallback will be requiered)
		id : "krpanoSWFObject", 
		xml : "pano1.xml", 
		target : "pano", 
		consolelog : true,					// trace krpano messages also to the browser console
		passQueryParameters : true, 		// pass query parameters of the url to krpano
		onready : krpano_onready_callback
	});


	// callback function that will be called when krpano is embedded and ready for using
	function krpano_onready_callback(krpano_interface)
	{
		krpano = krpano_interface;
	}
	function loadpano(xmlname)
	{
		if (krpano)
		{
		krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));");
		}	}</script></body>
</html>



my pool english *smile* *smile*
best regards

2

Thursday, May 30th 2019, 12:23pm

probably html + body are not @ 100%,
you commented those lines

3

Friday, May 31st 2019, 2:47am

probably html + body are not @ 100%,
you commented those lines

i follow this setup <div id="pano" class="pano"></div> in the question

but when i try like this setup didnt workout (guided)
<div id="pano" class="pano" width=100%" height="100%"></div>

Scott Witte

Intermediate

Posts: 248

Location: Milwaukee, WI USA

Occupation: Professional Photographer

  • Send private message

4

Friday, May 31st 2019, 4:20pm

As mentioned before, uncomment the body and html styles.