detect jquery version use on or live - javascript

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.

Related

Using multiple JS libraries ; Need to know how to properly write a local definition for "$"

I'm using the JQuery tools slider along side another auto-scrolling plugin. Being that I am very new to Javascript I do not know how to properly solve the conflict between the plugins' respective libraries.
It is to my understanding I need to provide a local definition for "$" within the Slider script, or perhaps I should do it for the auto-scrolling plugin as the JQuery slider uses, what I imagine to be, a broader definition for "$"
All insight is appreciated. Again, I am very, VERY new to Javascript so pardon my ignorance. One day I imagine I will bridge the gap from copy-paste programmer to a real programmer.
Here is the script for the JQuery Tools Slider
<script>
var api = $("#scroll").scrollable({ items: '#tools' }).navigator().data("scrollable");
api.onBeforeSeek(function(e, i) {
if (i) {$("#intro").fadeOut("slow");
if ($.browser.msie && $.browser.version < 8) {
$("#intro").hide();
}
// otherwise show the intro
} else {
$("#intro").fadeIn(1000);
}
// toggle activity for the intro thumbnail
$("#t0").toggleClass("active", i == 0);
});
$("#t0").click(function() {
$("#scroll").scrollable().begin();
});
</script>
Here's the basic idea around loading two versions of jQuery (usually a bad idea) and defining a scope where the $ variable is the relevant version of jQuery:
<!-- load jQuery 1.7.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var jQuery_1_7_2 = $.noConflict(true);
</script>
<!-- load jQuery 1.8.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript">
// self executing function that defines $ to be jQuery 1.7.2 in its scope
(function($) {
var jQuery = $;
// $ and jQuery in here is 1.7.2
})(jQuery_1_7_2);
// self executing function that defines $ to be jQuery 1.8.2 in its scope
(function($) {
var jQuery = $;
// $ and jQuery in here is 1.8.2
})(jQuery_1_8_2);
</script>

Plupload messing up jquery

I am using the image uploader Plupload and it is causing errors with the other jquery I have on my page. I have figured out exactly what part is doing it:
function $(id) {
return document.getElementById(id);
}
If I take this out the image uploader no longer works but the jquery does. It is a lot of code to post here, does anyone have another way to call this function so that it works with jquery? Thanks in advance for any help.
use jQuery like this:
jQuery(function($){
//Your jQuery code here
// Use $ alias worry-free of conflicts
alert('You are using jQuery ' + $().jquery );
});
or
(function($){
//Your jQuery code here
})(jQuery);
or
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
or
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

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/

Jquery And Mootools, .noConflict is failing

