How Can I Make A Div Show From Clicking An Entity/OBJ in Aframe Scene
Im having an issue with my code here. Im still pretty new to Javascript so I may be making a noobie mistake. What Im trying to accomplish is to be able to click the red tree on the globe in my example and a red div box should pop up. I feel like I've done everything right but I keep receiving an error message in my console of "Uncaught TypeError: Cannot read property 'style' of null" I setup a Glitch with my example code. Any help would be GREATLY appreciated. Big thanks in advance!
https://glitch.com/edit/#!/join/57349026-d43e-4466-87f0-b793c7a89c5f
javascript three.js aframe webvr
asked Nov 21 at 3:04
John Adegbuji
136
add a comment |
Im having an issue with my code here. Im still pretty new to Javascript so I may be making a noobie mistake. What Im trying to accomplish is to be able to click the red tree on the globe in my example and a red div box should pop up. I feel like I've done everything right but I keep receiving an error message in my console of "Uncaught TypeError: Cannot read property 'style' of null" I setup a Glitch with my example code. Any help would be GREATLY appreciated. Big thanks in advance!
https://glitch.com/edit/#!/join/57349026-d43e-4466-87f0-b793c7a89c5f
javascript three.js aframe webvr
asked Nov 21 at 3:04
John Adegbuji
136
I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it
– chinloyal
Nov 21 at 3:20
Try this:document.getElementById('Africa-Tree-Div').style.display = "block";ID of the element is without#.
– prisoner849
Nov 21 at 6:50
add a comment |
Im having an issue with my code here. Im still pretty new to Javascript so I may be making a noobie mistake. What Im trying to accomplish is to be able to click the red tree on the globe in my example and a red div box should pop up. I feel like I've done everything right but I keep receiving an error message in my console of "Uncaught TypeError: Cannot read property 'style' of null" I setup a Glitch with my example code. Any help would be GREATLY appreciated. Big thanks in advance!
https://glitch.com/edit/#!/join/57349026-d43e-4466-87f0-b793c7a89c5f
javascript three.js aframe webvr
asked Nov 21 at 3:04
John Adegbuji
136
Im having an issue with my code here. Im still pretty new to Javascript so I may be making a noobie mistake. What Im trying to accomplish is to be able to click the red tree on the globe in my example and a red div box should pop up. I feel like I've done everything right but I keep receiving an error message in my console of "Uncaught TypeError: Cannot read property 'style' of null" I setup a Glitch with my example code. Any help would be GREATLY appreciated. Big thanks in advance!
https://glitch.com/edit/#!/join/57349026-d43e-4466-87f0-b793c7a89c5f
javascript three.js aframe webvr
javascript three.js aframe webvr
asked Nov 21 at 3:04
John Adegbuji
136
asked Nov 21 at 3:04
John Adegbuji
136
asked Nov 21 at 3:04
John Adegbuji
136
asked Nov 21 at 3:04
John Adegbuji
136
asked Nov 21 at 3:04
John Adegbuji
136
136
I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it
– chinloyal
Nov 21 at 3:20
Try this:document.getElementById('Africa-Tree-Div').style.display = "block";ID of the element is without#.
– prisoner849
Nov 21 at 6:50
add a comment |
I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it
– chinloyal
Nov 21 at 3:20
Try this:document.getElementById('Africa-Tree-Div').style.display = "block";ID of the element is without#.
– prisoner849
Nov 21 at 6:50
I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it
– chinloyal
Nov 21 at 3:20
I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it
– chinloyal
Nov 21 at 3:20
Try this:
document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.– prisoner849
Nov 21 at 6:50
Try this:
document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.– prisoner849
Nov 21 at 6:50
add a comment |
1 Answer
1
active
oldest
votes
For making overlay items, try positioning them by using the position: fixed attribute. Since the a-frame canvas is taking up the whole screen, you should "fix" them over the canvas.
When using
getElementById you don't have to use the # character.When using document.querySelector you should use
.for classes
#for id's
Furthermore, your CSS selector is #Africa-Tree while the div is #Africa-Tree-Div.
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
throwcursor="rayOrigin: mouseon the<a-scene>and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1
– Piotr Adam Milewski
Nov 21 at 15:23
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404714%2fhow-can-i-make-a-div-show-from-clicking-an-entity-obj-in-aframe-scene%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
For making overlay items, try positioning them by using the position: fixed attribute. Since the a-frame canvas is taking up the whole screen, you should "fix" them over the canvas.
When using
getElementById you don't have to use the # character.When using document.querySelector you should use
.for classes
#for id's
Furthermore, your CSS selector is #Africa-Tree while the div is #Africa-Tree-Div.
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
throwcursor="rayOrigin: mouseon the<a-scene>and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1
– Piotr Adam Milewski
Nov 21 at 15:23
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
add a comment |
For making overlay items, try positioning them by using the position: fixed attribute. Since the a-frame canvas is taking up the whole screen, you should "fix" them over the canvas.
When using
getElementById you don't have to use the # character.When using document.querySelector you should use
.for classes
#for id's
Furthermore, your CSS selector is #Africa-Tree while the div is #Africa-Tree-Div.
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
throwcursor="rayOrigin: mouseon the<a-scene>and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1
– Piotr Adam Milewski
Nov 21 at 15:23
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
add a comment |
For making overlay items, try positioning them by using the position: fixed attribute. Since the a-frame canvas is taking up the whole screen, you should "fix" them over the canvas.
When using
getElementById you don't have to use the # character.When using document.querySelector you should use
.for classes
#for id's
Furthermore, your CSS selector is #Africa-Tree while the div is #Africa-Tree-Div.
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
For making overlay items, try positioning them by using the position: fixed attribute. Since the a-frame canvas is taking up the whole screen, you should "fix" them over the canvas.
When using
getElementById you don't have to use the # character.When using document.querySelector you should use
.for classes
#for id's
Furthermore, your CSS selector is #Africa-Tree while the div is #Africa-Tree-Div.
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
answered Nov 21 at 10:42
Piotr Adam Milewski
5,24721025
5,24721025
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
throwcursor="rayOrigin: mouseon the<a-scene>and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1
– Piotr Adam Milewski
Nov 21 at 15:23
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
add a comment |
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
throwcursor="rayOrigin: mouseon the<a-scene>and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1
– Piotr Adam Milewski
Nov 21 at 15:23
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked
– John Adegbuji
Nov 21 at 15:15
throw
cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1– Piotr Adam Milewski
Nov 21 at 15:23
throw
cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1– Piotr Adam Milewski
Nov 21 at 15:23
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
@JohnAdegbuji let me know if my glitch is working for you
– Piotr Adam Milewski
Nov 21 at 17:00
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up
– John Adegbuji
Nov 26 at 22:01
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404714%2fhow-can-i-make-a-div-show-from-clicking-an-entity-obj-in-aframe-scene%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it
– chinloyal
Nov 21 at 3:20
Try this:
document.getElementById('Africa-Tree-Div').style.display = "block";ID of the element is without#.– prisoner849
Nov 21 at 6:50