Plugin Author
malihu
(@malihu)
Hi,
Do you use the plugin only on you menu or in addition to other links (e.g. next section, back-to-top etc.)? If you’re using the plugin on other links too you probably need to set the value of ‘Highlight selector(s)’ field to your menu selector.
Hi,
unfortunately I have exactly the same problem… everything is working correctly, and jumping from menu to the various sections works perfectly.
But… when scrolling down, the flip of highlighting to the next menu item is too early…
My page is structured as follows (and cannot be changed because of the visual editor I am using – had to modify the code so it’s displayed in the forum):
a id=”anchor_1″ /a
<div> …. any content </div>
a id=”anchor_2″ /a
<div> …. any content </div>
a id=”anchor_3″ /a
<div> …. any content </div>
The problem is that when you scroll down and e.g. anchor_1 gets out of view and anchor_2 enters the screen with just a few pixels the menu flips to anchor_2…
Is there any way to define that an anchor only gets activated if it is just xxx pixels away from the top? Or… do you have any other ideas how to solve this?
Thanks for your help!
Plugin Author
malihu
(@malihu)
A solution might be to use the .mPS2id-highlight-first class (instead of the .mPS2id-highlight) in your CSS.
When more than one targets/sections are within the viewport the corresponding first and last highlighted links get additional classes (.mPS2id-highlight-first and .mPS2id-highlight-last), so this might help styling only the top-most link.
Unfortunately this is not a solution… because immediately when
a id=”anchor_1″ /a
gets out of the viewport, it looses all the parameters… the issue is that the DIV section which belongs to anchor_1 is still on the screen… but the anchor not… so… immediately when anchor_2 enters the screen with just 1 pixel all the parameters flip to anchor_2…
Any idea how to work around that?
Plugin Author
malihu
(@malihu)
I see…
At the moment there’s no way to easily do what you need (at least without writing some custom js code in the theme).
I’ll try to update the plugin within the week (maybe in a couple of days) to feature a solution for targets with zero height/width. The solution I’m thinking is either adding a new setting or a new attribute in target elements that’ll “connect” them with their corresponding section (e.g. <a id="anchor_1" data-ps2id-target="#anchor_1 + div"></a>).
Plugin Author
malihu
(@malihu)
Ok, I’ve updated the plugin today to version 1.5.7.
In this version you can accomplish what you describe in 2 ways:
1. Check ‘Highlight by next target’ in plugin settings. This makes the script calculate each section length (e.g. height) by the distance between its target and next the next one.
2. You can add target elements via the ps2id shortcode and pass their corresponding target via the target shortcode attribute.
For example, instead of inserting in wp editor:
<a id="anchor_1"></a>
you can do:
[ps2id id="anchor_1"]
and define the target like this:
[ps2id id="anchor_1" target="#anchor_1 + div"]
The above tells the script that your target element is the div right after the element with id “anchor_1”. This way the target height becomes from zero (the height of #anchor_1) to whatever the height of the div below it, making highlighting links work properly.
Both of these ways work best with ‘Keep highlight until next’ unchecked and in most cases, with ‘Force single highlight’ checked.
The solutions above will make the plugin highlight the links when their corresponding target comes above the half of the viewport.
