show/hide skin during left mouseclick on pano

Carel · Fri Jun 28, 2013 3:34 am

This may have come up before, but I cant think of a search term for the subject.
I am working on an update and redesign of my website and want the index page to open with a browser filling pano. Because this pano also has to function as a home page for the website, I am thinking of a skin that provides some basic branding and info, like "company" name, about, contact, etc.
My question: Is there a way to hide a skin element during a left-click on the pano (while navigating)? So a way to influence the skin when clicking outside of the skin on the pano.

Carel Struycken

Don · Sat Jun 29, 2013 8:08 pm

Code: Select all

<body style="background-color:lightblue; height:100%; width:100%;">
...
<div id="container" style="height:80%; 
            left:10%; 
            position:fixed; 
            top:10%; 
            width:80%; 
            visibility:visible; 
            z-index:1;">This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.</div>
...
<div id="myDiv002" style="background-color:none; 
                text-align:center; vertical-align:middle; 
                position:fixed;
                left:250px;
                opacity:1.0; 
                top:100px;
                visibility:visible;
                z-index:9;" onclick="javascript:alert('Hello World');">
myDiv002 is on top of my Div named "container"</div>
...
</body>

Yes, in the example code, <div id="container"...> is your pano and has a z-index of 1. The <div id="myDiv002"...> could be a company logo, about us, contact us, or whatever, and has a z-index of 9. Therefore, <div id="myDiv002"...> will display on top of <div id="container"...>. Create a <div> tag for every element on your HTML page. Use the <div> style attributes to position the tag precisely on your page. Use the <div> onClick event to turn it, or any of the other <div> tag on/off.

Past forum posts have discussed using javascript, such as the above <div id="myDiv002" onclick="....."> to interact with the pano. Likewise, the pano skin elements can have their own event driven javascript too, with which to interact with <div id="myDiv002"...>. Perhaps to turn on <div id="myDiv002"...> again when the pano is the only element still displayed.

Carel · Sat Jun 29, 2013 9:29 pm

Thanks Don,
I was hoping to do this from within the pano, but I have never seen an example of that so maybe it is not possible. It would be nice to make elements of the skin hide while looking around in the pano, but it might be confusing for first time visitors. In the past I had a hidden skin that appears when mousing over the bottom of the screen, but that also seemed confusing to first time visitors.

Carel

Don · Mon Jul 01, 2013 5:39 pm

Yes, turn on/off HTML page elements from within the pano. Using the example code in my post above, open the skin editor and add this action to a button:

Mouse Click >> Go To URL >> URL: javascript:hideMyDiv002();

Then add the following script to your HTML page:

Code: Select all

<script type="text/javascript">
            function hideMyDiv002() {
                var myDiv = document.getElementById('myDiv002');
                if (myDiv.style.visibility == 'visible') {
                    myDiv.style.visibility = 'hidden';
                } else {
                    myDiv.style.visibility = 'visible';
                }
            }
</script>

In that way, or variations of it, elements residing in <div> tags on the HTML page can be controlled, i.e. visibility, opacity, location, and so on, from within the pano. Use multiple <div> tags and their z-index value to create layers in front of and behind the pano. The pano itself is in a <div> tag that can be turned on/off. The sky is the limit.

PS: The above hideMyDiv002() function can instead be written in the skin.js file where the action for your button is found. Except the skin.js file is overwritten everytime the pano is output. Well, likewise the HTML is overwritten everytime the pano is output. So, either way, keep a copy of your custom functions and replace them as needed after each time the pano is output.