Insert Krpanojs viewer inside a Jquerymobile framework

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

1

Montag, 14. März 2011, 18:12

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

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

2

Samstag, 19. März 2011, 12:01

Hi,

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

best regards,
Klaus

Zum Seitenanfang

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

3

Sonntag, 1. Mai 2011, 19:09

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

Quellcode

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

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Donnerstag, 5. Mai 2011, 12:10

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

Zum Seitenanfang

Yomas

Fortgeschrittener

Beiträge: 190

Wohnort: Anglet, France

5

Freitag, 19. August 2011, 11:33

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:

Quellcode

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

Zum Seitenanfang

Yomas

Fortgeschrittener

Beiträge: 190

Wohnort: Anglet, France

6

Freitag, 19. August 2011, 16:12

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

Zum Seitenanfang

ranone

Anfänger

Beiträge: 6

7

Montag, 3. Oktober 2011, 11:26

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:

Quellcode

<!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.

Zum Seitenanfang

jonsu2015

Anfänger

Beiträge: 3

8

Sonntag, 20. Dezember 2015, 05:38

try js set krpano div height.

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

*smile*

Zum Seitenanfang