What I would VERY much like to achieve is hiding the "full screen"-button when a panorama is shown on an iOS device. It can't work there, so it shouldn't be there.
I know I can link Javascript code to a button, via the URL field, and I'm wondering if something similar can be done for a condition?
Or has anybody already found a way to hide "full screen" on iOS devices?
Thanks!!!
Harald
Javascript for a condition in the screen editor?
Hi Christian,
Wow, I'm impressed! How do you do it, if you don't mind me asking?
Harald
Wow, I'm impressed! How do you do it, if you don't mind me asking?
Harald
Hi Christian,
Thank you very much indeed! You are using the new "is mobile" function, that would certainly help, but what I'm after is knowing if it's iOS.
If I remember correctly, "toggle fullscreen" works on Android devices, but does nothing on iPads or iPhones. For Android (well, anything not Apple) I would like to keep the fullscreen functionality, only for iOS I would like to hide the button in the controller.
Best regards
Harald
Thank you very much indeed! You are using the new "is mobile" function, that would certainly help, but what I'm after is knowing if it's iOS.
If I remember correctly, "toggle fullscreen" works on Android devices, but does nothing on iPads or iPhones. For Android (well, anything not Apple) I would like to keep the fullscreen functionality, only for iOS I would like to hide the button in the controller.
Best regards
Harald
Hi Harald,
I understand. In this case, due to not having enough javascript-experience I would do:
a) you use the fullscreen by "right-click":
create the pano without fullscreen option selected normal. Rename the skin.js in skin-iOS.js. After that you select the fullscreen option and rebuild the pano. Now you have two js for the skin.
b) you switch with a button etc. in the skin:
Then you make a duplicate of your skin in the skin-editor, delete the fullscreen-button and create a pano. Rename the skin.js in skin-iOS.js, select now the skin with the buttoned create the pano again. Now you have two js-files.
With this you add in your webpage the code:
You use php to detect the device you want and use the skin you want specially for that device.
I understand. In this case, due to not having enough javascript-experience I would do:
a) you use the fullscreen by "right-click":
create the pano without fullscreen option selected normal. Rename the skin.js in skin-iOS.js. After that you select the fullscreen option and rebuild the pano. Now you have two js for the skin.
b) you switch with a button etc. in the skin:
Then you make a duplicate of your skin in the skin-editor, delete the fullscreen-button and create a pano. Rename the skin.js in skin-iOS.js, select now the skin with the buttoned create the pano again. Now you have two js-files.
With this you add in your webpage the code:
Code: Select all
... yout html-code
<script type="text/javascript" src="pano2vr_player.js">
</script>
<?php
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
$html= "";
if( $iPod || $iPhone || $iPad ||$webOS ){
echo "<script type='text/javascript' src='skin-iOS.js'></script>";
}else {
// here use skin.js and adapt pathes
echo "<script type='text/javascript' src='skin.js'></script>";
}
?>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 10 or higher.
</div>
<script type="text/javascript">
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml");
});
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
.... continue your html-code
Have a nice day
Christian
Christian
Hi Christian,
Thanks, that's a very interesting idea. You are absolutely right, two different skins would make it possible to do the check for iOS well before the panorama is loaded.
Adding the necessary PHP code to my HTML template would make it "my" standard, and it all would work in an iFrame without any further modification.
Skin variables seem to be defined in the skin .js file, not in an XML. But it should be simple to create a skin variable "is_iOS" in the default skin template that would control if the full screen button is shown. A Javascript file is text, so it would be a simple batch job to create a copy of the skin.js file, and to replace the initial value of that variable in the pano2vrSkin constructor via a text search and replace.
Looks like the way to go for me! Brilliant, thank you very much!
Harald
Thanks, that's a very interesting idea. You are absolutely right, two different skins would make it possible to do the check for iOS well before the panorama is loaded.
Adding the necessary PHP code to my HTML template would make it "my" standard, and it all would work in an iFrame without any further modification.
Skin variables seem to be defined in the skin .js file, not in an XML. But it should be simple to create a skin variable "is_iOS" in the default skin template that would control if the full screen button is shown. A Javascript file is text, so it would be a simple batch job to create a copy of the skin.js file, and to replace the initial value of that variable in the pano2vrSkin constructor via a text search and replace.
Looks like the way to go for me! Brilliant, thank you very much!
Harald