We Keep Coding

JQuery - multiple versions on the same page - breaking functionality

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);

Don't know which JQuery plug-in to use

I have this piece of JS:
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
But it doesn't seem to work on my website even though it works fine on JSFiddle
I used "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"
But didn't work.
I don't have any other Script on my website as I've just started it.
Is it just a case of using the wrong plug-in?
UPDATE
This is my full code:
http://jsfiddle.net/WeQwc/9/

You need jQuery, not jQueryUI.
http://code.jquery.com/jquery-latest.min.js
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
});
</script>
Just to clarify why this works, surrounding your jQuery code with the $(function(){...}); means that it will only be run once the page has finished loading. So if you are acting on html elements, this is kinda useful. You will notice that your jFiddle JavaScript is run "onLoad", the reason it worked :)

Currently you are using only the jQuery UI js file
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
You need to use the core jQuery min js file first and then the jQuery UI js file.
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js

resizable is not recognized

I have included the jquery ui in my page and try to appliy resizable to img but it is not working.
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
$('.jqte_editor').on('mouseup', 'img', function() {
$('.jqte_editor img').draggable().resizable();
});
but it says resizable is not recognized.
Edit
actually in this case it says Draggable is not recognized whatever is coming from jqueryui

That means either jquery-ui-1.10.3.custom.js path is not correct or required modules draggable, resizable are not included
Add this and try
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
If doesn't work then you may have included other JS library with jQuery like Prototype or Mootools
Demo Link

Hope you added the jQuery lib too, because it not showing any error about .on()
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
Also instead of mouseup you can directly have
$(document).ready(function () {
$('.jqte_editor img').draggable().resizable();
});
Check the working sample fiddle here.

jQuery mobile .changePage does not work properly

This is a user login screen, when login successful I want to show another page, this "kinda" works but after successful login I get a mixture of both pages! it is all overlayed. So only when I refresh the page I can see it properly. I also tried to use jQuery version 1.6.4 but didn't help.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$.ajax({
...
success: function (data){
$.mobile.changePage('account.html');
},
});
</script>
Also apart from overlay issue on the next page there is a JavaScript code which does not work until I refresh the page.
$(document).ready(function() {
$(".infoBasic").click(function() {
$(this).next('.infoDetails').slideToggle("50");
});
});

A couple of issues here:
jQuery Mobile 1.1 only work with core jQuery verysions 1.6.4 and 1.7.1 while Mobile 1.2 works with core 1.7.0 and 1.8.2
$(document).ready() is not supported. Use $(document).bind('pageinit') instead. http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Your script references should not start with // but http://

You could do this i think:
$.ajax({
...
success : function(data) {
$('body').empty();
$.mobile.changePage('account.html');
},
});
For your second problem, you should use delegation with .on():
$(document).ready(function() {
$(this).on('click',".infoBasic",function() {
$(this).next('.infoDetails').slideToggle("50");
});
});

cfg.hover error with jQuery hoverIntent plugin

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