Fullscreen problem

[3dfiction]

when i press fullscreen button my all html elements gone. like my logo etc. any solution for this ?
my sample page is http://3dfiction.com/pa63.htm
thanks in advance.

[sonic40]

You can put all your html elements into "container" element of panolens, like this :

<div id="container">
<div id="progress"></div>

.... your html element here ....
.... your html element here ....
.... your html element here ....
.... your html element here ....

</div>

Don't forget to change style position of your html elements into "absolute" or "fixed", just to make it "transparent" over your panolens image.

Cheers,
Sonic40

[Ferdric-AVPL]

Hi there.

I followed the workaround below (Thank you, @sonic40):

You can put all your html elements into "container" element of panolens, like this :

<div id="container">
<div id="progress"></div>

.... your html element here ....
.... your html element here ....
.... your html element here ....
.... your html element here ....

</div>

Don't forget to change style position of your html elements into "absolute" or "fixed", just to make it "transparent" over your panolens image.

However, my buttons are no longer functional, especially when I tested it on a mobile phone, specifically a Samsung Galaxy Note 9.

You can check my source code here: https://codepen.io/ferdric-avpl/pen/oNjQOYK

Your help is much appreciated. Thank you very much.

[dustinkerstein]

I also ran into that issue with touch events. I worked around it by using Panolens' widget.createCustomItem like this:

var tourToggleButton = viewer.widget.createCustomItem({onTap: function() {toggleTour()}, style: {'color': 'white', 'background-color': 'transparent', 'border': 'none', 'position': 'absolute', 'bottom': '0px', 'left': '0px', 'outline': 'none', 'filter': 'none', 'height': '42px', 'width': '42px', 'display': 'inline-grid', 'align-items': 'center', 'background-size': '100%'}});
document.getElementById("container").appendChild(tourToggleButton);

[Ferdric-AVPL]

I also ran into that issue with touch events. I worked around it by using Panolens' widget.createCustomItem like this:

var tourToggleButton = viewer.widget.createCustomItem({onTap: function() {toggleTour()}, style: {'color': 'white', 'background-color': 'transparent', 'border': 'none', 'position': 'absolute', 'bottom': '0px', 'left': '0px', 'outline': 'none', 'filter': 'none', 'height': '42px', 'width': '42px', 'display': 'inline-grid', 'align-items': 'center', 'background-size': '100%'}});
document.getElementById("container").appendChild(tourToggleButton);

Hi, @dustinkerstein, and thank you for your prompt response! I followed your workaround and it did work for my button.

However, the buttons inside the "tour panel" still do not work. Must I do the same for them?

Is it also possible to place the tourToggleButton on the top-left corner of the screen?

Here is my source code, after following your workaround: https://codepen.io/ferdric-avpl/pen/MWaZpNz

Thank you very much.

[dustinkerstein]

See my note on the other issue.