I have an application that requires the use of a mootools calendar, however, I use jquery for my main app structure.
As soon as I have mootools in with jquery, neither work, and when I have only one, they work fine. I did some research saying I could use a method called .noconflict, and while i've tried, I have not gotten it to solve my issue. Perhaps someone could better explain to me where to do the actual .noconflict calls, and perhaps help me get this working.
Thanks!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var fixHeight = function () {
var gutter = 50;
var newHeight = $(window).height() - (gutter*2);
$('#container').height(newHeight);
}
$(function(){
fixHeight();
$('ul#nav li.item').each(function(index) {
if ($(this).attr("name") == "media") {
$(this).attr("id","active");
}
});
$('input').focus(function() {
$(this).attr("value","");
}).blur(function() {
$(this).attr("value",$(this).attr("original-value"));
});
$(window).resize(function() {
fixHeight();
}).load(function() {
fixHeight();
});
});
</script>
<script type="text/javascript" src="http://taptouchclick.com/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var smoothCalendar = new SmoothCalendar("calendar");
});
</script>
yes, the noConflict method should work, but if it doesn't or if you want to do it in another way, you should encapsulate the scripts in self-calling functions with the parameter being set as the main library object:
(function($){
// al your jquery logic here
alert($ instanceof jQuery);
})(jQuery)
after that, you should include the next library(in your case MooTools) and write the script normally , or - to be very sure - you can encapsulate the MooTools logic in a function as well.
You should be fine if you simply call:
jQuery.noConflict();
...before including the Mootools JS file.
You can then use jQuery functions by using jQuery instead of $. Example:
jQuery('.selector').hide(); // instead of $('.selector').hide();
You can also pass $ back in through the DOM-ready event:
$.noConflict();
// Non-jQuery code goes here
jQuery(document).ready(function($) {
// You can now use the dollar sign safely inside of this function
}

jquery noConflict not working in IE8 only

I have a website using the prootype framework and I am looking to use a jquery plugin. Everything works just not in IE8. It works in ie7 which amazes me. Any idea what maybe wrong?
IE8 gives me object doesnt support this property or method where line jQuery.noConflict(); is
<script src="/my/docs/jquery.js" type="text/javascript"></script>
<script src="/my/docs/jquery.simplyscroll.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery.noConflict();
function OpenUp(sURL){
window.open(sURL,null,'height=560,width=820,status=yes,toolbar=yes,menubar=yes,location=yes,resizable=yes,scrollbars=yes',false);
}
jQuery(document).ready(function($) {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/my/docs/jquery.simplyscroll.css"
});
$("#scroller").simplyScroll({
autoMode: 'loop',
framerate: 1,
speed: 1
});
});
</script>
I also tired the following: var $j = jQuery.noConflict(); var j = jQuery.noConflict();
everythig works just not in IE8 alone.
I've run into this also using jQuery-1.4.4.js. Everything works fine except in IE8. IE8 does not recognize jQuery() anything. I was able to resolve the problem by loading jQuery and running $.noconflict() prior to loading Prototype and it all runs fine on all my test browsers including IE8. This sequence is contrary to the jQuery documentation and therefore I'm nervous about it. Can't find anything on the jQuery site about it.
t22harris
The only way I was able to fix this, for IE8 (which was the only one with the problem) and other browsers was to put jQuery and the noConflict() call in the head immediately after initializing the other library. Like so:
<script type="text/javascript" src="/path/to/prototype.js"></script>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict(); </script>
... followed by any other scripts that use either jQuery or Prototype.
I've been having a similar problem. The solution that I'm currently using is to save the $ variable in a temporary variable, loading jquery(I'm loading jquery from js code), running jquery dependent code (with jQuery.noConflict), the setting the $ variable back.
It's dirty, but it seem to have done the trick for me.
My function which adds jquery (if necessary) is:
function getJQueryAndGo(callback) {
var thisPageUsingOtherJSLibrary = false;
var tempDollar = $;
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
thisPageUsingOtherJSLibrary = true;
}
loadToHead('script','http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
//alert('Super failsafe - still somehow failed...')
} else {
jQuery.noConflict();
(function($) {
callback($);
})(jQuery);
}
});
}
else
{ // jQuery was already loaded
jQuery.noConflict(); // This may not be necessary
(function($) {
callback($);
})(jQuery);
}
$ = tempDollar;
}
The loadToHead simply loads the script into the head tag somewhere and runs the callback function when the script is loaded.
Most of this code I have found online and tweeked it. Unfortunately I don't remember where to give the credit as of now.
Ive had a simular problem in the past and worked around it by using the emulate ie7 meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Im not sure if this is the best work around though.
Just had the same problem. IE 8 does not like:
var jQuery = jQuery.noConflict();
changed it to:
var jq = jQuery.noConflict();
worked fine.
I've had strange problems in the past with IE8 on machines with multiple versions of IE installed. In my case an error was popping when I tried to open a link in a new window via javascript. The same code worked fine on IE6 and 7, and a machine with only IE8 installed ran it fine as well.
This is an issue I also discovered. The way I fixed it was to upgrade my jQuery to 1.4. Version 1.3.2 fails with newer prototype on IE8. Sorry this answer is late.
I have the exact same error with 1.4.4 and 1.4.3 loading jquery after prototype and only in IE8, not even in Ie7 or Ie6
Jquery 1.4 solved this for me.

Categories

Resources