Z-index

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
PaulK
Posts: 57
Joined: Thu Apr 29, 2010 10:53 am

Z-index

Post by PaulK » Thu Jun 06, 2019 3:43 pm

Hello all
Is there any way to change the Z-index of an item on the click event of a button?
Many thanks
Paul

PaulK
Posts: 57
Joined: Thu Apr 29, 2010 10:53 am

Re: Z-index

Post by PaulK » Sun Jun 09, 2019 1:00 pm

Anyone have any comments?

User avatar
Tony
Posts: 736
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Z-index

Post by Tony » Sun Jun 09, 2019 4:25 pm

Hi Paul,

Yes you can change the Z-Index of an element using a mouse click, Go to URL and Javascript.

https://p2vrlittlebits.s3-ap-southeast- ... index.html

In this example I have two coloured rectangles, a blue one, named 'blue' and a pink one, named 'pink'. The blue one has a Z-Index of 1 and the pink one has a Z-Index of 2.

I also have two text buttons, one 'Blue to the Front', named 'blue front', and one 'Blue to the Back', named 'blue back'. The 'Front' button changes the Z-Index of the blue rectangle to 3, hides itself and shows the 'Back' button. The 'Back' button changes the Z-Index of the blue rectangle to 0, hides itself and shows the 'Front' button.

The Actions for the 'Front' button are;

1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "3";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue back

The Actions for the 'Back' button are;

1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "0";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue front

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

PaulK
Posts: 57
Joined: Thu Apr 29, 2010 10:53 am

Re: Z-index

Post by PaulK » Sun Jun 09, 2019 4:35 pm

Hi Tony
That’s great thank you. Think it’s just what I’m looking for.
Developing an animated carousel type of navigation system so I’m keen to get the Z index sorted for a smooth transition.

Thanks again.

Paul

User avatar
Tony
Posts: 736
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Z-index

Post by Tony » Sun Jun 09, 2019 4:43 pm

Hi Paul,

Glad it helped. I'd like to see your finished animated carousel when you are done.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

PaulK
Posts: 57
Joined: Thu Apr 29, 2010 10:53 am

Re: Z-index

Post by PaulK » Sun Jun 09, 2019 4:46 pm

Hi Tony
When it’s all done I’ll pm you a link.

Paul.

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 4 guests