Develop Reference

How do I force jQuery to load first?

I am trying to add bootstrap-select to my Flask app and I keep running into the error "TypeError: $(...).selectpicker is not a function". Everything I've read says this only occurs if you load jQuery again after loading bootstrap-select.js, so I went through and cleaned up my scripts, ensuring that jQuery was being loaded before all my other JS scripts, like so:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
However, I was still getting the same problem. I decided to take a look at the order of loading in the chrome developer tools window, and now I think my problem is this: jQuery is being queued for loading before bootstrap-select, but it's not actually starting the download until after bootstrap-select has already finished. I suspect this is because of the difference in size between the two.
Is there any way I can force my other scripts to delay loading until after jQuery has already loaded? Or if I figure out how to cache a copy of jQuery in my static directory, will that help?
Edit: Wow, okay, I got a lot of comments on this! To try and clarify as much as possible, I'm just going to make some notes:
After thoroughly checking all my scripts, I can confirm that only one copy of jQuery is being loaded.
This is not an https page, I'm running it locally on a Flask development server.
I checked the bootstrap-select url I have in my code and it is the correct one. Sorry, I'm not sure why it left out the dash when I was copy-pasting. I have corrected the question accordingly.
I have been using the Network tab in chrome's dev tools to check loading successes/times.
I moved my jQuery to the very beginning of the file to ensure it would load first, and I can now confirm it is finished loading before bootstrap-select loads.
Despite all this, I'm continuing to get the same error, so if anyone has other suggestions I would appreciate them. I'm completely out of ideas at this point.

You should put defer at the end of both script tags, so they are loaded in order no matter what, like this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>

Try changing the URL for your bootstrap select library to:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js

I have the solution and it's dumb as heck.
I was adding my scripts to the same place the previous developer added theirs, in the base template that all my other templates extend. The thing is, they added theirs to the end of the page, after the body tag was closed (presumably to make page loading faster). The little bit of jQuery which was using selectpicker was in the body, and was thus trying to load the function prematurely.
Thanks for all your answers!

Elements of the jQuery scripts work when going back to a page on the browser but not on refresh

I am using bootstrap script, mixitup filtering and owl carousel on a SharePoint page. For example on the owlcarousel the data shows up but the actual carousel function does not work. If i leave the page and then go back -1 everything works. It is the only time it works. When I refresh or reload it goes back to the original state.
On the mixitup filtering a similar issue happens. The data does not load initially like it should. When i leave the page and go back then it loads and functions properly.
Any ideas? Something with caching and loading order of scripts? Why would it work when going back?

Try to load the scripts in this order in the end of your body:
jQuery,
Bootstrap,
owlcarousel
Then your custom Script which initiates any own functions

After weeks of searching and deciding to post the question I found my answer so I wanted to make sure i shared.
I found a post from Chris Coyier on how to run JavaScript only after the entire page has loaded... THAT WAS IT! Once i placed my script in this it fixed my issue.
$(window).bind("load", function() {
// code here
});

fullPage.js not scrolling / no scroll possible

I've been having this issue with fullpage.js not allowing me to scroll properly. Please see the issue at https://www.rewardslive.com/test
I have jQuery 1.10 loaded onto the site already, but the javascript code that is in question here is inline on the page, after along with the initialization code which is an extension of the document ready with no conflict in the rewardslive.js inline script.
Going to the page does not pose an issue, but when i try to scroll down, the url bar changes to https://www.rewardslive.com/test#secondPage - but there is no actual scrolling downward and no new content is updated. I want to keep the header as seen, in there for all intents and purposes.
Is there something I am missing here? All i want is the basic fullpage, 'scroll down function to see more' feature.
Thanks again,
George

The javascript console shows this error:
Uncaught TypeError: Object # has no method 'easeInQuart'
Which means you are not importing the jQuery UI library which is needed by the plugin as specified in the documentation.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Also, you have problems in your HTML markup as you can see highlighted in red here.
If you do not want to include the whole jquery UI library for just that single effect, you can use the easings file provided by fullPage.js that includes all of the jquery UI easings.

Colorbox not a method of object

I am fixing a bug on leefest.org.uk and I cannot get Colorbox working. Multiple people have worked on this project, so I apologise for the mess.
Their are multiple plugins with multiple document ready functions.
As far as I can work out:
jQuery is being loaded before colorbox
Colorbox is being loaded before the colorbox call
The colorbox call is within a document ready function
Anyone?

This could happen if jQuery was being loaded twice. The first version of jQuery would be extended with the colorbox plugin. Including jQuery again would replace the original instance, and would not include colorbox.
Most of the time I see this happening is when people load ajax content that includes a script element that sources the jQuery library, or they include a script in their main document that they do not realize has had jQuery included with it.

jQuery tabs is loaded but not working in WordPress

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!

I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.

Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.