Clever Geek Handbook

JQuery mobile plugin and jQuery TouchSwipe errors

I am trying to use the TouchSwipe plugin from Skinkers Labs in conjunction with jQuery Mobile on a mobile website I am building that also uses responsive design.

TouchSwipe: http://labs.skinkers.com/touchSwipe/

The situation I'm working in is to get the TouchSwipe plugin to work fine with a normal page on a mobile device, but as soon as I add the jQuery Mobile js file, the TouchSwipe function will no longer function.

This is the JS error I am getting (line 3256 jquery-1.7.1.js):

TypeError: 'undefined' is not a function (estimate '((jQuery.event.special [handleObj.origType] || {}). Handle || handleObj.handler) .apply (matched.elem, args)')

This is where I include JavaScript in 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 the helper functions in the Swipe image sample code from the TouchSwipe site:

http://labs.skinkers.com/touchSwipe/demo/image_scroll.php

Any idea why I am seeing this error? Once I remove the jQuery Mobile javascript file, the plugin works fine, but I need jQuery Mobile for this site.

I will gladly send you more code if you like. Let me know if you have questions or need more information.

Thanks in advance for your help!

+3


source to share


3 answers


I ended up ditching TouchSwipe and using the iosSlider plugin, which seems to work much better and I didn't run into any problems when using it in conjunction with jQuery mobile.

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/



Hope this helps someone else with the same problem.

+1


source


You are going on this wrong. You load JQM after TouchSwipe, although TouchSwipe must override JQM. It's like building windows in front of walls.

I tested and everything works fine without having to change any names. All you have to do is enable JQM prior to 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>
+8


source


This is due to a collision in the jqm namespace. Both touchSwipe and jqm use the same names "swipe", "swipeleft", etc. I changed the names in the touchSwipe plugin using quick find-replace to get rid of this problem. Obviously not a perfect solution, but it works.

+1


source






More articles:


All Articles