v4.5 bug: Layered (positioned) div interaction blocked

[ScottWitte]

To get the interactivity I want I rely heavily on javascript. One thing I need is the ability to place elements above the pano that the user can interact with. This is done with relative and absolute positioning and z-index to set the level. This has been no problem until v4.5 and now it is weird. Previous to v4.1 an element could be on any z-index it seemed. With v4.1 it needed to be on z-index of 1000 or greater or you couldn't interact with it. with v4.5 z-index of 1000+ still works in Firefox and IE but NO level works in Safari (PC and Mac) nor Chrome nor iDevices.

See for yourself. Clicking the button should cause it to disappear. The only difference between the two is which version player is used:

Pano2VR v4.1 (z-index 1000+ works in all browsers)

Pano2VR v4.5 (z-index of 1000+ only works in FF and IE) This is true of v4.5 betas 1 and 2.

The relevant JS (and yes, this could be done in P2VR but I'm just using it as simple example):

Code: Select all

// JavaScript Document
window.onload = function() {
	showHelp();
}

	function showHelp() {
		var help = document.createElement('img');
			help.setAttribute('src','assets/help_IPad.png');
			help.setAttribute('id','help');
			help.setAttribute('style','position:absolute; top:45%; left:50%; margin-top:-100px; margin-left:-75px; z-index:2010');
			help.setAttribute('onClick','playTour()');
			document.getElementById('container').appendChild(help);
	}
	
	function playTour() {
		document.getElementById('help').style.display = "none";
	}

I'm not adverse to hacking the player myself until a fix is in. But I'm just not seeing what is cause this.

Thomas????????

[hum@no.id]

This works if the Panorama Page is additionally included in IFRAME

For All - Browsers / OS /Devices / Flash / HTML5

[ScottWitte]

This works if the Panorama Page is additionally included in IFRAME

Perhaps I'm not clear on what you are saying but placing the 4.5 example in an iframe doesn't change its behavior. Remember that it will work in FF and IE so view that in Safari or Chrome to see the problem.

[hum@no.id]

http://decus.kz/3dtour/3tour.html

Subj - close button

[ScottWitte]

Gumir,

You are a good programer. As you realize this isn't anything of a solution to the problem except in very limited circumstances. But thanks for the effort.

[360Texas]

It is possible to place an X in the skin that will produce the same history -1 action.

Click on the 7th Street Bridge panorama. I put the X down near the tool button bar so it could be seen on small screen smart phones.

http://360texas.com/services/new360/gallery.html

[ScottWitte]

The relevant JS (and yes, this could be done in P2VR but I'm just using it as simple example):

It is possible to place an X in the skin that will produce the same history -1 action.

Dave,

I fear you are missing the point. The example was simple, just for illustrative purposes. The problem is real and seriously impacts more complex tasks.

[JimWatters]

Scott,
You want to interact with the dialog using click and drag without effecting the panorama in the background?
Is this related to this issue?
viewtopic.php?f=6&t=9034&hilit=z+index+z+index

[ScottWitte]

You want to interact with the dialog using click and drag without effecting the panorama in the background?
Is this related to this issue?

Sort of. In the post you linked to Don's description of building a sliding thumbnail menu where he mentions z-index is exactly the sort of thing I need to do which, as far as I understand, can't be accomplished in Pano2VR itself. Pre v4.1 Don's solution would work fine. With v4.1 you had to use a z-index of 1000+ for it to work in all browsers. In v4.5 it no longer works except in FF and IE, as you saw.

BTW, I modified the two examples so the pano is in a window and the test element lies across the edge. Using v4.5 the part inside the pano has no mouse interaction in Safari and Chrome but the pano below it does. The part outside reacts as programed. In FF and IE the part over the pano has mouse interaction. The mouse doesn't seem to pass through to the pano.

Pano2VR v4.1 (z-index 1000+ works in all browsers)

Pano2VR v4.5 (z-index of 1000+ only works in FF and IE) This is true of v4.5 betas 1 and 2.

[hum@no.id]

You want to add some elements to the Pano2VR output page? But this is awkward ...
Nevertheless, in this case the decision is, it is very simple. You just have to put extra crutches and reassign z-index for container.
like this (by 4.5b2) - http://astanacapital.com/demotest/testlayer/index.html

[Don]

Scott, I'm not yet convinced this is a pano2vr issue. It seems more likely to be an issue with how the various browsers interpret the CSS rules. Testing your http://www.tourdeforce360.com/temp/pixe ... test1.html, I noticed that portion of the DarkGray rectangular <div id='vtour'> overlapping pano's <div id='container'> is clickable using my IE and FF, but un-clickable in Chrome.

So, I opened Chrome >> Tools >> Developer Tools. Very handy. And then poked through the http://www.tourdeforce360.com/temp/pixe ... test1.html html code. What I see is the <div id='vtour'> is the same size as <div id='container'>, and that it is <div id='vtour'> that is preventing <img id='help'> from being clicked on that portion of <img id='help'>. So it seems to me you need to tweak the CSS relationship between <div id='vtour'> and <img id='help'>.

I also see: there is another un-named <div> in the mix, and also <img id='help'> is a child of <div id='vtour'>. And so, there are several relationships which more than <div id='container'> could be preventing onclick='playTour()' from firing on that portion of <img id='help'> that overlaps the pano. IE and FF handle it all as expected. Chrome chokes. Get it to work in Chrome and it should still work in IE and FF.

Note: the Chrome Developer Tools is very interactive, i.e. mouseover certain lines in the html and that element on the page will highlight. But attached here for reference is a screenshot until you open Chrome Developer Tools to see for yourself:

[Don]

PS: Scott, after posting above I also notice <div id='vtour'> is a child of <div id='container'>. That is not necessary and would help to clean up the <div> relationships if you write <div id='vtour'> outside of <div id='container'> in the html code, and use CSS styles to physically control their same size and location on the page.

PSS: Sorry my attachment is so HUGE, but I kind of like it that way. Annoying is sometimes good. I guess I could down-size the screenshot, but the resolution would suffer. If there's another way to make the attachment smaller, please advise?

[ScottWitte]

Gumir & Don,

Thanks for diving into the code and trying to figure this out. I know that isn't just a casual effort.

Gumir -- Earlier I said you were a good programer. I must amend that to very good. Your z-index observation hit the mark. And Don... not so shabby yourself.

Here is what's happening, the z-index of the pano's div must be stated explicitly. You can't rely on some default. Even though my test element sat above the pano, so must have had a higher z-index, and had a higher z-index than anything I found in the Pano2VR code, it didn't count. Give the pano's div a z-index lower than the external element and the element appears above the pano and is interactive.

However.... you can't attach such external elements to the pano's div and have them remain interactive. They must be separate. In this case I needed a wrapper div (container) that held the pano div (vtour) and attached the external element to the wrapper div (container).

Code: Select all

<div id="container" style="width:780px; height:500px; position: relative; z-index:100;[not required but probably a good idea]">
    <div id="vtour" style="width:100%; height:100%; position: relative; z-index:2000;">
    </div>
</div>
<script type="text/javascript">
    pano=new pano2vrPlayer("vtour");
    pano.readConfigUrl("assets/Test.xml");

    var help = document.createElement('img');
        help.setAttribute('src','assets/help_IPad.png');
        help.setAttribute('id','help');
        help.setAttribute('style','position:absolute; bottom:-70px; left:50%; margin-left:-75px; z-index:101');
        help.setAttribute('onClick','playTour()');
        document.getElementById('container').appendChild(help);
	
    function playTour() {
        document.getElementById('help').style.display = "none";
    }
</script>

This is a change from earlier versions of Pano2VR, especially pre v4.1. I don't know what change in Pano2VR created this situation nor whether is can be "fixed" but at least we now have a workaround. May I suggest that a note be added to the wiki about javascript API?

To see the difference (in Safari, Chrome and iDevices):

With z-index

Without z-index

Again, big thanks to Gumir and Don.