jQuery Mobile & TouchSwipe jQuery Plugin Errors - javascript

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.

Related

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

prettyPhoto Not Working - Error: Not a Function

I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.

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 library conflict with another jQuery library

I am using a lot of jQuery libraries in my application.
My application is based on a map, and the map is generated by my own server mapmyindia.com.
The problem is that there is a jQuery conflict that occurs when I use fancybox jQuery library, pagination jQuery library and drop-down checklist jQuery library, all work together.
My direction search API's don't work because of a jQuery library conflict.
However, if I remove all the jQuery libraries, I can use my direction search API
just fine.
With the jQuery libraries enabled, it gives me an error:
$.jsonp is not a function
My application is on app.mapmyindia.com/michelin please help me.......
<script>MIREO_RESOURCES_ROOT = "http://46.137.254.191/MapServer/";</script>
<script type="text/javascript" src="http://46.137.254.191/MapServer/MireoWebMap.js"></script>
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
<script type="text/javascript" src="jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.0.6" media="screen"/>
Try to use jquery noConflict() and download the latest version of jquery that resolve some problems conflict
try this :
use jquery noconflict and wrap your code in jQuery functions :
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
jQuery(function($){
// my code here each
});
good luck.
The order in which you have declared your javascript, that is importing your MapmyIndia Js first, using it
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
& then calling jQuery, I don't think so jQuery would be creating problem.
Also you should be using
var map=document.getElementById("id");
since you are calling jQuery after that so $() won't work.
EDIT : Or if the MayMyIndia Js also requires jQuery then you should call jQuery.Js on top.

Having a conflict while trying to use the jquery cycle plugin and the lightbox plugin

I am working on a website that has incorporated the jquery cycle plugin. It was all working fine until I tried to add the lightbox plugin. There seems to be an issue within the element that only allows the latter JS files to work. Any help would be great.
Here is the jquery code I am using in the element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function () {
var titles = ['Pentiction Summer Classic', 'Ryan Kesler', 'Trevor Linden'];
$('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
fx: 'fade',
timeout: 5000,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});
</script>
It works without any issue.
Here is the lightbox code in the element.
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
It also works alone without any issue. When I put them together, only the last one in the element works. The first one breaks.
I have checked the error console and this is the error:
Error: element.dispatchEvent is not a function
Source File: http://localhost:8888/rockymountainsports/rms/web/js/prototype.js
Line: 3972
That error does not appear when the cycle js is not there. Any ideas?
Thanks
I presume the error is due to the fact that you're using 2 Javascript Frameworks, jQuery and Prototype.
This usually isn't recommended unless you really need to use both frameworks.
I would consider using the jQuery alternative of lightbox or using jQuery in noConflict() mode. Something like:
var $j = jQuery.noConflict();
And then instead of using $("someelement") use $j("somelement");
But, my personal recommendation is to ditch one of the framworks and stick with just one.

Categories

Resources