Develop Reference

Automate on Scroll (aos) doesn't load in Wordpress

I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.

Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>

Bootstrap & Wordpress - Nothing happens

So I'm trying to use a Bootstrap Modal, and I want it to appear after a click (onclick method).
Right now I have this
$(document).ready(function(){
$("#cancelPObtn").on("click", function(){ $("#error-dialog").modal();});
});
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<!-- BELOW ON MY WORDPRESS POST -->
Yes, cancel it
<div class="modal hide fade" id="error-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
<!-- I HAVE THE JAVASCRIPT ON MY POST TOO, USING <script type="text/javascript"> -->
So, it appears to be working, everywhere, but on my Wordpress post I can't make it work! I've added the JS + CSS Files from Bootstrap on my header.php
What could be the issue here?
Thank you!

You should read up on enqueuing scripts and styles in WordPress. WordPress has it's own way of including the script files and the stylesheets that you should familiarize yourself with. A lot of times, what ends up happening is either the files aren't included correctly, or in the wrong order, or without the dependencies they might need. Adding the links directly to header.php is strongly discouraged.

In addition to using wp_enqueue_script as recommended above, I would ensure you're writing non-conflicting jQuery, as WordPress plugins sometimes come bundled with their own JavaScript libraries, which can cause issues.
See below:
<script type="text/javascript">
jQuery(function($) {
$('#cancelPObtn').click(function() {
$('#error-dialog').modal();
});
}
</script>
Also, WordPress is probably calling its own instance of jQuery, so you can use window.jQuery to test before including your own, like this:
<script type="text/javascript">
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.7.2.min.js"><\/script>');
</script>
Resources:
jQuery.noConflict()
HTML5 Boilerplate

Jquery "$.uniform is undefined" error

I am using uniformjs to style some html element but when i try to update an element such as a check box using
$.uniform.update('input[type=checkbox]');
I get the error
$.uniform is undefined
any one else have an idea how to solve this?
I have both jQuery and the uniform.js added to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.uniform.min.js" type="text/javascript" charset="utf-8"></script>
What's weird is this worked when it was a regular HTML page and stopped working when i made it into a ASP.NET page and added custom form validators. Perhaps there is some clash?

Reason for this error is browser cant identify $.uniform which can be because of following two reasons:
You have not included uniform.js file to your page, check if a similar looking lines is present in your markup.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
You are referencing it before its been loaded (have you included it at the end of the page, after the markup?)

You have to load all your dependencies and the current library itself to make it work.
For your css:
<link rel="stylesheet" href="uniform.default.css" media="screen" />
For your javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
Please, check this JSFiddle that I've build for you, showing uniformjs working.

Using Joomla's baseurl to import javascript

I am trying to use Joomla's basurl to link to my javascript files like this:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/js/music.js"></script>
My code highlighting though seems out of whack and I am wondering if anyone knows how I should be writing this please?
if I use it in the css link everything looks fine there:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/music/css/nav.css" type="text/css" />
Many thanks!

From looking at your include css and include js code it seems like your template is called music.
Therefore, you need to have your template's name as part of the path. Instead of /templates/js/ use /templates/music/js/
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/music/js/music.js"></script>

JavaScript libraries conflicting with each other

I'm working on a modeling website for my girlfriend and she wants a large slideshow as background on the website. I used the JonDesign Gallery for that, which works nicely for this purpose and is relatively light-weight.
Now, for the contact form I'd like to use something Lightbox/Slimbox style. Slimbox works with Mootools, which is also used by JD Gallery. Unfortunately, Slimbox seems to conflict with JD Gallery and I can't figure out why. I checked the CSS for conflicts, but there are no elements ID'd or class'd twice. I looked at the code and couldn't immediately spot a conflict. I'm sure I missed something. I can't figure it out because I don't have much experience with JavaScript let alone Mootools or Slimbox.
Here's my (relevant) code.
Head
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/mootools.js"></script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/slimbox.js"></script>
Body
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
delay: 6000,
embedLinks: false,
showInfopane: false,
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGalleryBox">
Contact her
</p>
</div>
<div class="content" style="z-index:1;">
<div id="myGallery">
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<img src="images/pic1.jpg" class="full" />
</div>
</div>
</div>`
As far as I can tell, the conflict is between these lines:
<script type="text/javascript" src="scripts/mootools.js"></script>
and
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
in the head.
I'm using unmodified code from JD Gallery and SlimBox. Any help would be much appreciated!

The only problem I can see is an extra comma at the end of the gallery options:
var myGallery = new gallery($('myGallery'), {
...
showInfopane: false, <--- Right Here
});
At least Firefox and Chrome ignore the trailing comma, but it's a syntax error in Internet Explorer. After I fixed that, your code worked fine for me in Chrome, Firefox, and IE.
Like Anurag mentioned in the comments, you are including MooTools twice. It didn't cause any problems for me, but you can remove the scripts/mootools.js script, and it should still work.

In JQuery you can choose a new name for the JQuery function to avoid conflicts with other libraries, e.g. Prototype. Mootools might support something similar.

Alright, it's working now. Here's what's going on: I removed the extra comma as per Matthew Crumley's suggestion (+1). Per Anurag, I checked Chrome's developer tool (I completely forgot about that - working late = bad.) It didn't show any errors. Then I redownloaded the SlimBox files and tried the demo, which didn't work. Then I noticed that SlimBox had two folders with its SlimBox JS files: js and src. js is the correct folder with the correct library, src doesn't work for whatever reason. I changed the website to use the file from the js folder and it's now working.
Bottom line: No script conflict after all, SlimBox was just distributed in a weird way. Thank you everybody for your help!

I faced the same issue when I had to use two versions of jquery in the same page.
<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);
</script>
And then you can reference your different version of jquery by using something like this :
var $noborders = $jq('.noborders');
I hope something like this will solve your issue too.