I've seen the posts about the no conflict but I'm not very code savvy and can't figure it out alone. I'm having trouble making two libraries work together.
At the top I have the 1.9.1 library which controls a news ticker, and a carousel. Near the bottom there is a library 1.6.1, which controls a Dribbble feed. If I remove 1.6.1 everything but the dribbble feed works, and if I remove the 1.9.1 the dribbble feed is the only thing that works. I uploaded the website for you guys to check out. If you could edit my code to make it work that would be amazing, I don't have much knowledge of jquery.
This version has a working dribbble feed at the very bottom
http://michaelcullenbenson.com/MichaelCullenBenson.com/index.html
and this version has a broken feed and everything else works.
http://michaelcullenbenson.com/MichaelCullenBenson.com/index2.html
Help would be AMAZING as the dribbble feed is the last element I'm trying to finish on my homepage and I'll be able to move on.
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 600,
timeout: 6000,
type: 'random',
containerheight: '1em'
});
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="utilcarousel-files/utilcarousel/jquery.utilcarousel.min.js"></script>
<script src="utilcarousel-files/magnific-popup/jquery.magnific-popup.js"></script>
<script src="js/responsive-nav.js"></script>
<script>
$(function() {
$('#fullwidth').utilCarousel({
breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
mouseWheel : false,
rewind : true,
autoPlay : true,
pagination : false
});
$('#fullwidth2').utilCarousel({
breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
mouseWheel : false,
rewind : true,
autoPlay : true,
pagination : false
});
});
</script>
<script>
$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#aboutarea").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#aboutarea').css("background-position", newvalueX+"px "+newvalueY+"px");
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dribbble.js"></script>
<script type="text/javascript">
$(function () {
$('#user').dribbble({
player: 'MCBDesign',
total: 1
});
});
</script>
First and foremost, remember that it is never recommended to use two seperate versions of jQuery on the same page. However, if you absolutely have to, you can use the method below to make it work.
On to the explanation:
It looks like you do not quite grasp how jQuery no-conflict works.
The idea of no conflict is not as simple as loading one version of jQuery along with its scripts, then including another version of jQuery and its scripts.. its easiest to assign the older version its own "namespace" (which is really just a huge function) while letting the newer version use the default "namespace" (which is jQuery or $)
NOTE: jQuery normally takes on the "namespace" of $, which is why you see lines of code like this: $.each or $("#selector") instead of jQuery.each or jQuery("selector")
NOTE: remove the spaces in < script > in the code below (SO does not like script tags apparently)
To dive into your specific case, you need to load jQuery version 1.9.1 first as you would normally:
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script > (You should really load this from google cdn, here is why)
Then, include the older version of jQuery, 1.6.1.
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" >< /script >
After that comes the noconflict part. Include a one line script as follows:
< script > var $j6 = jQuery.noConflict(); < /script >
This will set the 1.6.1 version to the $j6 "namespace" and hold the 1.9.1 version in the normal $ "namespace" which will allow you to target the specific version like so:
$j6('#user').dribble() and $('#news').innerfade()
Now you should have 2 seperate versions of jquery running side by side.
You may need to do a mass find/replace on the dribble plugin (and any other plugins using the 1.6.1 library).. replacing all instances of jQuery (or $) with $j6.
Note this may not be the absolute best solution.. and I am no expert in no-conflict, but it has always worked for me.
Related
My website used to use jQuery 1.3.2, now I got courage and time to update it to jQuery 1.11.1 but still I have some problems.
The function bellow used to work but not anymore.
Anyone could help with it?
In scroll down when -user or admin- write a message.
I have added the jquery-migrate-1.2.1.min.js file also already.
The scroll did not run at all. It is halted on top.
<script type="text/javascript" src="'+PATH_xxx+'js/jquery.min.1.11.1.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-ui-11.js"></script>
function ajax_message() {
$.post(BASE_URL+'chat/ajax_message', {}, function(result){
$("#mydiv").empty().append(result);
var count_p = $("#mydiv p").length
if ($('#roll-auto').attr('checked')) {
$("#mydiv").attr('scrollTop', count_p * 1500)
}
});
}
In jQuery 1.11.1 scrollTop isn't an attribute instead it's used as a function $().scrollTop(positionOnPageToMoveTo);
So just change:
$("#mydiv").attr('scrollTop', (count_p*1500))
To:
$("#mydiv").scrollTop(count_p*1500);
Have a requirement to load custom Javascript on a page after it has finished loading i.e. using a third party tool we get to execute on live pages on the website after the page loads.
Coming to the issue now, the page has a lot of Javascript dependent elements which have been coded using jquery version 1.6.2. The runtime script that I need to execute needs jquery version 1.10.x. See code below.
$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
As soon as the first line of code is applied, the original functionality on the page breaks because of some conflict of the existing code with Jquery version 1.10.x.
So, I tried using noConflict as suggested on other questions like this :
$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
var $j = jQuery.noConflict(true);
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
In addition, I changed the file 'mycustom.js' to use $j instead of $ for jquery. But I still have the same problem. How do I prevent the JQuery 1.10.x from breaking the existing page.
Thanks in advance.
[EDIT]
Using Austin's suggestion, was able to tweak the timing of the libraries getting loaded. Below code works now.
var $jQuery1_6_2 = jQuery.noConflict(true);
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
setTimeout(function(){
$jQuery1_10_2 = jQuery.noConflict(true);
$ = $jQuery1_6_2;
jQuery = $jQuery1_6_2;
//Logic to use Jquery 1.10 using '$jQuery1_10_2'
}, 1000);
Try no conflicting the 1.6.2 then loading up the new version, then reseting the reference to $ to 1.6.2
var $jQuery1_6_2 = jQuery.noConflict(true);
(function($) {
$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$jQuery1_10_2 = jQuery.noConflict(true);
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
})($jQuery1_6_2);
$ = $jQuery1_6_2;
then in your script file
(function($){
})($jQuery1_10_2);
I'm trying to run a plugin on CS Cart site which only allows jQuery 1.7+ http://owlgraphic.com/owlcarousel/ is the plugin i'm using.
I've found a snippet of code on another ticket, which allows to run two version of jQuery using the noConflict method. All of the original code is running fine. But this plugin is not running and it keeps throwing the error Uncaught TypeError: undefined is not a function on this line: $j("#wrapper").owlCarousel({ However if I add the following lin inside my document on load function it seems to run, then breaks when it gets to the .owlCarousel function. - $j('body').css('background-color', 'red');
Here is a breakdown of my code:
//Loaded n at the top of the page
{script src="lib/js/jquery/jquery.min.js"}
{script src="lib/js/jquery/jquery.min.1.8.js"}
<script>var $j = jQuery.noConflict(true);</script>
<script type='text/javascript'>
$(document).ready(function(){
console.log($().jquery); // This prints v1.5.2
console.log($j().jquery); // This prints v1.8
});
</script>
//Loaded in lower down the page, after most of the existing JS
<script type='text/javascript'>
$j(document).ready(function(){
$j('body').css('background-color', 'red');
$j("#wrapper").owlCarousel({
//autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 2,
itemsCustom : [
[200, 2],
],
navigation : true
});
});
</script>
The strange thing is, if i replace the old version of jQuery with the new one, it works, but breaks all the old code that relies on the old version.
I hope I've provided enough info.
Thanks in advance.
jQuery plugins normally hooks to the current jquery version attached to it, first load the old jquery version then the plugin that will be using it then, load the newer one.
I believe that the "plugin1" will be attached to the older version of jquery.
{script src="lib/js/jquery/jquery.min.js"}
<script>var j1 = jQuery.noConflict(true);</script>
{script src="lib/js/jquery/plugin1.js"}
{script src="lib/js/jquery/jquery.min.1.8.js"}
<script>var j2 = jQuery.noConflict(true);</script>
{script src="lib/js/jquery/plugin2.js"}
{script src="lib/js/jquery/plugin3.js"}
sorry for my english.
My code of my Script is given below.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
alert('init function called');
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
var verticalAdjuster = .30;
var backgroundSpeed = .15;
var childrenSpeed = .05;
var dogSpeed = -.03;
var ground = -.00;
jQuery(document).ready( function(){
alert('other function called');
$("#painting").mousemove( function(e){
var x = 750 - (e.pageX - this.offsetLeft);
var y = 435 - (e.pageY - this.offsetTop);
//$("#city").css("background-position", (backgroundSpeed*x) + " " + (backgroundSpeed*verticalAdjuster*y));
$("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
$("#city").css("left", (backgroundSpeed*x));
//$("#city").css("right", (backgroundSpeed*x*(-10)) );
$("#tree").css("top", (childrenSpeed*verticalAdjuster*y) + "px");
$("#tree").css("left", (childrenSpeed*x) + "px");
$("#boyAndBitch").css("top", (dogSpeed*verticalAdjuster*y) + "px");
$("#boyAndBitch").css("left", (dogSpeed*x) + "px");
});
});
</script>
The issue is that only the later script is running right now. But if I remove the <script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script> from where it is, and place it on the top, then only the init() function works and not the later.
Can you please explain me how can I solve this issue.
Regards
Zeeshan
You're including jQuery up at the very top, then Prototype right after that, then jQuery again at the bottom. The higher of the two script blocks appears to exclusively use Prototype, the lower of the two, exclusively jQuery.
Each of those includes is going to re-define $. By moving the initially-lower jQuery 1.3.2 inclusion to "the top", I assume you're placing it above your Prototype script tag.
So, down in your jQuery(document).ready callback, the $ has been hijacked by Prototype and you get errors because your code is written expecting that $ is jQuery.
What you should do is:
Only use one version of jQuery on this page. Pick one and go with it.
Call jQuery.noConflict(). Given the ordering you have now, things may work fine without it, but it's a good idea anyway, and will keep things from breaking if you change the order you include your libraries in.
Change the beginning of your jQuery code to:
jQuery(document).ready(function($) {
Adding that $ as a parameter to the ready callback will let you use the $ shortcut within the callback.
Or, if you control all this code, just stick with either Prototype or jQuery, whichever you prefer.
If it is a requirement to use different versions of jQuery and also other javascript frameworks then it is possible using no-conflict mode to distinguish between them and also different the jQuery versions
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
jq162 = jQuery.noConflict(true);
</script>
<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
<script>
jq132 = jQuery.noConflict(true);
</script>
Instead of $("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
You should use jq132("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
It seems odd that you are both linking to a google jquery version and local copy. I would recommend only linking to one. Also, you're going to want to do all of your imports before you actually write any scripts in the HTML file, unless you are using a noConflict() jQuery call. In that case you should use noConflict() before you import Prototype.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
These are different versions of jquery. Because the second call is the last one, only that version is being used. I would say that removing that call completely would fix your problem.
I am attempting to use the hoverIntent plugin to delay some animation effects on progress bars. However, for some reason hoverIntent doesn't seem to be functioning at all.
I have the following in my page header (all paths have been verified):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="campaign-resources/_js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="campaign-resources/_js/jquery.hoverintent.js"></script>
<script type="text/javascript" src="campaign-resources/_js/sitewide.js"></script>
In sitewide.js I run the following:
$(".cause-block").hoverIntent(function() {
var originalWidth = $(this).find(".cause-chart-achieved").css("width");
var chartParams = { width: originalWidth };
$(this).find(".cause-chart-achieved").css("width", "0");
$(this).find(".cause-chart-achieved").animate(chartParams, "slow", "easeInOutSine");
});
But when I hover over the relevant div, nothing happens in the browser, and the console displays the following errors:
"cfg.over is undefined" and "cfg.out is undefined"
I've tested using jQuery's built-in "hover" and it works just fine. I also thought it might be a conflict with the easing plugin, but after removing references to the easing plugin in the HTML and JS files I still have the same issue. Finally, to be safe I removed all other custom JS, yet the issue persists.
Any ideas? Thanks!
hoverIntent takes 2 parammeters,
do
$(".cause-block").hoverIntent(function() {
var originalWidth = $(this).find(".cause-chart-achieved").css("width");
var chartParams = { width: originalWidth };
$(this).find(".cause-chart-achieved").css("width", "0");
$(this).find(".cause-chart-achieved").animate(chartParams, "slow", "easeInOutSine");
},
function(){});