popup that uses percentage for height

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
It has been requested that a popup information box is to use the full height of the window and be responsive.
This will be made easier in the future but for now here is a little project.
It is not pretty but has all the actions required to build your own.

The project is using some JavaScript magic, to understand how it works please download and open the skin.



The skin is made up from a text box with the ID: start_text and a rectangle with the ID: info_background.
The rectangle has two child text boxes and a close button.

There is also two hotspot templates ht_info and ht_node.

The ht_info will pop open the information text box while the ht_node, on click will change panoramas.


What does what?
The problem with this project is as it is using percentage the sliding rectangle, info_background, will change position depending on the screen height, so I move this off the bottom of the screen and use the text box, start_text as the visible element when you open the tour.

The hotspot, ht_info has a few actions, firstly, mouse enter, set value, $(hs), info_title.
What this does is when the mouse enters the hotspot this action displays the hotspots title in text box, ht_info.


Then on click it sets the hotspots description to the the info_text_body.
Then makes a Go To URL call using the JavaScript:

Code: Select all

javascript:
skin._info_background.style.transition='all 500ms ease-out 0ms';
skin._info_background.style.top=“2%";
What this does is move the rectangle, info_background to 2% from the top of the screen.

There is also an action to fade out the, start_text, text box.

The info popup has a close button, info_popup_close.
This has the actions to set values to all the text boxes to blank, so unloading any information in them.
There is also a Go To URL action:

Code: Select all

javascript:
me._info_background.style.transition='all 250ms ease-out 0ms';
me._info_background.style.top=“100%";
Which moves the rectangle, info_background, back off screen.
Note the time, 250ms, so it slides back faster than it slides into view which uses 500ms.

Then there is an action to fade the text box, start_text back into view.

Even with sliding it to 2% from the top still have moment depending on screen height, so may be in your projects you use 0%.
Have fun,
Hopki
Attachments
popup.zip
(34.14 KiB) Downloaded 190 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

Very cool. The functional use of Javascript in the Go to URL is a handy function.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Post Reply