Fancybox Z-index Issue ???

Q&A about the latest versions
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

DDewey wrote:So you're trying to open up a fancybox view to an html page when you click on the "?" in the top right corner?
Not exactly, and thanks for responding with the piece of code for recognising .html suffixes, really useful.

What I have done is to create a new tour and I would like to use fancybox to popup images.
I edited the GG template, skin and uploaded folders to the server, along with the necessary fancybox directory etc.
  1. What I expect: on iPhone, the intro pane loads and the loading bar progresses, as does auto-rotate. The green 'CONTINUE' arrow would remove the intro pane and take you to the tour behind.
  • What actually happens: on iPhone only, the green CONTINUE arrow is not clickable, meaning the visitor cannot enter the tour.
NB: The green CONTINUE element. iPhone Safari users cannot click this...
NB: The green CONTINUE element. iPhone Safari users cannot click this...
screenshot_00349.jpg (22.59 KiB) Viewed 8889 times
I suspected that it may be down to using polygon hotspots on the artwork links in the tour (instead of point hotspots). SO i recreated the tour without polys - the result was the same.

The issue only prevails on iPhone but I cannot inspect the way iPhone Safari renders the page.
Would it help to see my template and skin files? I cant understand why this tour chooses not to work but a previously mentioned tour works with the addition of fancybox...

Grateful for any help, cheers
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Chu wrote:The issue only prevails on iPhone but I cannot inspect the way iPhone Safari renders the page.
Would it help to see my template and skin files? I cant understand why this tour chooses not to work but a previously mentioned tour works with the addition of fancybox..
Maybe its to do with this?
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Well the tour works on my iphone 5s but I'm not sure on older iphones. I'm going to charge up my iphone 4 to see if it works there. Did you test in an emulator? Is it the xcode iOS simultator?
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

DDewey wrote:Well the tour works on my iphone 5s but I'm not sure on older iphones. I'm going to charge up my iphone 4 to see if it works there. Did you test in an emulator? Is it the xcode iOS simultator?
Didnt realise it works on 5s
I didn't test in any emulator, I have a 4S so I reckon that is where the problem lies...
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

I've confirmed that it is also an issue with the iphone 4 as well. Both the iphone 5 and the iphone 5s work fine before and after you changed the size of the green box. I actually preferred how it looked beforehand. I'm going to see if I can install Adobe Edge Inspect on the iphone 4 to figure out what the issue is.
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Could you send me your skin file because I can't figure out the problem by inspecting the code. It just doesn't allow click-through to that particular element. I thought maybe apply "pointer-events:none" to the inactive elements but I can't distinguish which ones are inactive so I don't think it'll work.
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Thanks DD, I can share the link for my skin file via DM, check your mail for incoming, thanks for taking a look at this for me. Its definitely something to do with the javascript being added and the template.

This is a version with all the trimmings, the code above and the custom player_mod.js
Fancybox trimmings

This version is without fancybox javascript calling in html, also use the original player.js
Without custom code

Testing on iPhone, the green intro panel can be clicked to close.
I have read about the fancybox stopping all a links on the container, here. Does this have something to do with that, because it is effectively blocking the simple click action? This may be connected with the javascript calling the head

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Chu wrote:Thanks DD, I can share the link for my skin file via DM
Just checking you received your DM/PM, the message seems to be stuck in my outbox in my UCP...
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

It looks like the problem is that the "close_border" element is underneath at least one other element (info?) that is blocking it from being used by the older devices. I would suggest moving that element to the top of the hierarchy to test to see if that makes the element "clickable" again. I'm sorry I'm unable to test this right now because all of my older iphones are at my testlab at work. If this fixes the issue, then you could work around this possibly by adding "<span style='pointer-events:none'><span>" style to the transparent elements that cover the clickable ones. I'll be able to verify that this is a solution early next week.
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

DDewey wrote:I would suggest moving that element to the top of the hierarchy
OMFG

I really hope that it isn't where you say it is --- what a schoolboy error :!:

I had a real brainspasm the other day when I was looking at the order of the elements in the skin editor...

