Docs

[blueoaks]

Hello,

I am experimenting with adding scrollmagic.js site-wide to my site. I can only get it to work when I add the script tags in-page to a raw code element via Cornerstone. When I try to enqueue via functions.php I get nothing.

I know you dont support third party plugins, but can you at least check my functions.php syntax? The script works. My questions is how to get it working with X/Cornerstone site wide.

My site is test site

My php (which I adapted from another forum thread) is:

add_action('wp_footer', 'embed_script_before_closing', 99999 );

function embed_script_before_closing () { ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script> 
<?php }

Thanks!

(I am running current version of WP, X & cornerstone)

[blueoaks]

This reply has been marked as private.

[Rupok]

Hi there,

As you are trying to load multiple scripts, you can follow this thread – https://community.theme.co/forums/topic/adding-custom-js-scripts-multiple/#post-834685

Cheers!

[blueoaks]

Thanks for this reply. I have carefully read the thread you linked to and attempted to apply the solution there to my functions.php file, but it is not working:

function load_custom_js() {
	wp_enqueue_script( 'TweenMax', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js' );
	wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js' ); 
	wp_enqueue_script( 'gasp-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js' );
	wp_enqueue_script( 'custom-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js' ); 
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

Can you see anything amiss in my code?
I (obviously) dont know much about php yet, but I dont see anything wrong with this code.

Just to review: these scripts work when I add them via a raw code element in an individual page, but when I try to enqueue them in functions.php, the front end effect disappears.

So my question is not with troubleshooting the scripts, but with how to integrate them into X.
Thx

[Darshana]

This reply has been marked as private.

[blueoaks]

Yes I see that as well, which is all the more puzzling to me. And yes I’ve cleared my cache many times.

I just discovered that when I add the scripts to the page directly via a raw code element, it only works if I include a script for jquery, like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script> 

I created a page here to demo this so you can see the effect working. Without the jquery script I get nothing on this page. (I thought jquery was already included in X-theme and therefore not needed when adding scripts that are dependent on it?)

However, when I take the above scripts and convert them to the enqueue style of adding scripts via functions.php, even with the additional jquery script, I get nothing, despite, as you say, the scripts are visible upon inspection:

// Additional Functions
// =============================================================================

function load_custom_js() {
	wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' );
	wp_enqueue_script( 'TweenMax', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js' );
	wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js' ); 
	wp_enqueue_script( 'gasp-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js' );
	wp_enqueue_script( 'custom-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js' ); 
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

This page doesnt have the scripts in the raw code element but does have the scripts added via functons.php – and yet it doesnt work.

[Lely]

Hi There,

By default, jquery script was added on
On this page:http://181.224.136.148/~blueoaks/blueoaks.church/ I got this error:

Uncaught TypeError: $ is not a function
    at 181.224.136.148/:249

Please update the script to from your customizer to this:

      	// init controller
jQuery(document).ready(function($) {      	
  var controller = new ScrollMagic.Controller();

  // build Tween
  var fadeIn = new TweenMax.to('#block1', 0.5, {
    opacity: 1,
    color: 'white',
  });

	// build scene
	var whenInContainer = new ScrollMagic.Scene({
    triggerElement: '#container1',
    offset: 250
  })
  .setTween(fadeIn)
  .addIndicators()
  .addTo(controller);
  });    

Hope this helps.

[blueoaks]

thank you Lely, this is resolved.

my js was working in codepen but now i see you can’t simply cut/paste from there without adjusting for the different environment.

i appreciate the help.

[Thai]

If you need anything else please let us know.

[Rahul]

Glad we were able to help you.

Feel free to ask us again. 🙂

Thanks.

[blueoaks]

Follow up question: the code you gave me to add my scripts via functions.php is working fine, but the scripts are being added to the header rather than to the footer. Can you provide the correct code to move this to the footer please?

// Additional Functions
// =============================================================================

function load_custom_js() {
	wp_enqueue_script( 'TweenMax', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js' );
	wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js' ); 
	wp_enqueue_script( 'gasp-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js' );
	wp_enqueue_script( 'custom-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js' ); 

}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

Is it as simple as changing add_action( ‘wp_enqueue_scripts’, ‘load_custom_js’ );

to

add_action( ‘wp_footer’, ‘load_custom_js’ );

?
thx again

[Christian]

It loads in the header by default. Please add the parameters you need (see https://developer.wordpress.org/reference/functions/wp_enqueue_script/). For a non-technical solution, you might want to use a plugin like this https://wordpress.org/plugins/header-footer/.

Thanks.

[Author]

Posts