Forum

Hide open anchors when clicking on HTML link

12 June 2018 14:48
So I've stumbled on an 'error'. When you click on a HTML link after an anchor is clicked (and opened). The anchor won't close. However, when you click 'somewhere else' then the HTML link, the anchor is closed. How can I auto close an open anchor when the HTML link is being clicked?

Regards
12 June 2018 20:10
Could you clarify what you mean by "When you click on a HTML link after an anchor is clicked (and opened)."? You have an anchor with a link inside the anchor, and when you click on that link, the anchor does not close, whereas when you click somewhere else on the same anchor, the anchor does close. Is that what you mean?

I'm asking because I tested this with B4W's blog example "Anchors Explained: How to Set Up Annotations", by Andrey Prakhov. Scroll down to the end of the page, you'll find "LINK TO THE PROJECT".

In that project, I inserted a link to the anchor and the anchor DOES CLOSE when you click on the link.

His solution is to attach an .addEventListener("click") to the anchor div. The ensuing function then toggles the CSS display property upon each click:

    my_design.addEventListener("click", function() {
		if (my_design_child.style.display == "block") {
			my_design_child.style.display = "none";	
		} else {
			my_design_child.style.display = "block";
		}
		
    }, false);
18 June 2018 15:38
I've attached an image to clarify the situation:


I've got:
  • HTML/JS button that is linked to another (the next) camera position
  • Anchors that are shown or hidden depending on the camera position (available to click on)
  • Achor is open when clicked

The problem: When going to the next camera position by clicking on a HTML button all the anchors (for that camera position) will be hidden through nodes.
But when an anchor is opened and the HTML button is clicked, all the anchors will be hidden, except for the last opened anchor. That one will be visible.

So the EventListener only works when there will be clicked on the canvas, but not on (HTML) buttons on the page. This could be fixed kind of easily by giving the Anchors a Div Name, but they don't have that.. Any ideas?
18 June 2018 20:18
What are "HTML buttons"? Do you mean you control the scene with buttons that are not part of the Canvas and not part of B4W, but instead are overlayed over the canvas div? But then how do you hide the anchors with logic nodes?

You say the anchors "do not have" DIVs. That suggests you use anchors of the "Annotation" type. You could change that to "Custom" type, because then you'll have DIVs that you can control with your HTML/JS buttons.
21 June 2018 16:46
Reply to post of user Blend4Life
What are "HTML buttons"? Do you mean you control the scene with buttons that are not part of the Canvas and not part of B4W, but instead are overlayed over the canvas div? But then how do you hide the anchors with logic nodes?
HTML button: simple <a> buttons. Onclick of a link/button the camera position changes and a node script will be run which accordingly shows or hides anhors.

Reply to post of user Blend4Life
You say the anchors "do not have" DIVs. That suggests you use anchors of the "Annotation" type. You could change that to "Custom" type, because then you'll have DIVs that you can control with your HTML/JS buttons.
Yes, it´s indeed the annotation type. I found the ´visibility settings´ for the annotation anchors too useful to drop.. Don't know if this could be setup within .js as well?
22 June 2018 22:52
a node script will be run which accordingly shows or hides anhors
But how do you hide the anchors? What is the script/logic node setup doing? I'd like to re-create the exact situation you have. You said you can hide all anchors except open ones, but I don't even know how you're hiding the anchors.
 
Please register or log in to leave a reply.