You are not logged in.

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>

2

Tuesday, August 2nd 2011, 8:14pm

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

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.