Develop Reference

jQuery(...).iris is not a function

I am trying to implement color picker provided here http://automattic.github.io/Iris/
Here is my libraries that i am including.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
and this is how i am implementing this code
$(document).ready(function() {
jQuery('#color-picker').iris();
});
this is how i have my input field
<input type="text" id='color-picker' value="#bada55" />
but i don't why i get this error
TypeError: jQuery(...).iris is not a function
jQuery('#color-picker').iris();

Seem like the path to your iris script is wrong which caused the browser cannot load the file. So you can check again to see if the path js/iris.min.js is correct.
You can check to see whether your file is loaded or not by going to network tab of either Firebug or Chrome developer tools. If it cannot load the URL which you've provided than you'll receive a 404 error not found in this tab.
Or you can also try to replace:
<script src="js/iris.min.js"></script>
with direct link from Github:
<script src="https://github.com/Automattic/Iris/blob/master/dist/iris.min.js"></script>
The last note is that you just need to include jQuery once, you can choose either version 1.10.2 or 1.8.3 which you know that version will compatible with your jQuery code.
I think this should be something wrong with the iris script here, try to use this version directly from their home page:
<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
Fiddle Demo

Is your code placed in a way that would let it run before jQuery, jQueryUI and Iris is loaded? Make sure you place your own script file after the rest.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
<script>
$(document).ready(function() {
jQuery('#color-picker').iris();
});
</script>

You need to have link to jQuery and jQuery UI instead of adding jQuery twice.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
Then call iris on page load and it will work. Here is a link to working fiddle http://jsfiddle.net/WLru3/
PS: I have directly copy pasted code of iris in js code block, please use library link in your code instead.

Remove a line that includes jQuery 1.8.3 library
Make sure the path to iris.min.js is correct

how to fix Conflicting Jquery sources 1.31 and 1.61?

I have a page with js source. I have to include two different jquery sources. If i take out one the countdown clock doesn't work.
how i work with js conflit ?
<script type="text/javascript" src="files/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="files/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="files/js/kivi.js"></script>
<script type="text/javascript" src="files/js/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
</script>

I think you should better find out how to fix the contdown clock instead of loading 2 versions of jquery on the page.
There is that noconflict method but i'm sure the plugin doesn't do it that way. You can edit the source of the plugin, wrap it in an annonymous self executing function that takes one parameter
(function($) {
// your plugin code here
})(JQ);
where JQ is the non conflict name you get from whatever version of jquery this plugin requires.
So safest way is to fix the clock plugin

jQuery Mobile & TouchSwipe jQuery Plugin Errors

