Develop Reference

Conflict between jquery and bootstrap.js

I am having some problems with multiple js files. When I tried adding the lightgallery plugin to a page I noticed it didn't work for some reason. After a long while I found out it was because of bootstrap.js , when I remove it the lightgallery works, but now my fixed menu stops working.
So depending on what file I comment out, different things start and stop working. I would like that everything works with both files.
My list of js files:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="js/appear.js"></script>
<script type="text/javascript" src="js/featherlight.min.js"></script>
<script type="text/javascript" src="js/jquery.shuffle.modernizr.min.js"></script>
<script type="text/javascript" src="js/spsimpleportfolio.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/rev-tool.js"></script>
<script type="text/javascript" src="js/revolation.js"></script>
<script type="text/javascript" src="js/count-down.js"></script>
<script type="text/javascript" src="js/parallex.js"></script>
<script src="js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
The errors I get in the console:
When I click on the first error it points to this part:
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
I added my bootstrap.js file here.

What order should my Javascript be in?

So I recently transfered over my files from one server to another. For some reason on the new
server I am getting odd errors in chrome under the network tab such as:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: autoResize is not defined
Some pages even stopped working!
I was messing around with the order of my script links.
Here is my current order:
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
How should I order this and is there any way to make it so the order doesnt matter?
Thanks I have no idea what to search for this so I am stuck.
EDIT: New order. Less errors. http://prntscr.com/3y98gt
<!---JQuery/Javascript-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>

1rst place: JQuery
2nd place: JQuery Migrate
3rd place: JQuery UI
4th place: Bootstrap
Order of the rests are less important, but pay attention to don't call function before is loading by the script tag, eso
Another advice: separate CSS and JS files. It's a bad idea to mix everything.
Pay also attention: for performance reason, it's better to load JS at the end of the page. But CSS have to take place in the head section.

For starters, every script which uses jQuery should be loaded after your jQuery include. So, putting jquery-1.11.1.min.js on top should be a quick fix.

JQuery conflicts with bootstrap

I am trying to run some JQuery in my website using bootstrap that is carousel slide and lightbox for gallery album but both of them do not work...
I have tried to apply noConlict() many times but it still doesn't work.
Here the scripts I have
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" charset="utf-8">
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
var jq-$.noConflict();
jq(document).ready(function(){
jq('#mySlide1').carousel({
interval:3000
});
jq('#mySlide1').carousel('cycle');
jq("[rel^='lightbox']").prettyPhoto();
});
</script>

Replace all your current code with this:
<script src="js/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
// and the Google analytics script
You just need one version of jQuery here. I'd suggest you to use CDN link from Google for your jQuery

you have like 4 instances of jquery on the page!! just use one instance!!
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script src="js/bootstrap.min.js"></script>

what is the squence of jquery files

i have these jquery files included but some plugins work and some are not when i change squence then some plugins work but other give error. Please tell me best squence of these files. Thanks
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>

This would work.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
Also note that you do not need to include normal and minified versions (*.min.js). And since jquery-ui.js depends on jquery core code, it could be kept down to jquery core.
Also please note that you may not require two or more versions of a jquery core thing as it might not make any sense. Instead if you really wish to have some recently added functionality, please make your own custom file by going to jquery custom build at this link.

Just because a version of jQuery requires a certain version doesn't mean it won't work with a later version.
I would try to remove:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
I would also completely remove this since there's no way for a plugin to work after you remove jQuery as a global.
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
Also, you're free to remove the type="text/javascript" from your script tags, no issue with it but it's not needed.
I'd put your site functions after all the other scripts are include as well, and I'd put jquery.cookie.js before the ui stuff, just as preference.
So, I'd end up with:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/urdutextbox.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/jquery-ui-sliderAccess.js"></script>
<script src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>

How to add 3 sets of JavaScript in the header

I'm trying to run three sets of JS code in my header tag, however, I can only seem to run two at a time with the following code (see below)...
(this code below works perfectly fine on it's own)
<link rel="stylesheet" href="http://www.frhdesigns.com/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/lightbox.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
...Now when I add the third set of code to the mix (3rd set of js code below) which is a code for fading images, I can't seem to get all three to work together when I view the page. I know JS is all about order...but I don't know the order...
<script type="text/javascript" src="_fade_in/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="_fade_in/js/custom.js"></script>
thanks!
ok. where should I place this line of code
<script type="text/javascript" src="_fade_in/js/custom.js"></script>
**in the following sequence?**
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="_fade_in/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>

Judging by the names of your files, it looks like you are loading jQuery twice.
<script type="text/javascript" src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.min.js"></script>
<script type="text/javascript" src="_fade_in/js/jquery-1.3.2.min.js"></script>
Get rid of the second jQuery include and update the first to the particular version you need (if it isn't already).

You need to enable jQuery.noConflict(); for jQuery.
<script type="text/javascript">
jQuery.noConflict();
// Use jQuery instead of $
jQuery(document).ready(function(){
jQuery("div").hide();
});
// prototype codes
// scriptaculous
</script>