Plugin Author
malihu
(@malihu)
Hi,
There seems to be a script in your theme that handles the sticky mobile menu which conflicts with the “Page scroll to id” highlight function.
The only way to deal with it is by adding a few lines of javascript and CSS. Can you do this? If yes, the following should do the trick:
(function($){
$(window).on("load",function(){
if($('body[data-elementor-device-mode="mobile"] .elementor-element-6369f09').length){
setTimeout(function(){
var events = $._data(window, 'events');
for (var i = events.scroll.length - 1; i >= 0; i--) {
if(!events.scroll) return;
var handler = events.scroll[i];
if (handler && handler.namespace != 'mPS2id') {
$(window).off('scroll');
}
}
},300);
}
});
})(jQuery);
and the CSS:
body[data-elementor-device-mode="mobile"] .elementor-element-6369f09{
position: fixed;
width: 414px;
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
z-index: 99;
}
Does this help?
Thread Starter
atcro
(@atcro)
I have added the code but nothing happens.
JS is added as a custom hook inside of a theme.
Plugin Author
malihu
(@malihu)
The js and css code do not appear on the frontend at all. Not sure if you need to clear/flush cache or need to add the code differently(?)
Plugin Author
malihu
(@malihu)
You could also add the js code in your theme/child-theme functions.php if you want:
function ps2id_custom_script(){
wp_register_script( 'ps2id-custom-script', '', array('jquery', 'page-scroll-to-id-plugin-script'), '', true );
wp_enqueue_script( 'ps2id-custom-script' );
wp_add_inline_script( 'ps2id-custom-script', '(function($){
$(window).on("load",function(){
if($('body[data-elementor-device-mode="mobile"] .elementor-element-6369f09').length){
setTimeout(function(){
var events = $._data(window, 'events');
for (var i = events.scroll.length - 1; i >= 0; i--) {
if(!events.scroll) return;
var handler = events.scroll[i];
if (handler && handler.namespace != 'mPS2id') {
$(window).off('scroll');
}
}
},300);
}
});
})(jQuery);');
}
add_action( 'wp_enqueue_scripts', 'ps2id_custom_script' );
Thread Starter
atcro
(@atcro)
There is an error in the JS. It says – syntax error, unexpected ‘body’ (T_STRING), expecting ‘)’
Error is somewhere in this line:
if($('body[data-elementor-device-mode="mobile"] .elementor-element-6369f09').length){
I have tried ChatGPT to fiy it for me. I got the file I can place in functions.php but the problem is still there.
Plugin Author
malihu
(@malihu)
Ah! I see, try changing the line to:
if($(\'body[data-elementor-device-mode="mobile"] .elementor-element-6369f09\').length){
Thread Starter
atcro
(@atcro)
There is another error now, two lines below.
var events = $._data(window, ‘events’);
It says: Your PHP code changes were not applied due to an error on line 33 of file wp-content/themes/at-child/functions.php. Please fix and try saving again.syntax error, unexpected ‘events’ (T_STRING), expecting ‘)
Plugin Author
malihu
(@malihu)
Ah sorry, my bad. Just change the code to:
function ps2id_custom_script(){
wp_register_script( 'ps2id-custom-script', '', array('jquery', 'page-scroll-to-id-plugin-script'), '', true );
wp_enqueue_script( 'ps2id-custom-script' );
wp_add_inline_script( 'ps2id-custom-script', '(function($){
$(window).on("load",function(){
if($(\'body[data-elementor-device-mode="mobile"] .elementor-element-6369f09\').length){
setTimeout(function(){
var events = $._data(window, \'events\');
for (var i = events.scroll.length - 1; i >= 0; i--) {
if(!events.scroll) return;
var handler = events.scroll[i];
if (handler && handler.namespace != \'mPS2id\') {
$(window).off(\'scroll\');
}
}
},300);
}
});
})(jQuery);');
}
add_action( 'wp_enqueue_scripts', 'ps2id_custom_script' );
Thread Starter
atcro
(@atcro)
I have inserted code (JS is OK now) but indicator still doesn’t work on a mobile :/
Plugin Author
malihu
(@malihu)
There’s an error in the code. For some reason all [ have become:
& # 0 9 1;
Can you change them back to [?
The errors are:
body[data-elementor-device-mode
and
events.scroll[i];
-
This reply was modified 2 years, 4 months ago by
malihu.
-
This reply was modified 2 years, 4 months ago by malihu.
Thread Starter
atcro
(@atcro)
I have changed it but the problem is still there.
Plugin Author
malihu
(@malihu)
Keep the script as it is as it stops with the highlight blinking issue on mobile. Try going to plugin settings and disable “Allow only one highlighted element at a time”. Save changes and let me know.
Thread Starter
atcro
(@atcro)
I have switched off an option ‘Allow only one highlighted element…’ and saved the change.
Plugin Author
malihu
(@malihu)
OK. As I understand it, you want to keep having the link highlighted for the entire section, correct?
The issue is that a)you have multiple menus for desktop and mobile and b)your target id is set only at the beginning of each section. This means that you cannot really use plugin’s “Keep the current element highlighted until the next one comes into view” option for both desktop and mobile (that’s why it only works correctly on desktop).
In order to make this work correctly is to set the target id on the entire section you want. You can do this by wrapping your sections in elementor inside another/new elementor container/block element and give the id to that one.
For example, right now your layout is like this:
— section with id “features”
— section
— section
— section
— section
— section
— section with id “video”
— section
— section
— section with id “specs”
You should make it like this:
— wrapper element with id “features”
—- section (inside the wrapper element with id “features”)
—- section (inside the wrapper element with id “features”)
—- section (inside the wrapper element with id “features”)
—- section (inside the wrapper element with id “features”)
—- section (inside the wrapper element with id “features”)
—- section (inside the wrapper element with id “features”)
—
— wrapper element with id “video”
—- section (inside the wrapper element with id “video”)
—- section (inside the wrapper element with id “video”)
—- section (inside the wrapper element with id “video”)
—
— wrapper element with id “specs”
and so on…
Does this make sense? You just need to wrap the subsections of each section in an elementor wrapper element/block and move/set the target ID on that element.
You should also go to plugin settings and set the “Highlight selector(s)” option value to:
a[href*='#']:not([href='#']):not(.elementor-button)
Let me know
