Html div in Krpano and z-index issue

You're right. Seems to be a Chrome issue. It's not the first time that Chrome doesn't respect the z-index for fixed and absolute positionned divs.

Hi,

that's a known Chrome bug that happens in the combination of using zIndex + CSS3D transforms (and krpano uses CSS3D transforms for faster rendering of the layers).

One workaround would be adding such style to the related html element:

style="transform:translateZ(1000000000000px)"

Btw - krpano will soon stop using any zIndex internally and sort the DOM elements instead. The zindex usage is still a relict from older times where this was necessary because of buggy CSS3D support from some browsers.

Best regards,
Klaus

Try position:absolute instead of position:fixed

Sorry, but thought you had already set a zIndex setting.

Just try adding that (with a value higher than ~4000), that should be enough due my tests (at least in the current browser versions).

Here a simple test case - click the polygonal hotspot:
https://krpano.com/examples/javascript3/

You mean you want custom div elements inside krpano - between the pano image and the layers?

That's not possible with elements added above the viewer. Therefore you would need add that element inside the krpano DOM element.

One possibility would be using a krpano container element and then adding the custom html elements to that (by using it's sprite variable),
for example:

<layer name="my_html_stuff" type="container" align="lefttop" width="100%" height="100%" 
        bgcapture="true" capture="false" handcursor="false" 
        onloaded="add_div();" 
        />
	
<action name="add_div" type="Javascript" ><![CDATA[


var div = document.createElement("div");


var title = document.createElement('h2');
title.innerHTML = "This is a html div";
div.appendChild(title);


var line = document.createElement('hr');
div.appendChild(line);


var linebreak = document.createElement('br');
div.appendChild(linebreak);


var content = document.createElement('p');
content.innerHTML = "This is a <a href='https://krpano.com'>link</a>...";
div.appendChild(content);


caller.sprite.appendChild(div);


]]></action>

This way you can also control that element from krpano, e.g. give it a size, toggle the visibility, sort/mix it with other elements and so on - add it works the same in all browsers.

Best regards,
Klaus

Quote from jeromebg

How to sent mouse events to that html div ?

How do you mean that?

Hi,

I've made now a full example for this - please see here:
Example: html div inside krpano with scrolling support

Best regards,
Klaus

Hi there,

I need help with the panotour floorplan plugin overlapping everything in chrome browsers, despite modifying positioning and zindex values. I've done a lot of digging around and now I'm really going out on a limb for solutions - it appears that the floorplan plugin creates a div separate from the krpanoSWFObject div and could be the heart of the issue. It is working perfectly on all other browsers except chrome, which I cannot ignore. I've included a simple screenshot to show the layering of divs.

I've created a custom navbar and open/close button (to control the floorplan visibility) in the index_skin.xml file where the floorplan code can be found, and I need my custom assets to always be over top of the floorplan area. Adjusting z-index has no effect either in the xml file, nor in the browser editor window.

This is my first post so please let me know what else I can provide to help find a solution. Really appreciate any help I can get on this!

Thanks again,
Jackson

Quote from jeromebg

Thanks Klaus but it doesn't seems to work ?
I added div.style.transform = "translateZ(1000000000000px)";
Exemple online updated

Quote from jeromebg

Thanks Klaus but it doesn't seems to work ?
I added div.style.transform = "translateZ(1000000000000px)";
Exemple online updated

fixed?
:)