Develop Reference

detect jquery version use on or live

I am writing a plugin which can be used in any website where I dont know the exact version of jquery and getting a few issues with the .on() method.
To fix it I have something simple like this but still getting errors in jQuery 1.4.2.
var $myElements = $('.elements'),
myFunction = function(e){
console.log('here');
e.preventDefault();
}
if (typeof jQuery != 'undefined') {
if(jQuery.fn.jquery < 1.4){
$myElements.live('click', myFunction);
} else {
$(document).on('click', $myElements, myFunction);
}
}

Based on the previous answer, you can do this too:
;(function($) {
if(!$.fn.on) {
$.fn.on = $.fn.live;
}
}(window.jQuery || window.Zepto));
Then you can use on in the rest of your code.

You should bundle your own version of jQuery to save yourself a lot of hassle and a lot of redundant code. You can do this using noConflict to ensure that both your code and the code of the source website act independently:
<!-- load your jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var yourjQueryVersion = $.noConflict(true);
(function($) {
// Now you can use $ just like you normally would
// And it will only execute against jquery-1.11.0
$(function() {
var $myElements = $('.elements'),
myFunction = function(e){
console.log('here');
e.preventDefault();
}
$(document).on('click', $myElements, myFunction); // Yay!
});
})(yourjQueryVersion);
</script>
This means that:
You don't need to write extra code for all jQuery version differences
If the target website upgrades to jQuery 2.0 (or similar), none of your code will break.
The source website might even be using a CDN, so there is a good chance only one copy of the jQuery library may be loaded due to caching.

how to generate headJS fallbacks

How can I properly implement fallback for headJS and Jquery (if the CDN fails to load) within the head load function?
I cant find anything on the documentation about fallbacks.
http://headjs.com/
My code is the following: (right now HeadJS and Jquery are loaded from CDN)
<script src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
<script>
// this loads jquery asyncrounously & in parallel
head.load("//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js", "script1", "script2");
if (head.screen.innerHeight < 800) {
/* code specific to VIEWPORT < 800 */
head.load("{T_THEME_PATH}/footable/js/footable.min.js");
head.ready(function () {
// some callback stuff
$('.footable').footable();
});
}
</script>

Here the answer wit headJS. run a test and fallback to something else like this
head.load({"jquery": "...path to cdn"});
and then
head.ready("jquery", function() {
if (!window.jQuery) {
head.load({"jquery": "...path to fallback"});
}
});

Error "Object function 'modal' has no method" with dynamically loaded script files

From script within body I dynamically load jquery and SimpleModal into page header. I use callback to be sure jQuery is fully loaded before making calls into it--this works. However when I dynamically load the SimpleModal script file, I can't subsequently call its methods. It appears when the SimpleModal script lazy loads it is unable to reference the current document object. Any help would be greatly appreciated.
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}
/******** Main function ********/
function main() {
jQuery(document).ready(function ($) {
var domain = 'http://qo.microssoftware.com';
/******* Load SimpleModal *******/
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
domain + "/js/simplemodal.js");
script_tag.onload = modalLoadHandler;
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
});
}
function modalLoadHandler() {
/******* Open Modal *******/
$.modal("<div><h1>SimpleModal</h1></div>", {});
}

Try:
<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$.modal("<div><h1>SimpleModal</h1></div>");
});
</script>
OR, if you want to call the modal using your main() function:
<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
function main() {
$.modal("<div><h1>SimpleModal</h1></div>");
}
});
</script>
You don't need to put the js in the header... Actually some programmers always put all their JS just before the ending BODY-tag.

I would suggest that this is unnecessary, to begin with. The simplemodal script is very compact. Give more consideration to how to optimize script loading in general (gzip, or if you must go ajax, AMD dependency loading with RequireJS or the like) without the unnecessary complication of this kind of ajax method.
The script loaders that use this type of method (like the Facebook SDK or Google Maps) will search the window (global) element for a callback to call once the script is initialized. Basically, you would have to modify the simplemodal code and then wrap your dependent code in a callback. I hardly see how that could be necessary in this case.

This is where you would want to create an async-closure based around the onload event of the script.
If you must support ancient IE, you can also hook into the onreadystatechange event, the same way you would do it in AJAX requests (in pure JS).
The more-modern browsers won't fire this event.
So turn the onload into a callback, which fires known methods from the file.
You can get around errors by also attaching to the onerror of the script's loading.

Loading jQuery in a blogger post causes it to freeze

I've created some code which people can copy and paste into their websites, and it should work in blogspot. This code requires jQuery and the jCarousel plugin. I use
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
to load jQuery before running my javascript code. The issue is that some blogger templates load jQuery already, and then running the above code causes the blog post to never load (it just stays on the loading screen).
I could load it using javascript after if (typeof jQuery == "undefined") but for the jCarousel plugin to work jQuery must be loaded first, so this causes the post to load but the carousel to break.
Anybody know any solutions?

Can't you check for the existence of jQuery and still load jCarousel after that?
<script type="text/javascript">
if (typeof jQuery === "undefined") {
document.write('<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"><\/script>');
}
</script>
<script src="http://path/to/jcarousel" type="text/javascript"></script>
On second thought, I am not convinced this will always work. I don't think this guarantees that jQuery will load before jCarousel. I came up with an alternate solution that seems to be more robust. It makes sure that jQuery is loaded, and then uses jQuery to load the library using $.getScript(). Then your code is called from the callback of getScript. This ensures that everything happens in the proper order:
<script type="text/javascript">
if (typeof jQuery !== "undefined") {
loadLibs();
} else {
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery.js';
document.getElementsByTagName('head')[0].appendChild(script);
var timeout = 100; // 100x100ms = 10 seconds
var interval = setInterval(function() {
timeout--;
if (window.jQuery) {
clearInterval(interval);
loadLibs();
} else if (timeout <= 0) {
// jQuery failed to load
clearInterval(interval);
}
}, 100);
}
function loadLibs() {
$.getScript("http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js", function(data, textStatus, jqxhr) {
myCode();
});
}
function myCode() {
$(document).ready(function() {
$('#mycarousel').jcarousel();
});
}
</script>
Demo: http://jsfiddle.net/jtbowden/Y84hA/2/
(Change the Framework in the left column to any version of jQuery, or some other library. It should always load the carousel correctly)
Edit:
This version is similar, but uses a <head> load for the lib, just like for jQuery. It is faster than $.getScript():
http://jsfiddle.net/jtbowden/y8nGJ/1/

Loading JS dynamically from another JS (jQuery)

I'd like to know if I can load an external JS dynamically based on some condition, for example:
$(window).load(function () {
if($.browser.msie && $.browser.version=="6.0") {
// load ie.js
// do stuff using ie.js
}
});

JQuery's GetScript should do it.
$.getScript("yourscirpt.js", function() {
alert('Load Complete');
});

If not using jquery, use this to include js
document.writeln('<script type="text/javascript" src="your.js"></script>');

Use $.getScript(url,callback); it loads the script, and executes it.