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%";
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%";
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