CODEWITHSUNDEEP
javascriptaframe
ymcheung
ymcheung

Reputation: 57

Hide page elements by A-Frame's VR mode button

I'm using A-Frame with embedded attribute.

Please refer to this codepen:

http://codepen.io/ymcheung/full/zKyyqX/

<a-scene embedded>
    <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

// .a-enter-vr-button is supplied by A-Frame
var sceneVRButton = document.querySelector('.a-enter-vr-button');

Clicking the VR mode button at the right bottom corner would enter fullscreen mode on desktop while it enters VR-Glass mode in mobile.

In mobile mode, the toolbar remains on the screen, and I want to hide it temporarily.

function hideinHome() 
{
    document.querySelector('.floatingBar').style.opacity = 0;
}

sceneVRButton.addEventListener('click', hideinHome, false);

However, it seems that A-Frame's DOMs are loaded latter than javascript.

In Chrome's console there is the message:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Are there any ways to 'listen' to A-Frame's DOMs or enter fullscreen mode in mobile?

Thank you!

Upvotes: 0

Views: 1151

Answers (1)

ngokevin
ngokevin

Reputation: 13233

Write an A-Frame component so you don't have to manually wait for initialization.

AFRAME.registerComponent('hide-on-enter-vr-click', {
  schema: {type: 'selector'},

  init: function () {
    var element = this.data;
    var button = this.el.querySelector('.a-enter-vr-button');
    button.addEventListener('click', function () {
      element.style.opacity = 0;
    });
  }
});

Then hook it in.

<a-scene hide-on-enter-vr-click=".floatingBar"></a-scene>

Upvotes: 2

Related Questions