I have two plugins, both which use their own .swipe() function: ex: $("div").swipe();
Is it possible to give one of the plugins a different variable instead of $?
For example, could I use jQ("div").swipe(); for plugin A and $("div").swipe(); for plugin B?
Yes, however it would be better to instead rename the plugin.
<script src="jquery.swipe.js"></script>
<script>
$.fn.swipeOne = $.fn.swipe;
</script>
<script src="jQuery.swipeTwo.js"></script>
<script>
$(document).ready(function(){
$("#swipeone").swipeOne();
$("#swipetwo").swipe();
});
</script>
Otherwise you would have to include jQuery twice.
Yes, you want the noConflict option.
http://api.jquery.com/jQuery.noConflict/
Better example of how to use it:
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
If both jQuery plugins need to be bound to the same jQuery object, go in either one plugin, and look for $.fn.swipe. Change the word "swipe" to anything you like (e.g. $.fn.mySwipe), bearing in mind that its internal references to the word "swipe" might also need to change.
You can change the $ by using
var $j = jQuery.noConflict();
Now you'd use $j whenver you'd use $ before, e.g.,
$j(document).ready(function() {
//stuff
}
you can use
jq(function) {
})
and then just refer to jq
Related
I have a bit unusual case in my project. The jQuery is loaded under a namespace, like
var grp = {
"jQuery": jQuery.noConflict(true)
};
So in my custom scripts I am doing:
(function($){...}(grp.jQuery);
The question I have is how to handle external jQuery plugins. E.g. I want to add autocomplete plugin, which depends on jQuery, and starts with
$(document).ready(function() { ....
And it looks like the only option to include them in source code like
<script type="text/javascript" src="/static/autocomplete_light/django_admin.js"></script>
would be to edit them all, which is not practical...
You have two options:
Move jQuery to where the plugins expect to find it (i.e. to a global)
Edit all the plugins to tell them where jQuery actually is
You could try writing a preprocessor that edits all the plugins for you at build time (this would probably be more work and more error prone than is worthwhile).
Assuming you are not using the $ variable name anywhere else,
maybe you can append it to the window on startup so it'll be available.
Something like:
(function(jQuery) {
window.$ = jQuery;
}(grp.jQuery))
This is an issue of scope I believe. I wish to use jQuery in a Joomla module and include the code within a tags in the php source. This works:
<script> alert("foo"); </script>
but this doesn't:
<script> alert($.jquery); alert(jQuery.jquery); </script>
which should produce at least 1 alert box with the jQuery version, but the alert says "undefined". The webpage <head> section already includes jQuery, and it is used in the html stream before the above <script>. I don't believe the <script> block defines a new, independent script scope / context, but that is how it behaves.
Add .fn.:
alert(jQuery.fn.jquery);
// or
alert($.fn.jquery);
Or try using jQuery as a function:
alert(jQuery().jquery);
// or short:
alert($().jquery);
Michael pointed out another one:
alert(jQuery.prototype.jquery);
// so we can also add
alert($.prototype.jquery);
If you want your code to work:
// add somewhere before:
jQuery.extend(jQuery, {jquery: jQuery.fn.jquery});
// Than this should work just fine:
alert(jQuery.jquery);
alert($.jquery);
Extend JQuery object ($ or jQuery) by .jquery equal to jQuery.fn.jquery.
As you can see we can add any properity to jQuery. Let's do jQuery.version:
$.extend($,{version:$().jquery});
If you want version you need
jQuery.fn.jquery
You can do
jQuery.fn.jquery
You can also do
jQuery.prototype.jquery
I bought (didn't code myself due to lack of education blah, blah, blah) a jQuery image slider/navigation plug in. it works fine, and I have adjusted the images and CSS fittingly.
Problem is that when the slider is working properly, I cannot use a show/hide onClick event such as $('#someId').toggle();.
Using trial and error I have found that commenting a few lines of js on the html page allows the show/hide functions to work, but then the slider is broken,.
The js that I comment out comes after the slider images(plug-in).
The JS code in questin is:
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx('.slidedeck').slidedeck();
</script>
When comment it out with html, then I can use onclick="$('#someId').toggle();" without a problem. But again, then the slider plugin is very broken and splattered all over the page.
As it is noticeable, and stated, I know nearly nothing.
Can anyone help me understand when this is happening?
Thanks
/Brian
try change:
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx('.slidedeck').slidedeck();
</script>
to:
<script type="text/javascript">
$('.slidedeck').slidedeck();
</script>
http://api.jquery.com/jQuery.noConflict/
you have to use $jx or jQuery
ex: onclick="jQuery('#someId').toggle();"
The dollar sign is an alias for the jQuery method. Because there are other JavaScript libraries that may use the dollar sign as well, jQuery offers the noConflict method which basically renames the jQuery method to the variable that you set it to. (This way, it won't conflict with those other libraries.)
So, after the noConflict is called, all of your jQuery calls will need to replace the dollar sign with that variable. So in your example, just do this:
onclick="$jx('#someid').toggle();"
I was successfully using some plugin for about 6 months on my website and all of a sudden I started getting this message for one of my scripts: "$ is undefined".
This is the problematic line of code: $.widget("ui.ImageColorPicker", uiImageColorPicker);
I'm using this plugin and almost the newest jQuery with noConflict enabled: http://github.com/Skarabaeus/ImageColorPicker I didn't change anything for 6 months (I didn't update jQuery). I'm sure it worked fine just 2 weeks ago and now it's broken all of a sudden.
EDIT: Error is gone. I'm removing example website.
It looks like a variable scope issue.
Try changing the first line to this:
(function($){
and the last line to this:
})(jQuery);
By doing this we are passing in the jQuery object to the anonymous function which surrounds the plugin, but by referencing it as $ the code within the block can be written using 'normal' jQuery, while still maintaining the noConflict mode on the rest of the page.
Please try this
<script type="text/javascript" src="other_lib.js"></script> //In your case try Imagecolorpicker js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
Reference $.noConflict();
It looks like jQuery.Widget is defined on that page. Try that instead of $.widget.
First, make sure you included jQuery UI. try to use jQuery.widget. If that doesn't work, use:
e = jQuery; // you can use anything else than $
Now, you should type e.widget("ui.ImageColorPicker", uiImageColorPicker);
instead of what you have.
Try to use the explicit jQuery object instead of it's $ alias.
For instance:
jQuery.widget("ui.ImageColorPicker", uiImageColorPicker);
Basically what I want the script to do, is add my affiliate ID to all Amazon links posted by my users.(Kinda what SO is doing, minus the whole redirect/racking thing)
Here is the code I'm using, and for some reason it's not working.
<script type="text/javascript">
$(document).ready(function() {
$('a[href*='amazon.com']').each(function() { this.href = this.href.replace(/\?.*$/,"") + $.query.load(this.href).set("tag","affID").toString();});
});
</script>
I am not familiar with jQuery, but I think this script may be helpful:
http://petewilliams.info/blog/2009/07/javascript-amazon-associate-link-localiser/
I think it might have something to do with your quotes. Try it like this:
$('a[href*="amazon.com"]').each(function() ... etc
Notice the difference? The point is that if you use single quotes on the outside, you need to use double quotes on this inside. Or vice versa.
Did you add the jquery plugin it requires.
$.query.load(this.href)
this requires the jquery query plugin I suppose.