Javascript code works in Cornerstone, but not when viewing page normally

Support
#1

I’ve been trying to include a small JS code snippet in a page on my website using the content JS function in Cornerstone, and bizarrely, the code works as intended within Cornerstone, but not once I view the page on the site. I’ve tried a couple hours of troubleshooting to no avail: I’ve cleared my browser cache and website cache, turned every plugin off and on again (the only plugins I have installed are the ones that came with X Theme, Yoast, Duplicate Post, and Smush), the browser console isn’t throwing any errors, and the code is appearing in the page source correctly. I also tried putting the code in an external .js file and enqueueing it in functions.php, but no luck there either.

Here’s the page on my site. What should be happening is that some of the fruits in the image spin as you scroll up and down the page. For now, they appear static.

Here’s my javascript code. This code needs 2 jquery scripts to run correctly (also pasted those in the pastebin for reference), but they seem to have been successfully enqueued. The only code that I implemented with the JS tool in Cornerstone was the contents of the 3rd script tag.

Any ideas? Happy to provide more details if you need them.

Thanks much in advance!

#2

Hello Maddie,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look how you have enqueued and your page set up?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

#3

Hello Maddie,

Thanks for providing the information. Regretfully we haven’t check your site because there is an on going error 500.

Request Timeout
This request takes too long to process, it is timed out by the server. If it should not be timed out, please contact administrator of this web site to increase 'Connection Timeout'.

Please contact your hosting provider to resolve this issue.

Kindly let us know how it goes.

#4

Hi Rue, I think the error 500 should be resolved now – my host was having some issues late last week.

#5

Hi There,

First, you have to setup a child theme to enqueue the JS library:

After that add this code under functions.php file locates in your child theme:

add_action( 'wp_footer', 'print_custom_scripts' );
function print_custom_scripts(){
	?>
	<script type="text/javascript" src="/public/js/jquery.easing-1.3.js"></script>
	<script type="text/javascript" src="/public/js/jquery.scrollTo-1.4.2.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
		    $(window).scroll(function() {
		        var offsetR = $(window).scrollTop();
		        offsetR = offsetR;
		        offsetL = -offsetR;
		        $('.rotate-R').css({
		            '-moz-transform': 'rotate(' + offsetR + 'deg)',
		            '-webkit-transform': 'rotate(' + offsetR + 'deg)',
		            '-o-transform': 'rotate(' + offsetR + 'deg)',
		            '-ms-transform': 'rotate(' + offsetR + 'deg)',
		            'transform': 'rotate(' + offsetR + 'deg)',
		        });
		        $('.rotate-L').css({
		            '-moz-transform': 'rotate(' + offsetL + 'deg)',
		            '-webkit-transform': 'rotate(' + offsetL + 'deg)',
		            '-o-transform': 'rotate(' + offsetL + 'deg)',
		            '-ms-transform': 'rotate(' + offsetL + 'deg)',
		            'transform': 'rotate(' + offsetL + 'deg)',
		        });
		    });
	    });
	</script>
	<?php
}

Please change the /public/js/ directory to the correct path.

Hope it helps :slight_smile:

#6

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