I am trying to avoid the conflict between the jquery 1.2.6 and latest version 1.11.3, boostrap.js:
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/custom.js'></script>
<script type="text/javascript">
$().ready(function() {
var autocm = jQuery.noConflict();
autocm("#search").autocomplete("php/getvalues.php", {
width: 383,
matchContains: true,
//mustMatch: false,
//minChars: 0,
//multiple: true,
//highlight: true,
//multipleSeparator: ",",
selectFirst: false
});(autocm);
});
</script>
<script type='text/javascript' src="js/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="js/carousel.js"></script>
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length-1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
If I enable
<script type='text/javascript' src="js/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="js/carousel.js"></script>
The autocomplete won't work.
the autocomplete won't work
My guess — and it has to be a guess, as you haven't told us anything about the autocomplete — is that it uses something from jQuery 1.2.6 that is no longer present, or perhaps just not quite the same, as in jQuery 1.11.3. All that the noConflict call you're doing does is protect your code within that ready callback; any code in the autocompleter that uses either $ or jQuery to access jQuery later, when the user does something, will be using v1.11.3.
The best course of action here is to not try to use two versions of jQuery in the same page. Very, very, very much second-best would be to edit the autocomplete to grab a local reference to the jQuery that's in effect as of when it loads, and continue to use that. (A well-written plugin would do that, but there are a lot of not-very-well-written plugins out there...)
That might be as simple as putting this at the beginning of the js/custom.js file:
(function($) {
var jQuery = $;
...and this at the end of it:
})(jQuery);
But again, that's a very distant second-best solution. The best thing to do is not use jQuery 1.2.6. At all.
Here is what i have done.....
<script type="text/javascript">
var autocm = jQuery.noConflict();
autocm().ready(function() {
autocm("#search").autocomplete("php/getvalues.php", {
width: 383,
matchContains: true,
//mustMatch: false,
//minChars: 0,
//multiple: true,
//highlight: true,
//multipleSeparator: ",",
selectFirst: false
});
});(autocm);
</script>
Working well enough.. just added no conflict method before the .ready(function(){
Related
Probably it could be duplicate question but I have tried every solution I found, I am newbie with imagesLoaded , can anyone please help to get rid out of it?
The scripts I have included is in following order -
<script type='text/javascript' src='{{asset('assets/includes/js/jquery/jquery-3.3.1.min.js')}}'></script>
<script type='text/javascript' src='{{asset('assets/includes/js/jquery/jquery-migrate.min330a.js')}}'></script>
<script type='text/javascript' src='{{asset('assets/js/imagesloaded.js')}}'></script>
<script type='text/javascript' src='{{asset('assets/js/imagesloaded.pkgd.js')}}'></script>
And the javascript code I have -
jQuery( function() {
/* ======= Masonry Grid System ======= */
var $container = $('.posts-masonry');
if ($container.length) {
$container.imagesLoaded(function() {
$container.isotope({
layoutMode: 'masonry',
transitionDuration: '0.3s'
});
});
}
});
Is there any other script I am missing? Please suggest.
I am using javascript and Jquery in same page.
Some thing is preventing JQuery from working properly
I tried using $jq = jQuery.noConflict(); it is not solving.
My code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/dropmenu.js"></script>
<script src="js/beaverslider.js"></script>
<script src="js/beaverslider-effects.js"></script>
<script>
$jq = jQuery.noConflict();
$jq(document).ready(function($){
$("#nav-one").dropmenu();
});
</script>
<script>
$(function(){
var slider = new BeaverSlider({
structure: {
container: {
id: "my-slider",
width: 1000,
height: 200
}
},
content: {
images: [
"images/banner01.png",
"images/banner02.png"
]
},
animation: {
effects: effectSets["fadeSet"],
interval: 4000
}
});
});
</script>
Problem
javascript code was image fade effect and jquery code was menu dropdown effect.
when menudrop down appears, i was not able to click the dropdown menu link and when image fades dropdown menu also fades.
Please help me to find soln.
After calling $jq = jQuery.noConflict(); $ is no longer a reference to jQuery.
In second script use either $jq or jQuery instead of $.
I have a page I am creating that needs to have a jcarousel and an accordion implemented in jquery.
here is the page.
http://www.ikeepsafe.org/template/
I can get each on to work individually but I can't get them both to work at the same time. Some help would be appreciated.
I did try to have the commands be in the same script element but that didn't work either.
Cheers,
James
This is the javascript I used for the carousel.
<script src="http://baijs.nl/tinycarousel/js/jquery.tinycarousel.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider-code').tinycarousel({ pager: true });
});
</script>
For the Accordion
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content",
});
});
</script>
May be jquery conflict issue . Use jQuery.noConflict() method or try wrapping the code like this:
(function($){
....
})(jQuery);
Check here for more info:http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
Try
$(document).ready(function () {
$('#slider1').tinycarousel({
pager: true
});
$("#accordion").accordion({
collapsible: true,
heightStyle: "content",
});
});
Fiddle http://jsfiddle.net/auv3y/
I am using one java script and one jquery in my html file in head tag,
but my problem both the scripts are not working, i have used one slide show script and one nav menu script, in this both only one is working , is there any specific order to write these scripts ,
please find the below script order i have used , i am getting only slideshow. please help me out .
<script type="text/javascript"> google.load("mootools", "1.2.1");</script>
<script type="text/javascript" src="Js/MenuMatic_0.68.3.js" type="text/javascript"
charset="utf-8"> </script>
<script type="text/javascript">
window.addEvent('domready', function () {
var myMenu = new MenuMatic();
});</script>
<script type="text/javascript" src="Js/jquery.min.js"></script>
<script type="text/javascript" src="Js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="Js/slides.min.jquery.js"></script>
<script type="text/javascript">
$(function () {
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
It looks like you have MooTools and jQuery loading on the same page which will work but you will have to replace the short hand jQuery function. jQuery uses $(function) shorthand for jQuery(function) and that shorthand notation could cause problems.
You will need to use the jQuery.noConflict() function anywhere jquery and it's plugins were using the $.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function () {
$j('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
i have a custom jquery for my site aswell as an lightbox query. But it seems i cannot get both to work the the same time. Its always 1 of them working, depending on the order they come in. heres the code
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function () {
$('a[#rel*=lightbox]').lightBox({
maxHeight: screen.height * 0.6,
maxWidth: screen.width * 0.6
});
});
</script>
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
/* Menu */
$("#menu li:last").css("margin-right", "0");
$("#menu ul.sub li:last").css("margin-right", "0");
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
$("#menu").hover(function() { }, function() {
$(".sub").fadeOut(200);
});
});
</script>
You have included the jQuery twice ..
Remove this line of code
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
Your line:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
Uses the single parameter call for hover() http://api.jquery.com/hover/#hover2
This was added in jQuery 1.4, and you are using 1.3.2.
Either:
Update your jQuery.
Or use the two parameter function:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
}, null);
That way the anonymous function will be called only on mouseenter, change the order of the params if you want it called on mouseleave.
If you want it to fade in/out:
$("#menu li#menues a").hover(
function() {
$(this).siblings(".sub").fadeIn(200);
},
function() {
$(this).siblings(".sub").fadeOut(200);
});
If you need to use the same function for both, while using jQuery 1.3.2 use:
function menuLinkHover(){
$(this).siblings(".sub").fadeIn(200);
}
$("#menu li#menues a").hover(menuLinkHover, menuLinkHover);
Enjoy!
Some scripts extend the jQuery object, it appears Lightbox is one of them.
By including a reference to the jQuery script twice, as the page loads:
the jQuery object will be added to the DOM,
then extended for lightbox,
then a new jQuery object will be added to the DOM without the extensions
so the script that depends on lightbox will not run.
Removing the second jQuery script tag should fix this.