Disabling Green Sock on Certain Pages | CMS conflicts

[nevanthegreat]

Hi there, I did a search on the forum and so far I haven't found an answer for this. Please correct me if I am wrong.

 

I am wondering if there is a way to disable GSAP on certain pages. When I am logged into my CMS it massively conflicts with it. I would like to load the script only on the exterior page, is there a way to do this?

 

For reference I was looking at possibly doing this: https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load

 

I would like to be able to avoid using jQuery if I don't have to.

 

Thank you!

[Shaun Gorneau]

Hi @nevanthegreat,

 

usually CMSs have different theme layers for public and admin sides and you’d be able to control which JS is included in your theme config file or something similar.

 

If your admin side is using the public side’s theme, you can typically wrap your <script> in server side (PHP, for example) logic that only outputs the <script> if something like $admin is false or a $user->id is 0.

 

 

[nevanthegreat]

22 hours ago, Shaun Gorneau said:

Hi @nevanthegreat,

 

usually CMSs have different theme layers for public and admin sides and you’d be able to control which JS is included in your theme config file or something similar.

 

If your admin side is using the public side’s theme, you can typically wrap your <script> in server side (PHP, for example) logic that only outputs the <script> if something like $admin is false or a $user->id is 0.

 

 

Hi Shaun thank you so much for the reply! My company's CMS is proprietary (I am still learning it, I'm fairly new) and I believe it's engined with C# (I am more familiar with a WP-like engine). I am wondering if there is a way  to use JS (maybe even jQuery) to only load the script for the user. Could you point me in the direction with any reading material you might know about that I can achieve this with? My stack overflow-fu is failing.

 

Edit:

 

I think I actually found a simple solution using jquery seen here: https://stackoverflow.com/questions/19461395/jquery-if-location-pathname-contains

 

It seems to work okay actually.

 

However, I would like to avoid loading another library just to execute this simple script for page speed purposes. I am not that great with javascript...now I believe my question has evolved into: how might I be able to do this with just vanilla js? Are there possible problems I might encounter doing it this way?

[Visual-Q]

You could look at loading conditionally based on some page property a body class, a name in the url etc... there's almost certainly something in the page on the admin side, or present when you are logged in to use as an identifier.

 

https://stackoverflow.com/questions/26979733/how-to-include-an-external-javascript-file-conditionally

 

https://stackoverflow.com/questions/5235321/how-do-i-load-a-javascript-file-dynamically

 

There will be plenty of other similar links to look at if you search for them.

 

You can check for a string in a url for instance without jQuery with something like this then load the scripts inside.

 

if (window.location.href.indexOf('about') > 0) {
   console.log('about page is loaded')
}

 

[nevanthegreat]

2 hours ago, Visual-Q said:

You could look at loading conditionally based on some page property a body class, a name in the url etc... there's almost certainly something in the page on the admin side, or present when you are logged in to use as an identifier.

 

https://stackoverflow.com/questions/26979733/how-to-include-an-external-javascript-file-conditionally

 

https://stackoverflow.com/questions/5235321/how-do-i-load-a-javascript-file-dynamically

 

There will be plenty of other similar links to look at if you search for them.

 

You can check for a string in a url for instance without jQuery with something like this then load the scripts inside.

 

if (window.location.href.indexOf('about') > 0) {
   console.log('about page is loaded')
}

 

Thank you so much Visual-Q for helping me to try and understand this.

I tried this and it seemed to work. But, I think I am not understanding it very well.

<script>
	
	// Check if is homepage, then run GSAP
	if (window.location.href.indexOf('/') > 0) {
		console.log('Home page is loaded')
	   
		// Animate/transform/translate/fade the icons
		var tl = gsap.timeline({
		    scrollTrigger: {
		      trigger: "#IconsAnimated",
		      scrub: true,
		      pin: true,
		      start: "top top",
		      end: "+=100%",
		      markers: true
		    }
		  });
		
		tl.from(".icons-animated #HumanStars", {scale: 0.3, rotation:45, autoAlpha: 0, ease: "power2"});
	}

</script>

I was reading about the logical operands like

 

==
=>
&&

etc etc. These seemed to break the code and give me errors. Is my logic incorrect when I replace ">" with "=="

 

With my above code it works but it still works on the admin page also (what I aim to prevent). Our page structure looks something like this when logged in:

 

Quote

https://mywebsite.com/~/template/numbers/moreNumbers?string

 

I think I am not understanding the logic of the if statement. I was browsing the forums you provided and everything looks so beyond my level.

 

[Visual-Q]

The if statement checks if a string in the case of mine "about" is present in the url by seeing if the index position of it in the entire url  string is greater than 0 (hint:there are no index positions below 0 - see how that works). In the case of yours you are only looking for the presence of an "/" which would be present on most if not all urls.  If you are going to conditionally load based on a page url you would have to test for something unique to that url. I suggest you examine the url of your admin page and your public facing pages to see if you can find something to use. It might be "template"  or the next set of numbers in your case.

 

See:

https://www.tutorialrepublic.com/javascript-tutorial/javascript-window-location.php

https://www.tutorialrepublic.com/javascript-tutorial/javascript-strings.php

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

 

Note there's no guarantee that using the url as a test is the best option,  you can also look at other things like using a class on the body if you find something unique often a CMS might add something like admin there.

 

https://stackoverflow.com/questions/9532639/how-check-if-body-has-a-specific-class-with-javascript/9532714

 

As Shaun noted usually the CMS would be structured so the front end code and the backend admin are separate, to avoid these kinds of issues. The backend should be an interface to work with the database not utilize the front end presentation.