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
HTML
<!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>
Display More
test.html
HTML
<!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>
Display More