Javascript API Examples question

Schüler

Donnerstag, 30. Mai 2019, 11:27

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

Quellcode

<!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*

best regards

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

Beiträge: 1 362

Donnerstag, 30. Mai 2019, 12:23

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

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

jang2620

Schüler

Beiträge: 46

Freitag, 31. Mai 2019, 02:47

Zitat von »indexofrefraction«

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>