Navigation Menu using Persistent Symbol - highlight current page

I’m updating a website I was in the process of developing to take advantage of some of the new features with Hype3 Pro. I have a navigation menu, made up of buttons, at the top of the page which I’ve converted to a persistent symbol, since it is on every scene. What I’m trying to figure out is how I can change the text color for the button that corresponds to the current scene the user is on.

To clarify, the text color of the buttons is white. When viewing the Order scene, I want the text color to be blue.

This might get you started ( I used it on the "On Mouse Click" in the action Inspector)...

x = hypeDocument.currentSceneName()

if (x == 1) {document.getElementById("buttonOne").style.color = "blue"}

if (x == 2) {document.getElementById("buttonOne").style.color = "black"}

2 Likes

you can work with timelines within the persistant symbol. create custombehaviour to play each. this can be called outside of the symbol on sceneload. kind of work, but without customscripting :smile:

2 Likes

Here’s one way to do this using relative timelines within a persistent symbol, and linking to custom behaviors:

symboltest.zip (43.4 KB)

All the navigation occurs within the persistent symbol, but the ‘go to’ links could potentially be outside of the symbol because custom behaviors are flexible like that.

Hi,

Struggling a bit with my JS…

I’ve been work on the post from Greg to highlight an active page in a nav via js, when there are more than 2x elements I was unable to get it to work, or one element remains highlighted.

Am I completely off with the below?

var id = hypeDocument.getElementById()

if (id == “one”) {
style.backgroundColor = “red”
}
else {
style.backgroundColor = “green”
}

The below works a bit but the first element remains white when more scenes are added:

var x = hypeDocument.currentSceneName()

if (x == “s1”) {document.getElementById(“button-1”).style.color = “white”, document.getElementById(“button-2”).style.color = “#00CFFF”}

I also could not replicate symbol test above… Is there a tutorial on this and creating ‘Custom Behaviours’?

Thanks for your help!!

You could either set all elements as ‘inactive’ by individually setting it on each element ID, but it may be easier if you set a class on all buttons, set a style for all items in that class (as inactive), then then set a color only for the button you want active after that.

there’s a function symbolElement.getElementsByClassName(className); built for this exact thing.

Here’s a sample of how to use this to set CSS on a number of elements: Closing all popups

Thank you, that makes sense… I am having difficulty getting it to work though. I’m wondering what is wrong with the below, I’ve added the buttons to a class “inactive buttons”:

var x = hypeDocument.currentSceneName()

if (x == “s1”) {document.getElementById(“button-1”).style.color = “white”, symbolElement.getElementsByClassName(“inactive-buttons”).style.color = “green”}

Thank you!!! I finally got it working, copying code from the linked example:

var elements = document.getElementsByClassName('inactive-buttons');
var x = hypeDocument.currentSceneName();
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = 'yellow';
}
var x = hypeDocument.currentSceneName()

if (x == "s1") {document.getElementById("button-1").style.color = "white"}

if (x == "s2") {document.getElementById("button-2").style.color = "white"}

1 Like