You are not logged in.

Problems with krpano in a jquery Webapp

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.

checker0815

Beginner

  • "checker0815" started this thread

Posts: 2

  • Send private message

1

Monday, August 1st 2011, 12:43pm

Problems with krpano in a jquery Webapp

hi,
i trying now for days to insert a krpano pano into my jQuery Mobile App, but that didn work well. If i insert the pano into my normal jQuery Mobile page and than link from a other page to it, i dont see the pano. This Problem is not only on the iphone but also in the normal desktop browser. I checked the paths and everything else, but i didn find the problem. If i kick out the whole jquery code, the pano works great. So now i post both sites:

site.html

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

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="viewport" content="width=320; height:480; initial-scale=1.0; maximum-scale=1.0; user-scalable=1.0;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta names="apple-mobile-web-app-status-bar-style" content="black" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
	<link href="images/startup.png" rel="apple-touch-startup-image" />
<meta content="minimum-scale=0.9, width=device-width, maximum-scale=0.6667, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
	<div data-role="header" style="width:100%;">
		<a href="referenzen.html" data-role="button" data-icon="arrow-l" style="margin-left:-8px;">Zurück</a> <div style="float:left;padding-top:5px;padding-left:90px;"><img src="images/logo.png" alt="" /></div><div style="margin-left:60px;margin-top:12px;"><span>Attersee</span></div>
     	<div style="float:right;padding-right:3px;margin-top:-24px;"><a href="index.html" target="_parent" data-role="button" data-icon="home" data-iconpos="notext">Home</a></div>
	</div><!-- /header -->

	<div data-role="content">
	<div style="margin-left:-10px;margin-top:-10px;">
	<a href="touren/see/test.html"><img src="images/attersee.jpg" alt="Attersee"  /></a>
	<img src="images/landungssteg.jpg" alt="Landungssteg Attersee"  />	</div>
  </div><!-- /content -->
</div><!-- /page -->
</body>
</html>


test.html

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

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=320;  initial-scale=1.0; maximum-scale=1.0; user-scalable=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="yes" name="apple-mobile-web-app-capable" />
	<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
	<link href="images/startup.png" rel="apple-touch-startup-image" />
<meta content="minimum-scale=0.9, width=device-width, maximum-scale=0.6667, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
	<style>
		html { height:100%; }
		body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
		a{ color:#AAAAAA; text-decoration:underline; }
		a:hover{ color:#FFFFFF; text-decoration:underline; }
	</style>
</head>
<body>
<div data-role="page" id="see">
<div id="pano" style="width:100%; height:100%;">
<script src="panos/see/see.js"></script>
	<script>
		var viewer = createPanoViewer({swf:"tour.swf", xml:"panos/see/see.xml", target:"pano"});
		
		if ( viewer.isHTML5possible() )
		{
			viewer.useHTML5("always");
			viewer.embed();
		}
		else
		{
			// show error message
			document.getElementById("nonhtml5infos").style.display = "inline";
		}
	</script>
	</div>
</div><!-- /page -->
</body>
</html>

checker0815

Beginner

  • "checker0815" started this thread

Posts: 2

  • Send private message

2

Tuesday, August 2nd 2011, 8:14pm

i think there is not clear sollution for that problem! or can someone help?

stefan.vonfintel

Beginner

Posts: 5

  • Send private message

3

Saturday, December 3rd 2011, 2:46pm

One solution to your problems

<div data-role="page" class="page-tour">
<script src="tour.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />


<div data-role="content">
<div id="panodiv">
<!-- tour loads here -->
</div>
</div>

<script>
var viewer = createPanoViewer();
if ( viewer.isHTML5possible() ) {
viewer.useHTML5("always");
viewer.addVariable("id", "krpanoSWFObject");
viewer.addVariable("xml", "tablet.xml");
viewer.embed("panodiv");
}
else {
alert('Error: Browser is not capable of showing this tour');
}
</script>

<script>function krpano() { return document.getElementById("krpanoSWFObject"); }</script>

</div>
And then the stylesheet contains the following:

Source code

 
1

.page-tour, .ui-content, #panodiv { width: 100%; height: 100%; padding: 0; }


I have added a class of page-tour to the data-role page for referencing.
Hope that helps.

Sorry that I am not using your code but I had this already on my pc but I am sure you can implement it.

Similar threads