Hello everybody

I'm a little bit stuck

doing a new site for my wife's new venture.
here is the sticker
I have a single page scrolling, with a fixed left-hand container, that holds a little bit of info & the menu links.
The links are smooth scroll triggers for the containers down the page (fixed height so no manual scrolling)
In other words, click the menu item & the container scrolls into view (this is the right-hand container.) it works beautifully., however, in the ideal world what I would like to happen is for the menu link to change somehow (colour underlined whatever) when the container that is anchored to the trigger scrolls into view.

So
for example the menu link for "Where We Are At" triggers the container with the ID "where-we-are-at"
Once that container has scrolled into view, The menu-Link changes a bit like being "Active" when on different pages.

The problem I can't get to solve is how to do that, because if it was a different page then no worries, but because it's on the same page I can't get it.

I figure it may need some fancy JS work, (which is a bit beyond me, I have already searched Google, but not found anything that could be used) something that maybe adds a class to the menu-link when the container with its trigger ID is in full view, & then takes it off when it isn't.

Anyone of you JS Guru's out there think it's possible?

Have a great day wherever you are in the world.

Wayan in windy Bali

Hard to say without seeing it. But isn't it possible to use that 'out-of-view' thingie?
I'm a bit pressed for time right now, having to take a crash course in WordPress' inner mysteries in order to maintain a site, Otherwise I would have experimented a bit... Maybe later today...

Sorry, read your post again. I misunderstood first time around. Forget what I wrote. But I will still try experimenting when I get some time...

Wayan, I just did a search. Could this be something for you:
http://codetheory.in/change-active-stat … on-scroll/
Check what is called 'Final Demo' a bit down the page.

For what is wanted, I think a very simple solution is to use a custom onclick attribute on the menu link.

For example
(a) in the Name box one would put (without the square brackets) [onclick]
(b) in the Value box one would put(without the square brackets) [this.style.color = "green";]

It's important, of course, to remember that the attribute after [this.style.] needs to be in the js format if the CSS format is hyphenated. So, for example, background-color becomes backgroundColor, i.e. the hyphen is taken out and the second word starts with an upper-case letter.

Frank

That seems an easy solution, and it works, but when clicking on a different menu link, the first one stays in the 'on-clicked' state. How can we remove that again?

Sorry! I'd been looking for a way to replace the :visited pseudo-class, assuming incorrectly that the problem was the failure of :visited to work within a page. I don't know a quick and easy way of removing the change to the visited link.

It's tempting to consider an extra custom attribute [onfocusout], but that would in fact not work in conjunction with a link, as the link target becomes the new focus immediately.

I'm pretty sure that the method I used here would work, but would involve two clicks as in the menu there.

Frank

I have one working here, see attachment. I found it here: https://codepen.io/chriscoyier/pen/qyELzd and transferred the code over to the HTML Editor. I hope it will work also in SD3.

I think the following way will do it -
1. I create a button link with a red background and a class name (blink).
2. I create a custom attribute, onmousedown, for it with the following value:
3. I create a custom attribute, onmouseup, for it with the following value:
4l. I duplicate this button to create as many buttons as required.

In other words I return all the buttons to the original red background on mousedown before changing the colour of the clicked button.

Frank

Hi Frank
that looks to be a bit of a goer, I will give it a try (couldn't get the one from Inger to work)
1 quick question can that colour thingy be replaced by a hex colour (ie #089076 for example)