Skin z-index

[rsmkns]

Perhaps this is a bug in ver. 4.5 (for HTML5)

In ver 4.0 and earlier have I have been able to display a jpeg photo (using javascript) on top of the vr pano (including skin), in the same window. Now in ver 4.5, the photo lays on top of the vr pano, but under the skin - that is the skin appears on top of the photo. I have tried to change the z-index of the photo to appear on top of the skin, but to no avail. I assume that the skin is given the very top z-level index number, and thus supersedes whatever z-index I give the photo.

In any case, is there a way to change the z-index of the vr skin? Why the change with ver. 4.5? Any suggested solutions?

Thanks,

Ron

[360Texas]

In 4.5.0 stable pro version the Skin tree was changed to layering like found in Photoshop. Top layer now will cover all below it

For Example:
Top layer up : Your content like Map
Next layer up : hide_template (marker_template)
Next layer up : userdata
Next layer up : loading
Next layer up : Hotspot
Next layer up : controller
Most bottom element not found in the tree is of course the panorama image.

[Don]

...display a jpeg photo (using javascript)...Any suggested solutions?

Ron, organize your html page code something like this:

Code: Select all

<div id='container' style=''position:absolute;...;z-index:1000;'></div>
<div id='myImage' style='position:absolute;...;z-index:1001;'></div>

Anything that happens INSIDE the pano <div id='container'></div> element should be considered out of us users' control, except of course when we use pano2vr and the pano2vr skin editor to achieve our pano-related goals. Meanwhile, everything OUTSIDE the pano <div id='container'></div> element is definitely within our control. That is true today in version 4.5, and should remain true for future pano2vr versions...barring extreme changes to the Internet and pano2vr. Yes, today we can adjust any visible pano2vr code that we can see, but if you tweak the pano2vr z-index today, you will be re-tweaking it again and again in the future. To avoid that worry place your non-pano elements in their own <div id='myElement'></div> tags outside the <div id='container'></div>.

z-index equal 1001 and higher should work for now, and hopefully in the future too. It works for me.

Don

[rsmkns]

Thanks, Don.

I thought something like what you propose would work, but it does not. Hence, my thought that there is something wrong with the stuff "considered out of us users' control." I notice that there are two javascript calls in the code:
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
I suspect that there is something happening in the second call, which loads the skin, that overrides any z-index that I assign to "container". I can control the level of the "container" which holds the pano (for example, I can put it on top of the image by reversing the z-index numbers), but I cannot control the skin at all. It always remains on top.

Any other ideas?

Ron

[Don]

...I thought something like what you propose would work, but it does not...

Do you have a url to share so I can review online? Or if private, maybe private message the code to me. Otherwise I will mock-up a page and post it. The outlined example above works for me all the time.

[rsmkns]

Don,

I found the problem (and I should have started with this, given some past experience I have had). The issue seems to be with Safari. When I use Chrome or Firefox, your coding suggestion works just fine (as one would expect). But Safari handles the skin differently, though Safari works fine with Pano2VR v. 4. The coding for loading the skin changed, evidently, with v. 4.5, and Safari seems to have a glitch in the way it handles the z-index.

Thanks,

Ron

[Don]

... The issue seems to be with Safari. ... Safari handles the skin differently ... Safari seems to have a glitch in the way it handles the z-index....

Ron, I agree. Thanks for pointing it out. With IE, Firefox and Chrome, my external page elements display where they are expected: above the pano, and above skin elements. However, with ios7 Safari my external elements display above the pano, and below the skin elements.

So, I researched, and tried a bunch of suggested solutions. No success. Luckily, my external elements do not overlap my skin elements. Going forward I will simply:
a) Organize my web page so non-pano elements do not overlap skin elements. Yes, definitely overlap the pano, but avoid overlapping skin elements.
b) Use skin elements that hide when not in use.
c) Use non-pano elements that hide when not in use.
d) Choreograph overlapping non-pano elements and skin elements to not display at the same time.

Today's research suggests "transform" in skin.js breaks ios Safari z-index. That is not a pano2vr issue. Safari will get fixed some day. Meanwhile, the easy steps above are good for me. Here is the best of many references I found:
http://stackoverflow.com/questions/5472 ... ranslate3d