Site-specific Javascript

---

Hello,

I have a question regarding javascript that I only want to run on a specific page.

I have a one-pager and a separate legal notice and privacy page.

For the one-pager I added the following script to make the mobile site title a scroll-to-top button

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "page" && obj.id == 86){
	    jQuery('.mobile-title').addClass('scrolltotop');
	}
});
</script>

This works fine. However I need the site title on legal notice and privacy to act as usual and redirect me to the home page.

Unfortunately the included if statement with the corresponding page id of the home page doesn’t work as I hoped. The scroll-to-top javascript still works on all pages.

A second script to remove the scrolltotop class again only fires if you go to the legal notice and privacy pages via the direct url.

Dear @lars
Can you post a link to your website?
We will then have a look and inspect that!
Many wishes!
Marius

Hi @mariusjopen

Here is the website:
https://strategis.de

And as I mentioned it only applies to the mobile version.

The pages „legal notice/Impressum“ and „privacy/Datenschutz“ can be found inside the burger menu.

Best
Lars

Dear @lars

does this simple example work?

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "project" && obj.id == 1){
		console.log("fantastic!");
	}
});
</script>

Do you get a console log?

Best!
Marius

Dear @mariusjopen

I added the script in the custom head section.

When I visit the project site by entering the URL or coming from the WP backend I get the console log.

However if I set a link to this project on another page of my website and click on it, the log is not showing up.

It seems as if the site needs to be reloaded entirely before the script fires.

Dear @lars

Thank you for your patience, forgive me for the late reply

I will forward this To Armin so we can take a better look

Thank you for using Lay Theme

Sincerely
Rich

Ok lol
I re-read ur text and I think there's probably nothing wrong with the detection of the correct page.
However, of course u need to remove your functionality on the other pages so I think ur code/ur logic is wrong.

U should do:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "page" && obj.id == 86){
	    jQuery('.mobile-title').addClass('scrolltotop');
	}else{
           jQuery('.mobile-title').removeClass('scrolltotop');
        }
});
</script>

Dear @arminunruh

thanks that totally makes sense! I replaced the script on the site and it works.

I checked it with the web inspector and the class .scrolltotop is getting added and removed accordingly.

However the same behaviour as stated in the first post still exists.

If you go to https://strategis.de/impressum/ directly, or reload the page, the logo links back to home. If you however go from the home page to the site (via the burger menu) the logo still acts as a scroll to top button.

Okay another observation:

Today I added a new page „Kontakt“ and put it in the mobile menu like Impressum and Datenschutz beforehand.

For whatever reason the script works as intended when going from the main page to the „Kontakt“ page through the burger menu and vice versa. On „kontakt“ the logo is linking back to the main page.

Also see the difference in the transition between clicking on „Impressum“, „Datenschutz“ or „Kontakt“. The click on „Kontakt“ seems to trigger a reload whereas the other two just chance the displayed content.

Any chance to replicate this behaviour to the other menu points?

Dear @lars

Checking in :)

Did you find a solution to your problem or does the issue still persist!

Best wishes and have a great day

Sicnerely
Richard

Dear @Richard-Keith

thanks for checking in.
Unfortunately I haven’t found a solution yet.

Like I stated in my post 12 days ago about the „Kontakt“ the script works fine as long as the page is properly (re)loaded in the browser. But it is not working when a transition from one page to another is invoked.

Any way to tell the Laytheme Single Page JavaScript application to not transition but instead to reload a new page?

Dear @lars

Apologies that you haven't found a solution,
I will forward this straight away so we can find one faster :)

In the meantime if you could please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com? to speed up the process.

Hope you have a wonderful day and thank you for being a part of the Community.

Best wishes
Richard

Any way to tell the Laytheme Single Page JavaScript application to not transition but instead to reload a new page?

Hey @lars apologies for not getting back to you earlier. My support coworker is new and just started out.
Yes you can make lay theme reload on every page load.
Go to Lay Options and at the bottom activate "Disable Ajax / Compatibility Mode"

Hey @arminunruh no problem!

Your suggestions finally did the trick.
The script is working as intended.

Thank you very much.

Best
Lars

Dear @lars

Thanks for Getting back and confirming your success,

Best Wishes & Thank you for using Lay Theme!
Richard