I was using jQuery 1.6 before. Then, needed a slideshow which works with jQuery 1.7.
Both versions are conflicting on my HTML page. Any solution to avoid the jQuery conflicts would be appreciated in the following code...
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
$(document).ready(function(){
$('#nav ul').superfish();
packages_slider();
testimonials_slider();
set_datepicker();
set_select();
set_captcha(true);
validation();
jquery_miscellaneous();
});
</script>
<script src="js/jquery-ui.1.8.16.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/sliders.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/pdate.js" type="text/javascript"></script>
<script src="js/jquery.datepick.pack.js" type="text/javascript"></script>
<script src="js/jquery.selectbox-0.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/miscellaneous.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#basic-slider').advancedSlider({width: 1200,
height: 600,
}
});
});
</script>
<script type="text/javascript" src="js/jquery.transition.min.js"></script>
<script type="text/javascript" src="js/jquery.advancedSlider.min.js"></script>
Don't use both versions. Just upgrade to 1.7 1.8.
There are dirty tricks to get this (partially) working, but it's asking for trouble, a lot of maintenance hell, and twice the amount of code to be downloaded to the client. You really don't want to walk that road.
You need to read up on how $.noConflict() works. The first $.noConflict() you call resets the $ to undefined, meaning the first $(document).ready() will error, as $ is not the function you expect.
If you keep the second $.noConfict(), after you've called it you'll have the following;
$ will point to jQuery 1.6.4
jQuery will point to jQuery 1.7.2
Related
In head tag, I have these scripts
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-3.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-min.js" type="text/javascript"></script> //jquery-ui-1.13.2
<script src="js/scrollpane.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/bulk-import.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/copypaste.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/main.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/menubar.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
There were many errors, I minimized it to 3 now. removed jquery-ui-1.13.2 normal script and added minified. It reduced looping. Also removed tooltip js, also added setTimeout() to load jquery properly. But still facing these issues.
I believe my website is having a jquery conflict problem. I'm running the Camera (jQuery slider) which uses jQuery v1.7.1, and the Simple Instagram Fancybox which uses jQuery 1.11.0.
I'm loading the Instagram script in a php include file that will load if coded into the page but it will cause my slider to not load.
(Camara Slider Javascripts)
<script type='text/javascript' src='camera/scripts/jquery.min.js'></script>
<script type='text/javascript' src='camera/scripts/jquery.mobile.customized.min.js'> </script>
<script type='text/javascript' src='camera/scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='camera/scripts/camera.js'></script>
(Instagram/Fancybox Javascripts)
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="fancybox2/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/simpleInstagramFancybox.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
If you wouldn't mind please write the code in full with all tags and let me know where exactly to put each script, I would appreciate it.
My website is http://www.deatherageproductions.com, please feel free to view the source and http://www.deatherageproductions.com/instagram.html is my instagram script that I'm trying to run as an include file on my main page with the slider.
you are including the jquery lib twice,
change it to this order
(Camara Slider Javascripts)
<script type='text/javascript' src='camera/scripts/jquery.min.js'></script>
<script type='text/javascript' src='camera/scripts/jquery.mobile.customized.min.js'> </script>
<script type='text/javascript' src='camera/scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='camera/scripts/camera.js'></script>
(Instagram/Fancybox Javascripts)
<script type="text/javascript" src="fancybox2/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/simpleInstagramFancybox.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
If you require both versions use $.noConflict
<script>
var jQuery_1_7_1 = $.noConflict(true);
</script>
Like so:
<script type='text/javascript' src='camera/scripts/jquery.min.js'></script>
<script type='text/javascript' src='camera/scripts/jquery.mobile.customized.min.js'> </script>
<script type='text/javascript' src='camera/scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='camera/scripts/camera.js'></script>
<script>
var jQuery_1_7_1 = $.noConflict(true);
</script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="fancybox2/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/simpleInstagramFancybox.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
Everything above the $.noConflict line will use 1.7.1
Here's the jQuery Docs on .noConflict
Also, per your comment, from your page, if this needs to use that first version of jquery, change it to this:
<script>
var jQuery_1_7_1 = $.noConflict(true);
</script>
<script>
jQuery_1_7_1(function(){
jQuery_1_7_1('#camera_wrap_3').camera({
height: '56%',
pagination: false,
thumbnails: true,
imagePath: 'camera/images/'
});
});
</script>
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>
When I include the enhance.js plugin it makes a conflict with other jquery plugins, such as UI jquery plugins
I can't use the date picker functions for example .
what is the possible solution ?
From documentation: http://api.jquery.com/jQuery.noConflict/
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
And/or you can use aliasing here:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
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>