Is it possible to limit pano2vr tour height within a browser page?

[KRitchie]

I am creating a series of tours for pharmaceutical clients, that all need to have a footer present at the bottom of the page. I have been able to successfully edit the pano2vr index page to import the footer into the tour. The issue I am having is that pop-up elements such as videos, photos, etc get covered by the footer. This becomes an issue at certain smaller browser sizes because things like video player controls are covered by footer. ( see attachments)

Is there any way to limit the height of the pano2vr tour to a certain portion of the browser page?

Thanks

- Kevin

[Hopki]

Hi Kevin,
You could add a margin in the skin. Then the text can go below the panorama.
Any popups above this text in the skins tree will cover the text.
Please see this page: https://ggnome.com/wiki/skin-editor-margins/
Regards,

[KRitchie]

Hi Hopki, the margins definitely seem like a step in the right direction. I set the bottom margin at 120px, so it lines up with the green navigation bar that I also have set at 120px. This didn't solve my issue with pop up elements extending past into the footer area. I thought that by adding the margin it would confine all elements above 120px, but I tested my youtube hotspot set to 90% x 90% center and it fills browser 90%. (see attachment)

So margins do not apply to elements in the skin?

How would I confine elements to above the bottom 120px?

Thanks

- Kevin

[Tony]

Hi Kevin,

Is this what you are trying to achieve? https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

So margins do not apply to elements in the skin? How would I confine elements to above the bottom 120px?

Margins only apply to the actual panorama itself and any elements added into the Viewer i.e. Point Hotspots/Flares etc but not to the skin elements. However, you can constrain elements within a Container. In the example above I've put all of the elements, except the Hotspot Template, above the footer into a container that has a height set using CSS. This means all of the elements are anchored within the constraints of the container.

grab-14.jpg (504.9 KiB) Viewed 1784 times

The Height settings calc(100%-120px) sets the height of the container to always be 100% of the browser window - 120px for the margin.

I've attached the skin if you'd like to take a look at it.

cheers,

Tony

P.S. If you'd like to know more about the C53 story visit https://tonyredhead.com/blog/c-53-skytrooper-crash-site

[Hopki]

Hi Kevin,
The margin sets the viewport of the panorama, but skin elements can occupy the area outside the margin.
As Tony shows you can use RAW CSS, known as just CSS in Pano2VR's Skin Editor to set a limit.

Code: Select all

calc(100% -120px)

So bringing the element up by 120px from the bottom, but still being scalable as its using percentage.

You can even change margins on the fly with a button, I have attached an example project.
This uses a single button to toggle the right margin and show a map in its place.

You can use two stacked buttons to do this but in the example, I have used a variable and then action filters to filter which action will get activated on click.
As I am using a variable I am also using this to change the text of the button.
Regards,

[KRitchie]

Thanks Tony and Hopki - this is exactly what I needed. I really appreciate your help figuring this out.

- Kevin