split pane jquery plugin for touch devices

Question

I am using the split-pane.js Jquery plugin for a vertical split-screen view in a website with draggable widths. Plugin and Demo

The only issue I have is: It's not working on touch devices.

Is there any way to add this functionalty? I already tried the Jquery UI touch punch plugin.

Here's the code that fires the split screen functionality:

$(function() {
var min = 300;
var max = 1200;
var mainmin = 490;

$('#split-bar').mousedown(function (e) {
    e.preventDefault();
    $(document).mousemove(function (e) {
        e.preventDefault();
        var x = e.pageX - $('#sidebar').offset().left;
        if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
          $('#sidebar').css("width", x);
          $('#main').css("margin-left", x);
        }
    })
});
$(document).mouseup(function (e) {
    $(document).unbind('mousemove');
});

});

score 0 · Answer 1 · answered May 17 '15 at 10:52

Solved! The line: var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; makes the difference.

But now i have to detect the device with Modernizer and run two different scripts for desktop and touchdevices.

I don't think that's best practise. How could i reduce this solution?

The code now looks like this:

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) { /*Splitscreen for Touchdevices*/
    $(function() {
        var min = 300;
        var max = 1200;
        var mainmin = 300;

        $('#split-bar').on( "touchstart", function(e){
            e.preventDefault();
            $(document).on( "touchmove", function(e){
                e.preventDefault();
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                var x = touch.pageX - $('#sidebar').offset().left;
                if (x > min && x < max && touch.pageX < ($(window).width() - mainmin)) {  
                  $('#sidebar').css("width", x);
                  $('#main').css("margin-left", x);
                }
            })
        });
        $(document).on( "touchend", function(e){
            $(document).unbind("touchmove");
        });         
    });
} else {
    $(function() { /*Splitscreen for Desktop*/
    var min = 300;
    var max = 1200;
    var mainmin = 490;

    $('#split-bar').on( "mousedown touchstart", function(e){
        e.preventDefault();
        $(document).on( "mousemove touchmove", function(e){
            e.preventDefault();
            var x = e.pageX - $('#sidebar').offset().left;
            if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
              $('#sidebar').css("width", x);
              $('#main').css("margin-left", x);
            }
        })
    });
    $(document).on( "mouseup touchend", function(e){
        $(document).unbind("mousemove touchmove");
    });         
});

}

split pane jquery plugin for touch devices

1 Answers1