How to link an external js file?

fatcatgraphics · February 25, 2018, 3:59pm

Hi, I have this javascript that Ive tried putting into the customizer but it wont work properly. Its somewhat working…
Id like to add it using FTP. Where would I place the file and how do I link it?

This is the js:

$.fn.makeItRain = function(){

		$(this).on('click',function(){

			var maxBills = 50;


			for (var i = 0; i < maxBills; i++){

			var random = $(window).width();

			var randomPosition = Math.floor(random*Math.random());

			var randomTime = Math.random() * 20;
			var randomSpeed = (Math.random()*20)+10 ;


			var bills = $("<span class='billsBillsBills'>")
				.css({
					left : randomPosition,
					top: '-150px',
					"-webkit-animation-delay" : randomTime + "s",
					"-webkit-animation-duration" : randomSpeed + "s"
				});

				$(bills).prepend('<img src="images/bill.svg" alt="a dollar bill">');


				$('body').append(bills);

			}; // end click function

		}); //end for loop

	}; //end make it rain fn.

AND THIS IS THE LINK:
`

`

TIA,
Rena

christian · February 25, 2018, 4:02pm

Hey Rena,

First, you don’t need to add the jQuery library because it is already included in WordPress.

For the rest of your scripts, the proper way of adding scripts in WordPress is by enqueuing them. Please see this article to learn how to do that.

Hope that helps.

fatcatgraphics · February 25, 2018, 5:16pm

Thank you… its starting to make a little sense. But do i put the js and css files that I downloaded into a file via FTP? if so what folder?

Thank you

ruenel · February 25, 2018, 7:39pm

Hey There,

You only need to upload the makeItRain.js file in your child theme’s folder in wp-content/themes/x-child/js/ and you may use the custom code from the reference link to attach the file to your site.

function wpb_adding_scripts() {
  wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/makeItRain.js', array('jquery'),'1.1', true);
  wp_enqueue_script('my_amazing_script');
}
  
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Please note that you no longer need jQuery because WordPress already load it in your site.

Hope this helps.

fatcatgraphics · February 27, 2018, 2:54pm

First off thank you for your help!! I added the above code to my functions.php file however it doesn’t seem to be loading.
This is my page: https://palilastudio.com/rain/

The bills according to the js are supposed to be all over the place, not neatly organized in rows like that. So it seems its not working. What I did so far is add that code to my functions.php. I added “bills” and “makeItRain” to the class of the section on my page. And I Added this css to my customizer:

span.billsbillsbills {
padding: 5px;
display: block;
position: relative;
z-index: 100;
-webkit-animation: sway 30s ease-out;
animation: sway 30s ease-out;
}

@-webkit-keyframes drop{
0%{
top:0%;
}

100%{
top: 100%;
}
}

span.coinsCoinsCoins{
padding: 5px;
display: block;
position: absolute;
z-index: 100;
-webkit-animation: drop 4s linear;
animation: drop 4s linear;
}

.bills {
position: static;
z-index: 0 !important;
}

.bills:after {
content: ‘’;
display: block;
padding:5px;
position: absolute;
z-index:0;
top:10px;
left:0px;
right:0px;
bottom:0;
pointer-events:none;
background-image: url(‘https://palilastudio.com/wp-content/uploads/2018/01/bill.svg’),url('https://palilastudio.com/wp-content/uploads/2018/01/bill.svg’);

-webkit-animation: sway 30s ease-out infinite;
animation: sway 30s ease-out infinite;

}

@-webkit-keyframes sway {
0%{
top:-20px;
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
}

3%{
margin-left: -2%;
-webkit-transform: rotateX(-80deg);
transform: rotateX(-80deg);
}
7%{
margin-left: 1%;
-webkit-transform: rotateX(-170deg);
transform: rotateX(-170deg);
}
10% {
margin-left: 2%;
-webkit-transform: rotateX(-230deg);
transform: rotateX(-230deg);
}
16% {
margin-left: 5%;
-webkit-transform: rotateX(-250deg);
transform: rotateX(-250deg);
}
22% {
margin-left: 3%;
-webkit-transform: rotateX(-280deg);
transform: rotateX(-280deg);
}

28% {
margin-left: 0%;
-webkit-transform: rotateX(-300deg);
transform: rotateX(-300deg);
}

35% {
margin-left: 3.5%;
-webkit-transform: rotateX(-310deg);
transform: rotateX(-310deg);
}

48% {
margin-left: 1%;
-webkit-transform: rotateX(-350deg);
transform: rotateX(-350deg);
}

58% {
margin-left: 3.5%;
-webkit-transform: rotateX(-310deg);
transform: rotateX(-310deg);
}

70%{
margin-left: 0.5%;
-webkit-transform: rotateX(-280deg);
transform: rotateX(-280deg);
}

83% {
margin-left: -2%;
-webkit-transform: rotateX(-230deg);
transform: rotateX(-230deg);

}

95% {
margin-left: 2%;
-webkit-transform: rotateX(-200deg);
transform: rotateX(-200deg);
}

100% {
margin-left: 3%;
top: 100%; }
}

What am I doing wrong??
TIA!!!,
Rena

thai · February 27, 2018, 5:03pm

Hi There,

I could see that you’re using the cache plugin.

Did you purge all the caches yet?

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

Link login to your site
WordPress Admin username / password

Thanks.

fatcatgraphics · February 27, 2018, 5:25pm

I just purged it. but that didn’t help.
Thank you, ill attach the username and password

friech · February 28, 2018, 3:52am

Hi Rena,

Thank you for the credentials but please provide us FTP credentials as well, the site is not loading the makeItRain.js at all.

This is the script that you’re trying to integrate http://sarahlesh.com/makeItRain/ yes? Actually, even if you successfully enqueue the script and makeItRain.css it would not still work because there is a modification you need to do on the script.

Thats depends on the CLASS animation, try the class billsBillsBills or raining

Thanks,

fatcatgraphics · February 28, 2018, 2:32pm

Yes, correct that is the script I’m trying to integrate. I tried billsBillsBills and raining but that didnt work. I had a feeling it might require a modification. What program is used to create the effect as she explains in that link? I gather its not wordpress?? Is it like dreamweaver or studio code? I’m trying to wrap my brain around the building of everything.

I’ll attach my FTP. As always, I appreciate the help.

friech · March 1, 2018, 2:38am

Hi There,

Thank you for the credentials, I was able to successfully enqueue the makeItRain.js on your site and part of that issue before was your caching/minifier plugin (W3 Total Cache), deactivating and clearing the JS minifier feature and modifying the wp_enqueue_scripts function resolves that issue. You can now see the raining effect when you click the character on the test page I’ve created (see the link below).

However, like I said above you need to modify the script and/or the CSS of this library to have the effect that you’re after. Regretfully, we can not provide support for 3rd party scripts with that said it would ultimately be your responsibility to take it from here.

Don’t forget to clear your caches.

Thank you for understanding,
Cheers!

system · March 11, 2018, 2:38am

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