Insert Krpanojs viewer inside a Jquerymobile framework

  • Hi I've been trying to include the js viewer in a jquerymobile standard page without any result :(
    the problem comes when the css do some stuff... it creates a conflict to have in the same page the jquery.mobile-1.0a3.min.css


    Does anyone know how to solve this??

    the only way I found was to take krpano out of the framework, and just call an external page, loosing this way the jqtouch looking, at least in transitions

  • Hi Klaus,


    here I send you the sample code I'm using


    the styles you embed in the html, I just copied to the general css (jquery.mobile-1.0a3.css)

    As I want to have text and xml name as variables (for multilangugae), I just saved it into php


    PHP
    <?php
          ########     ###########       ####       ####    #######      ###########  ################     ####      ####   ###########    ############# ##################     ####     ####  ####    #####   ####      ########################    ####    ####           ####    ####       #### ###############         ####   ###         #######    ####       ####    ##############       ####  ####         #######    ####       ########################      #### ###              ####   ####       #### ##################       ########     ####     ####   ####      ####  ################         ######      #############   ##############   ############             #####       ##########     ############   	include("includes/config.inc.php");?><!DOCTYPE html><html><head>	<meta charset="utf-8" />    	<title>CMK</title>	<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	<link rel="stylesheet"  href="_assets/css/jquery.mobile-1.0a3.css" />		<script type="text/javascript" src="_assets/js/jquery-1.5.1.min.js"></script>	<script type="text/javascript" src="_assets/js/jquery.mobile-1.0a3.min.js"></script>  </head><body>
    <div data-role="page">	    <div data-role="header" data-position="fixed" data-theme="b">		<h1>Via Silva</h1>		<a href="index" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Inicio</a>    </div>	<div data-role="content"><script src="cmg.js"></script>
    <div id="panocontent" style="width:100%; height:100%;">		<!-- non html5 / css 3d transforms browser - show this informations -->	<div id="nonhtml5infos" style="display:none;">		<table width="100%" height="100%"><tr valign="middle"><td><center>			ERROR:<br/>			<br/>			A Webkit based browser with support for CSS 3D tranforms is necessary to view this page!<br/>			At the moment this are only the latest Safari or Chrome browsers or the browsers on iOS devices (iPhone,iPad,iPod Touch).<br/>			<br/>			<a href="http://www.apple.com/safari/download/" target="_blank"><img src="http://www.browserchoice.eu/Resources/Images/Safari_logo.jpg" style="border:0;" alt="Get Safari" /></a>			&nbsp;			<a href="http://www.google.com/chrome/" target="_blank"><img src="http://www.browserchoice.eu/Resources/Images/Chrome_logo.png" style="border:0;" alt="Get Chrome" /></a>			<br/>			<br/>			<br/>		</center></td></tr></table>	</div>		<noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></table></noscript>	<script>		var viewer = createPanoViewer({swf:"pano.swf", xml:"cmg.xml", target:"panocontent"});				if ( viewer.isHTML5possible() )		{			viewer.useHTML5("always");			viewer.embed();		}		else		{			// show error message			document.getElementById("nonhtml5infos").style.display = "inline";		}	</script></div></div></div></body></html>
  • Hi,

    sorry, but with that posted code alone it is not possible to say anything,
    seeing the problem in real (by a link to it) would be more helpful, because then
    it would be possible to see if there are browser errors and where and why they are there,

    best regards,
    Klaus

  • Hi both !!
    I'm actually trying to develop with jquery mobile, and have the same problem *cry*
    It's due to a conflict between the jquery mobile and the krpanotour.js scripts !
    I'm trying to use the noconflict(); syntax but can't get it to work...
    Here's the tour page example:


    I don't know what to declare in the jQuery("div").hide(); fonction,
    neither in $('someid').hide();
    Getting crazy about it !!
    I changed from jQuery touch for jQuery mobile cause of a Ajax problem, and now have this one *cry*
    I'm going furthur alone but if someone has an idea it would be great ^^
    Best regards.

  • Okay guys !!
    Just solved it partially !
    You have to fix an absolute height at least, width:100%; keeps working.
    The new problem that incombs now is to adjust the height either if we are on iPad or iPhone,
    cause height:300px; hasn't great rendering on iPad...
    If someone has an idea ?!
    I'm going to see how to solve this and I'll post if I find an answer !!
    See ya !
    Best regards.

  • Hi, I also have a problem between Mobile and Jquery Krpan.

    I'm using jQuery 1.6.4, jQuery Mobile 1.0rc1 and Krpano 1.0.8.14.

    My code is:

    My problem is that the Krpano HTML 5 version not work on Safari 5.
    I hope to work with the iOS 4.3.3 User Agent of the devices iPhone, iPad and iPod.

    Any ideas? Thanks.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!