Make Symbol Visible via function

Symbols
1

Hi,

I have several (20 symbols) in a scene, only one will be visible at a time, so I have created a function, I have checked the name of the symbol in the inspector, how can I set the visibility, I have tried:

Hotspot1.style.visibility=‘visible’

but this does not work, any help is appreciated.

Thanks

2

Can you post the exact code that you used?

D

3

You are probably looking for...

hypeDocument.getElementById('Hotspot1').style.visibility = "visible";

or

hypeDocument.getElementById('Hotspot1').style.visibility = "hidden";
4

Many thanks Greg,

That’s great, could I ask how we can pass a variable into a function, i.e. if I have 20 symbols that I use in the function to initially hide it will be more efficient for me to also send as a variable the one symbol to make visible, this way I can use one function to do everything:

function(hypeDocument, element, event, myelement) {
//loop all symbols to hide
hypeDocument.getElementById(myelement).style.visibility = “visible”;
}

Regards,

5 
    var myElement = "Hotspot1"; /// (or window.myElement to make it global)

    hypeDocument.getElementById(myElement).style.visibility = "visible";
}
6

Thanks DBear,

Apologies for not being clear, I am checking to see if it is possible to add a parameter to a function as I have tried and the programme prevent me from doing so.

Regards

7

I’m not sure I understand what you need, but yes you can use variables in the function…

var x = hypeDocument.getElementById('Hotspot1');

var y = "hidden"

x.style.visibility = y;
8

This may be a bit of a hack but this can help you out I think. Your request is pretty specific and I don't know about the full details but I made this script for you.
Label all your hotspots with a class hotspots
add this function in, make them all trigger it
OnOffButtons.zip (10.8 KB)

Screen Shot 2015-11-09 at 4.47.07 PM.png1048×894 61.9 KB

I used Document.elementFromPoint() - Les API Web | MDN as a way to do collision detection.
Right now its set so that if you click on the hotspot the others dissapear. But you can do the reverse if you want or you can link to custom hotspots in the array e.g. label them customly and do

 if(allhotspots[i].className==="HYPE_element hotspots"){
    if(selectedhotspot.id=="My custom ID here"){
    //do the thing
    }
 }

This should help you narrow it down to 1 single function.
Full function code

var allhotspots = document.getElementsByClassName('hotspots') 
var selectedhotspot = document.elementFromPoint(event.pageX,event.pageY); 
for(var i=0;i<allhotspots.length;i++){
	//run trough all hotspots
	if(allhotspots[i].className==="HYPE_element hotspots"){
		//check if it's the selected hotspot
		if(selectedhotspot.id==allhotspots[i].id){
			console.log('you clicked on hotspot '+ i)
		}
		else{
		//for the others
			OnOff(allhotspots[i])
			console.log("I'm hiding hotspot "+i)
		}
	}
}
//visibility on off switch
function OnOff(target){
	if(target.style.visibility=='hidden'){
		target.style.visibility='visible';
	}else{
		target.style.visibility='hidden';
	}
}
console.log("--------------//--------------")
1 Like
9

I believe he means to pass a parameter into the built in function that hype generates as a "new function". Instead of

untitledFunction(hypeDocument, element, event) { ...

he means

untitledFunction(hypeDocument, element, event, *another parameter*) { ...

@sanjshah This is not possible I don't think.

As complicated as Lucky's solution is, it works. But

@Luckyde I don't think he needs collision detection I may be wrong

I think it would be a little easier to give your symbols a class name of "hidden" and this can be CSS in your Head HTML. Then check to see if your symbol has that class name and if it does change it back to it's original class name. (HYPE_element) (when you want it to be visible)

D

2 Likes
10

Yeah definitely that works too, but yeah I’m doing it that way since as you said he’s looking for kind of a overall controlling function with a custom parameter. I’m using collision detection to return what is currently selected. But yeah the CSS would work too.

1 Like
11

ok. gotcha!

D

12

Thanks guys for responding, intresting hack luckyde which I think will work.

I will adapt this a little more.

Many thanks

13

Gents,

I apologise for following up on this thread, I have been looking at how best to handle this, I understand I can obatin the caller of the function using the ‘element’ name, can I then add a text to this:

i.e. my button ID is hotspot1 using this can I then add ‘a’ to this so that I can perform:

hypeDocument.getElementById(‘Hotspot1a’).style.visibility = “visible”;

Regards,

14

If you have a button with the id of Hotspot1 and another element with the id of a

And you want then to click button Hotspot1 to trigger a function that needs to work on the element with the id a
( I assume the is some conditional logic in the function and you have other elements that may be chosen) Then you can simply append the two strings together using the + string operator.

hypeDocument.getElementById('Hotspot1' + 'a').style.visibility = "visible";