Cheers, I'll keep you posted...
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Slightly troubling this... on closer scrutiny i did in fact notice some ordering issues but then saw that the container wasn't a container at all, but a rectangle with background disabled.
This is the skin for the introduction panel, showing the two elements you mentioned. The higher up the screen means that the element is on a top-most layer
This is the skin for the introduction panel, showing the two elements you mentioned. The higher up the screen means that the element is on a top-most layer
screenshot_00350.jpg (11.89 KiB) Viewed 8831 times
I created a new introduction container and replaced the contents and rearranged the order to force the clickable element on top, but still not working on iPhone. It works on desktop Chrome HTML5 and Android mobile Chrome too. This is live here
This is how I modified the element, to push my click-to-close element at the very top of the tree, in front of everything within the same container
This is how I modified the element, to push my click-to-close element at the very top of the tree, in front of everything within the same container
screenshot_00351.jpg (10.48 KiB) Viewed 8831 times
This leads me to believe that it is the javascript additions again, or even the CSS added to the page to accomodte fancybox. I did find a connection to fancybox destroying anchors in the html: here. Maybe this generated code in the skin.js file doesn't like the fancybox code?

Code: Select all

function pano2vrSkin(player,base) {
	var me=this;
	var flag=false;
	var nodeMarker=new Array();
	var activeNodeMarker=new Array();
	this.player=player;
	this.player.skinObj=this;
	this.divSkin=player.divSkin;
	var basePath="";
	// auto detect base path
	if (base=='?') {
		var scripts = document.getElementsByTagName('script');
		for(var i=0;i<scripts.length;i++) {
			var src=scripts[i].src;
			if (src.indexOf('skin.js')>=0) {
				var p=src.lastIndexOf('/');
				if (p>=0) {
					basePath=src.substr(0,p+1);
				}
			}
		}
	} else
	if (base) {
		basePath=base;
	}
	this.elementMouseDown=new Array();
	this.elementMouseOver=new Array();
	var cssPrefix='';
	var domTransition='transition';
	var domTransform='transform';
	var prefixes='Webkit,Moz,O,ms,Ms'.split(',');
	var i;
	for(i=0;i<prefixes.length;i++) {
		if (typeof document.body.style[prefixes[i] + 'Transform'] !== 'undefined') {
			cssPrefix='-' + prefixes[i].toLowerCase() + '-';
			domTransition=prefixes[i] + 'Transition';
			domTransform=prefixes[i] + 'Transform';
		}
	}
ho hum, back to the drooling board
Thanks for taking your time out DD

All the best,
Chu
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

I have just disabled the 'help' container in HTML5 momentarily and the issue effectively stops any interactions whatsoever, the same
*groan*
Last edited by Chu on Sun Dec 07, 2014 4:32 pm, edited 1 time in total.
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

The only other thing in my bag of tricks would be to create a working version without the added fancybox plugin and one with it and inspect the differences to try to find the cause of the problem. It could be jquery or the css. I'm more likely to think JavaScript because the fancybox css doesn't make any kind of global changes. I was thinking that it was maybe the hierarchy issue because the iPhone 4/4s will work fine on preset skins and those items are always at the root level in the skins or very close to it. Another thing I noticed on your skins were multiple actions for on click events etc. You could also try setting up a test button at the very top of the skin editor to see if it works consistently. I would not give up on this just yet. There's got to be a solution.

I am hoping that eventually the software will have a built-in viewer that will make these kinds of customizations no longer necessary. The drag and drop media is great but I never liked how you could not position the edges of the images exactly. I can never get them lined up perfectly in 3d space.
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

DDewey wrote:The only other thing in my bag of tricks would be to create a working version without the added fancybox plugin and one with it and inspect the differences to try to find the cause of the problem. It could be jquery or the css. I'm more likely to think JavaScript because the fancybox css doesn't make any kind of global changes.
I did this already: WITH & WITHOUT
DDewey wrote:I was thinking that it was maybe the hierarchy issue because the iPhone 4/4s will work fine on preset skins and those items are always at the root level in the skins or very close to it. Another thing I noticed on your skins were multiple actions for on click events etc. You could also try setting up a test button at the very top of the skin editor to see if it works consistently. I would not give up on this just yet. There's got to be a solution.
I'll make another edit and upload this for review, thanks for that.
DDewey wrote:I am hoping that eventually the software will have a built-in viewer that will make these kinds of customizations no longer necessary. The drag and drop media is great but I never liked how you could not position the edges of the images exactly. I can never get them lined up perfectly in 3d space.
Not really the same method as scripting, fancybox looks like it COULD give me EXACTLY what I need to go forward with a few concepts. I think I have to make a new friend who can code!
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Version with the click-to-close at the very top of the hierarchy in the skin editor
HERE
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
Post Reply