CODEWITHSUNDEEP
aframe
David Walsh
David Walsh

Reputation: 264

How can I hide an element with A-Frame?

What is the best way to hide an element using A-Frame?

Do I need to remove the element from the DOM?

Upvotes: 9

Views: 9609

Answers (4)

Rodrigo De Almeida Siqueira
Rodrigo De Almeida Siqueira

Reputation: 1761

The problem with visible="false" is that the element behind it will not be clickable (because the element is there, but is transparent). So, the alternative I found is to make it with zero width. Here is how I hide the element on mouse click:

document.getElementById("my_element_id").addEventListener('mousedown', function(evt) {
  document.getElementById("my_element_id").setAttribute("width", "0");
});

Upvotes: 1

vt5491
vt5491

Reputation: 2294

You can also specify it on the a-frame tag itself e.g.:

<a-image id="hand-overview-chart"
  src="#handOverviewImg" position="3 3 0"
  width="4" height="4" visible="false">
</a-image>

Of course you'll still need javascript to trap on some event like "mouseenter" to toggle it visible:

document.querySelector('#myElParentId').addEventListener('mouseenter',myEventHandler); 

myEventHandler: function (evt) {
  let myEl = document.querySelector("#hand-overview-chart");
  myEl.setAttribute("visible","true");
}

Upvotes: 2

David Walsh
David Walsh

Reputation: 264

The easiest way to hide an element is the visible attribute:

myElement.setAttribute("visible", false)

Upvotes: 3

ffmaer
ffmaer

Reputation: 781

var el = document.querySelector("#yourElementId");

el.setAttribute("visible",false);

Upvotes: 10

Related Questions