I'm trying to use the TouchSwipe plugin from Skinkers Labs in combination with jQuery Mobile on a mobile website that I'm creating that also utilizes responsive design.
TouchSwipe:
http://labs.skinkers.com/touchSwipe/
The situation I'm running into is I can get the TouchSwipe plugin working fine with a normal page on a mobile device but once I add the jQuery Mobile js file the TouchSwipe functionality no longer functions.
This is the JS error that I receive (on line 3256 of jquery-1.7.1.js):
TypeError: 'undefined' is not a function (evaluating '(
(jQuery.event.special[ handleObj.origType ] || {}).handle ||
handleObj.handler ) .apply( matched.elem, args )')
Here is where I include the JavaScript within my HTML:
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$("#divCheckingWrapper").live("pagecreate", function(event) {
var swipeOptions = {
swipeStatus: swipeStatus,
allowPageScroll: "vertical"
};
SWIPEABLE_NODES = $("#divCheckingSlider");
SWIPEABLE_NODES.swipe(swipeOptions);
CONTENT_WIDTH= SWIPEABLE_NODES.parent().width();
MAX_NODES = SWIPEABLE_NODES.find("div.divCheckingSliders").length;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
main.js includes all of the helper functions within the Image Swipe example code from the TouchSwipe site:
http://labs.skinkers.com/touchSwipe/demo/image_scroll.php
Any idea why I'm seeing this error? As soon as I remove the jQuery Mobile javascript file the plugin works fine but I need jQuery Mobile for this site.
I'll gladly post more code if you'd like. Let me know if you have any questions or need more info.
Thanks in advance for your help!

You're going about it the wrong way. You're loading JQM after TouchSwipe, though TouchSwipe is supposed to override JQM. It's like building the windows before the walls.
I've tested and things work normally without any need to change any naming. All you need to do is to include JQM before TouchSwipe.
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

I ended up giving up on TouchSwipe and using the iosSlider Plugin which seems to work much better and I did not run into any problems while using it in combination with jQuery mobile.
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
Hopefully this will help someone else with the same issue.

This is due to a clash within the jqm namespace. Both touchSwipe and jqm use the same 'swipe', 'swipeleft', etc names. I changed the names in the touchSwipe plugin with a quick search-replace in order to get rid of the problem. Obviously this is not an ideal solution, but it works.

Using controls requiring different jQuery Versions

I am trying to use an Apycom menu requiring jQuery 1.3.2 on the same pages as Flexigrid for Rails which depends on jQuery 1.2.3. To add to the confusion I'm trying to include the Rails 'prototype.js' and use this as well. Here is my include order:
<%= javascript_include_tag :defaults %>
<%= yield(:head) %>
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/flexigrid.js" type="text/javascript"></script>
<script type="text/javascript">
jq123 = jQuery.noConflict(true)
</script>
<script src="/javascripts/menu/jquery.js" type="text/javascript"></script>
<script src="/javascripts/menu/menu.js" type="text/javascript"></script>
<script type="text/javascript">
jq132 = jQuery.noConflict(true)
</script>
When the page I'm testing loads up, Firebug gives me the following:
$ is undefined
(240 out of range 237) menu.js (line 240)
and consequently my menus don't work (at least not the parts that matter). I don't have a Flexigrid grid on this page so I can't attest to whether that even works. I saw this answer (How do I run different versions of jQuery on the same page?) but it doesn't completely work. My local JavaScript works but the jQuery plugins don't seem to be happy.
Any suggestions?

Menu.js is assuming the jQuery function is called $. When using jQuery.noConflict you need to update the references to the jQuery function to whatever you named it (in this case jq123 or jq321).

#MightyE makes a good point that menu.js file is referencing the $ object incorrectly. An easy solution to fix this would be to open you menu.js file and wrap the contents in this function call
(function($) {
// $ is now equal to jq321
// menu.js stuff
})(jq321);

Conflicts in Mootools & jQuery In Joomla

I read all the related post but I think I am missing something.
My page structure is:
1 - Load Motools library in Joomla. Code:
JHTML::_('behavior.tooltip');
JHTML::_('behavior.mootools');
JHTML::_('behavior.formvalidation');
2 - Then load the Jquery library code is:
<script language="javascript" src="<?=$this->baseurl;?>/includes/js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?=$this->baseurl;?>/includes/js/jquery/customjsfile.js"></script>`
3 - Then there are few JS function which uses Jquery Functionalities. The code is:
function abc() { /* -.stuffs uses jquery */ }
function xyz() { /* ..another function which uses jquery */}
4 - Load body of the page
5 - At the end again few lines of JS code . Which again use Jquery. Code is:
<script language="javascript">
$("#dialog").html(newHTML);
</script>
This is how my page is.
Now I am getting the Conflict errors in Motools & Jquery.
How do I resolve it.

use jQuery instead of $ and
give
jQuery.noConflict();
jQuery.noConflict
Many JavaScript libraries use $ as a
function or variable name, just as
jQuery does. In jQuery's case, $ is
just an alias for jQuery, so all
functionality is available without
using $. If we need to use another
JavaScript library alongside jQuery,
we can return control of $ back to
the other library with a call to
$.noConflict():

Please see:
Using JQuery with other libraries.

jQuery.noConflict(), this is what you need.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
source: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

See this page. It seems to be answered there
http://groups.google.com/group/jquery-en/browse_thread/thread/3dabd31a8ab60505?pli=1