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
Skin z-index
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
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.
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.
Ron, organize your html page code something like this:rsmkns wrote:...display a jpeg photo (using javascript)...Any suggested solutions?
Code: Select all
<div id='container' style=''position:absolute;...;z-index:1000;'></div>
<div id='myImage' style='position:absolute;...;z-index:1001;'></div>
z-index equal 1001 and higher should work for now, and hopefully in the future too. It works for me.
Don
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
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
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 wrote:...I thought something like what you propose would work, but it does not...
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
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
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.rsmkns wrote:... 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....
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