Javascript only works when logged in

Support
#1

Hello,

I have added some custom JS via functions.php in my child theme to include scrollreveal.js

For some reason, it’s only loading when logged in which is weird. I have checked the source code & the script is still there, but not working.

I have tried global custom JS, then adding the following HTML to the head & body in the functions.php.

// //Head tags
// =============================================================================

add_action('wp_head','my_tracking');
function my_tracking () { ?>

<link rel="stylesheet" href="https://i.icomoon.io/public/08d3182f10/WebRollicons/style.css">


<script type='text/javascript' src="/wp-content/themes/webrollchild/js/ScrollTrigger.min.js"></script>
<script>document.addEventListener('DOMContentLoaded', function() {
      var trigger = new ScrollTrigger({
         toggle: {
	    visible: 'visfade',
	    hidden: 'invisfade'
	  },
         offset: {
            x: 0,
            y: 250
           }
});
});
</script>

Is there something blocking it? The site is newversion.webandroll.co.uk. Don’t worry, I have tried disabling any potentially conflict plugins, & I don’t need to contact a custom developer, I just need to know how to add the above code in so it works outside of being logged in.

Thanks!

#2

Hi @tablufc88,

Thanks for writing in.

First, you can use this plugins below to insert your script js.

<script type='text/javascript' src="/wp-content/themes/webrollchild/js/ScrollTrigger.min.js"></script>

Next, insert your dom event listener in your Theme Options > JS.

document.addEventListener('DOMContentLoaded', function() {
      var trigger = new ScrollTrigger({
         toggle: {
	    visible: 'visfade',
	    hidden: 'invisfade'
	  },
         offset: {
            x: 0,
            y: 250
           }
});
});

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hello! Thanks for the reply.

I’ve actually tried it that way too already & the fade effect on scroll is not loading when I’m logged out of the WP admin area.

I have enqueued the script the usual WP way as follows:

Here you can see it loaded within the source code:

I also added the JS in question into theme options, global JS as you can also see in the source code:

So basically, it works when I add the code in which I posted originally, I can either load in the head or body & it works fine but only when logged in which is the problem. However, whenever I try to do it the normal way in the theme options, it doesn’t work at all.

Can you help me sort this because I have no idea where I’m going wrong! Much appreciated.

#4

Hi,

Upon checking I can see you have cloudflare installed.

It’s possible to implement a change, and not have it take place because a cached version of the page or various resources are loading instead of the latest version.

Make sure to clear your plugin cache and browser cache after adding your JS Code.

Thanks

#5

Hi Paul,

Don’t worry, it’s not Cloudflare. I’ve already tested clearing cache, browser history & cf cache.

#6

Hi,

In that case, would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!

#7

Yeah sure, thanks.
The amendments have been made in global JS & functions.php in the child theme.

Cheers

#8

Hi There,

The issue is caused by the page not loading the attribute data-scroll you placed in the div and it only loads if you logged in.

Here is the html if not logged in.

Here is the code when logged in.

Can you try transferring the HTML code from a Content Area Element to a Classic Raw Content Element and check if it fixes the issue.

Hope it works.

Thanks.

#9

Wow that’s actually worked. Looks like a problem with the “content area” element then!

Thanks for your help.

#10

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.