Touchwipe integration - one-page-site script

Question

I have been spending most of the day troubleshooting and searching for an answer to my question regarding TouchWipe (http://www.netcu.de/jquery-touchwipe-iphone-ipad-library) integration on this custom one-page-site script (http://www.joerg-niemann.de/blog/up-down-left-right-scrolling-single-page-website/) based on Parallax, which was exactly what I was searching for for my latest project.

The script itself does everything I want it to, beautiful transitions and keyboard control straight out of the box, but I can't for the life of me, get the hang of how to integrate TouchWipe.

The idea is, that visiting iOS user should be able to wipe/swipe/slide between the pages with their finger with the same ease, as clicking the navigation arrows, or using a keyboard currently does.

My problem is failing at trying to call the same functions for TouchWipe gestures as clicking the arrows, or using the keyboard. The on-click function calling part of the script looks as follows:

        function setRight(page, text) {
            $("#rightText").text(text);
            $("#rightControl").show().unbind('click').click(function () {
                parallax[page].right();
            });
            rightKey = function () {
                parallax[page].right();
            };
        } 

I'm by no means a JavaScript developer, and since I haven't been able to find a decent answer anywhere (shame on me for using a custom script without a FAQ) on how to integrate touch with this lovely script, I'm reaching out to you.

I've tried numerous different variations of calling the necessary functions on wipe/swipe/touch, but all have failed to function. I can't for the life of me figure out why this isn't working:

<script>
    $(document).ready(function(){
        $('body').touchwipe({
            wipeLeft: function(){ parallax[page].left(); },
            wipeRight: function(){ parallax[page].right(); },
            wipeUp: function(){ parallax[page].top(); },
            wipeDown: function(){ parallax[page].bottom(); }
        })
    })
</script>

I hope I've made myself clear, otherwise feel free to take a jab at me, and I will supply further information if requested. I'm sure there is a simple explanation to why it isn't functioning the way I'd like it to, but I just can't seem to figure it out.

Answer 1

I finally figured out how to implement the TouchWipe script with Parallax.js.

Here's the answer for anyone experiencing the issue as myself in the future:

<script>
    $(document).ready(function(){
        $('#index').touchwipe({
            wipeLeft: function(){ $(".control").hide(); parallax.right.right(); },
            wipeRight: function(){ $(".control").hide(); parallax.left.left(); },
            wipeUp: function(){  $(".control").hide(); parallax.top.top();  },
            preventDefaultEvents: true
        });

        $('#right').touchwipe({
            wipeRight: function(){ $(".control").hide(); parallax.index.left(); },
            preventDefaultEvents: true
        })


        $('#left').touchwipe({
            wipeLeft: function(){ $(".control").hide(); parallax.index.right(); },
            preventDefaultEvents: true
        })

        $('#top').touchwipe({
            wipeDown: function(){ $(".control").hide(); parallax.index.bottom(); },
            preventDefaultEvents: true
        })

    });        
</script>

Turns out I had to call each function seperatly, why, I do not know, but for some reason it wouldn't accept calling both functions in the combined function.

So first, call the functions that hide the controls like so (seperate by semicolon, so you can add another function):

$(".control").hide();

Then you have to call the transition and page change like so (the last ID (parallax.xxxx.ID is used to call from which side you want the new page to slide in from - as I was using TouchWipe to set up the site as a webapp, I would of course slide the page in from the opposite site: wipeUp triggers parallax.top, wipeLeft triggers parallax.right etc.):

parallax.index.bottom();

Here is the new, improved and kickass jsfiddle: http://jsfiddle.net/Q96uH/2/

Code on my fellow stackers!