We Keep Coding

JQuery conflict not working

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(){

Javascript and jquery in same page conflict

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 $.

Getting two jquery elements (jcarousel and accordion) to work on the same page

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/

SmoothDivScroll jQuery Plugin not working if JS files are loaded asynchronously

I'm using SmoothDivScroll and it was working great until I tried to load all the JS files asynchronously. I use my own async loading pattern using Ryan Grove's Lazyload.js but to be sure, I also tested with Modernizr's load/complete pattern and got the same result. I tested with a copy of the quick demo part from SmoothDivScroll's homepage and just added Modernizr. Without Modernizr, it was fine, but when I added Modernizr and its load/complete pattern to the head, and commented out all the JS before the end body tag, it wasn't working anymore. When you hover over the right arrow nothing happens, while hovering over the left causes the images to flicker. It should work the same either way. The Moderizr block should be equivalent to all the ones below it:
<script type="text/javascript">
Modernizr.load([ {
load: [
'//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js',
'/js/jquery-ui-1.8.23.custom.min.js',
'/js/jquery.mousewheel.min.js',
'/js/jquery.kinetic.js',
'/js/jquery.smoothdivscroll-1.3-min.js'
],
complete:
function () {
$(document).ready(function () {
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
});
}
}
]);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="/js/jquery.kinetic.js" type="text/javascript"></script>
<script src="/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
});
</script>

I have modified a code segment as below
complete:
function () {
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
}
}
Attaching ready event handler to the document on complete of Modernizr won't work as the document is already loaded and parsed by the browser.

2 scripts on the same page breaks

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.