Insert Krpanojs viewer inside a Jquerymobile framework

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

1

Monday, March 14th 2011, 6:12pm

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

everpano.com step beyond 360

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

2

Saturday, March 19th 2011, 12:01pm

Hi,

do you have a small example to be able to see what happens?

best regards,
Klaus

Go to the top of the page

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

3

Sunday, May 1st 2011, 7:09pm

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

Source code

<?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>

everpano.com step beyond 360

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

4

Thursday, May 5th 2011, 12:10pm

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

Go to the top of the page

Yomas

Intermediate

Posts: 190

Location: Anglet, France

5

Friday, August 19th 2011, 11:33am

Up ^^

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:

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Promotion Robert Alday - Les Baignots -</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="apple-touch-icon" href="images/apple_touch_icon.png"/>
	<link rel="stylesheet"  href="../../css/jquery.mobile-1.0b2.min.css" /> 
	<link rel="stylesheet" href="../../css/style.css" />
    <script src="../../js/tour.js"></script>
	<script src="../../js/jquery-1.6.2.min.js"></script>
	<script src="../../js/jquery.mobile-1.0b2.min.js"></script>
	<script>//here's what I found with googling...
        jQuery.noConflict();
        // Use jQuery via jQuery(...)
        jQuery(document).ready(function(){
            jQuery("div").hide();
        });
        // Use Prototype with $(...), etc.
        $('someid').hide();
      </script>
</head>
<body>

<div data-role="page" data-title="Nos R&eacute;alisations">

	<div data-role="header" data-theme="b">
		<h1>Nos R&eacute;alisations</h1>
		
		
		<a data-theme="c" data-ajax="false" title="Accueil" href="../../index.html" data-icon="home" data-iconpos="notext" data-direction="reverse"></a>
	</div><!-- /header -->

	<div data-role="content">

	<div data-role="none" id="pano"> 
		<noscript> 
				<b>Attention:</b> <br/> 
				<br/> 
				Javascript is not activated. <br/> 
				<br/> 
				Please activate it to see the virtual tour <br/> 
		</noscript> 

    <script type="text/javascript"> 
		var viewer = createPanoViewer({swf:"tour.swf", target:"pano"});
        //viewer.useHTML5("always");
        if( viewer.isDevice("iPhone|iPod|iPad") )
        {
            viewer.addVariable("xml", "iphone.xml");
            viewer.addVariable("showErrors", "false");  
            viewer.embed();
        }
        else( viewer.isDevice("Android") )
        {
            viewer.addVariable("xml", "android.xml");
            viewer.addVariable("showErrors", "false");  
            viewer.embed();
        }
	</script>

	</div> <!-- end of krpanoDIV --> 
    <div data-role="footer" class="footer-docs" data-theme="a"> 
			<p>&copy; 2011 Eboovisite<br />Technopole d'Izarbel<br />245 Allée Théodore Monod,<br />64210 Bidart</p> 
	</div>	
	
</div> 
</body> 
</html>

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.

My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Go to the top of the page

Yomas

Intermediate

Posts: 190

Location: Anglet, France

6

Friday, August 19th 2011, 4:12pm

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.

My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Go to the top of the page

ranone

Beginner

Posts: 6

7

Monday, October 3rd 2011, 11:26am

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:

Source code

<!DOCTYPE html>
<html>
<head>
	<title>pano</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
	<script type="text/javascript" src="./lib/swfkrpano.js"></script>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
</head>

<body>
	<div data-role="page" id="Panos">
		<div data-role="content">
			<ul data-role="listview">
				<li><a href="#pano1" target="_self">Pano 1</a></li>
			</ul>
		</div>
	</div> 

	<div data-role="page" id="pano1">
		<noscript>ERROR: Javascript not activated</noscript>
   		<script>
			embedpano({ swf:"./lib/krpano.swf", xml:"./xml/pano1.xml", target:"pano1" });
		</script>
	</div>

</body>
</html>

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.

Go to the top of the page

jonsu2015

Beginner

Posts: 3

8

Sunday, December 20th 2015, 5:38am

try js set krpano div height.

$("#your_krpano_div_id").css("height",document.body.clientHeight);

*smile*

Go to the top of the page