Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

1

Dienstag, 22. Mai 2018, 21:23

Html div in Krpano and z-index issue

Hi,
I create a html div in Krpano with javascript and one with krpano, my html div have no z-index set and the krpano one is 3001 by default.
It works on Firefox, Edge and IE11, but on Chrome the html div is always over the krpano one...

online exemple
Does someone knows why and if there is a workaround ?
THX !!!

benji33

Fortgeschrittener

Beiträge: 244

Wohnort: France

Beruf: Senior Software engineer

  • Nachricht senden

2

Mittwoch, 23. Mai 2018, 09:41

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.

3

Mittwoch, 23. Mai 2018, 09:48

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:

Quellcode

1
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

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

4

Mittwoch, 23. Mai 2018, 10:23

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:

Quellcode

1
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


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

5

Mittwoch, 23. Mai 2018, 10:41

Try position:absolute instead of position:fixed

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

6

Mittwoch, 23. Mai 2018, 10:44

Try position:absolute instead of position:fixed

Same thing, online exemple updated

7

Mittwoch, 23. Mai 2018, 11:09

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/

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

8

Mittwoch, 23. Mai 2018, 11:14

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/


Think you misunderstood me, the problem is that in chrome html divs are always over krpano divs even with a smaller z-index, I don't want the html div to be over krpano divs with 3001 z-index value but under

9

Mittwoch, 23. Mai 2018, 12:31

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:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

10

Mittwoch, 23. Mai 2018, 12:42

Brilliant ! Many thnax !!! just what I needed ;)

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

11

Mittwoch, 23. Mai 2018, 13:40

Last question ?
How to sent mouse events to that html div ?

12

Mittwoch, 23. Mai 2018, 15:51

How to sent mouse events to that html div ?

How do you mean that?

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

13

Mittwoch, 23. Mai 2018, 16:40

How to sent mouse events to that html div ?

How do you mean that?

I mean that with mwheel:false I can scroll the content inside the html div, but then I can zoomin/out the pano.
And I can't change the mwheel value as it's an embed option right ?
So is there a workaroung to scroll the html content when mouse is hovering it and zoomin/out the pano otherwise ?
THX !

14

Freitag, 25. Mai 2018, 08:41

Hi,

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

Best regards,
Klaus

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

15

Freitag, 25. Mai 2018, 09:24

Lovely, THX !