Can't get my javascript action to run on tablet & mobile

Question

I have put together a website and using javascript to run a script that allows you to move between one image and another to see the before and after of an image. The javascript works fine on a desktop but on a mobile and tablet I can't get the same effect to run properly. Do I need to include something to enable to this work on mobile & tablet?

This is one of the pages that I am on about where the effect is active. Here

You will need to view this on a mobile and tablet to see it not working as it should.

Also here is the javascript that I am using if it helps. Let me know if you require anything else.

$(document).ready(function(){
    var wrapper = $("div.reveal-visible");

    wrapper.mousedown(function(e) {
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }).mousemove(function(e) {
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).mouseup(function(e) {
        wrapper.data("sliding", false);
    });
});

Answer 1

Take a look at this answer to a similar question. The premise is to use JQuery's bind method which attaches a handler to an event for an element it is applied to. The bind method takes an eventType argument, which is a String containing one or more DOM events. The method also takes a function, which it should execute when the event has occurred, as an argument.

Then for mobile devices (which have touchscreens) use the touch equivalents of the mouse events: touchstart, touchmove, touchend.

So, change your code to the following:

$(document).ready(function(){
    var wrapper = $("div.reveal-visible");

    wrapper.bind("mousedown touchstart", function(e){
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    });

    wrapper.bind("mousemove touchmove", function(e){
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).bind("mouseup touchend", function(e){
        wrapper.data("sliding", false);
    });

});

Edit: Okay, so the reason it didn't work this time is because when it's a touch screen we have to get the touch point from the touch event. Instead of using e.pageX for the touchscreen, use e.changedTouches[0].pageX. So here's the updated code:

$(document).ready(function(){
    var wrapper = $("div.reveal-visible");

    wrapper.bind("mousedown touchstart", function(e){
        var offs;
        $(this).data("sliding", true);
        if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
            offs = e.pageX - $(this).offset().left;
        }else{
            offs = e.changedTouches[0].pageX - $(this).offset().left;
        }
        $(this).find("div").width(offs);
    });

    wrapper.bind("mousemove touchmove", function(e){
        if($(this).data("sliding")){
            var offs;
            if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
                offs = e.pageX - $(this).offset().left;
            }else{
                offs = e.changedTouches[0].pageX - $(this).offset().left;
            }
            $(this).find("div").width(offs);
        }
    });

    $(document).bind("mouseup touchend", function(e){
        wrapper.data("sliding", false);
    });

});

Edit: So, the code was correct but the problem was with the JQuery Event Object. The JQuery event object only supports certain types of events and the touch events are not included. There is JQuery Mobile, which including a link to that library should fix your problem. But I chose to intermingle more "plain" JavaScript into the code to not have to rely on another resource. The below code is tested and works:

$(document).ready(function(){
        var wrapper = $("div.reveal-visible");
        var w = document.getElementsByClassName("reveal-visible")[0];

        w.addEventListener("touchstart", start);
        w.addEventListener("touchmove", move);
        wrapper.bind("mousedown", start);
        wrapper.bind("mousemove", move);

        function start(e){
            var offs;
            $(this).data("sliding", true);
            if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
                offs = e.pageX - $(this).offset().left;
            }else{
                offs = e.changedTouches[0].pageX - $(this).offset().left;
            }
            $(this).find("div").width(offs);
        }

        function move(e){
             if($(this).data("sliding")){
                 var offs;
                 if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
                     offs = e.pageX - $(this).offset().left;
                 }else{
                     offs = e.changedTouches[0].pageX - $(this).offset().left;
                 }
                 $(this).find("div").width(offs);
             }
        }

        $(document).bind("mouseup touchend", function(e){
            wrapper.data("sliding", false);
        });

    });