It doesn’t work on a mobile

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?

I have added the code but nothing happens.

JS is added as a custom hook inside of a theme.

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(?)

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' );

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.

Ah! I see, try changing the line to:

if($(\'body[data-elementor-device-mode="mobile"] .elementor-element-6369f09\').length){

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 ‘)

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' );

I have inserted code (JS is OK now) but indicator still doesn’t work on a mobile :/

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 1 year, 1 month ago by malihu.
• This reply was modified 1 year, 1 month ago by malihu.

I have changed it but the problem is still there.

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.

I have switched off an option ‘Allow only one highlighted element…’ and saved the change.

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