Image Compare not working on mobile

[chraebsli]

Hello,

I am using the latest version of Grav and the short code UI plugin. I have a part where I am using this:

[ui-image-compare]
![image1](img1.jpg)
![image2](img2.jpg)
[/ui-image-compare]

On Desktop mode, it works fine but if I look at it on my phone it loads, but I cannot move the bar. Did someone have the same problem and found a solution?

Thanks for helping me chraebsli

[vecjh]

same here as well!

[bnd-re]

Hi, i am new to GitHub and have never created a pull request before, but i found a solution for this Problem and want to share it here.

The Problem is, that touch events are not recognized. the following code works for me (in ui-slider.js):

//draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
    dragElement.on("mousedown vmousedown touchstart", function(e) {
        dragElement.addClass('draggable');
        resizeElement.addClass('resizable');

        if (e.type == "touchstart") {
            var pageX = e.originalEvent.changedTouches[0].pageX;
        } else {
            var pageX = e.pageX
        }

        var dragWidth = dragElement.outerWidth(),
            xPosition = dragElement.offset().left + dragWidth - pageX,
            containerOffset = container.offset().left,
            containerWidth = container.outerWidth(),
            minLeft = containerOffset - dragWidth/2,
            maxLeft = containerOffset + containerWidth - dragWidth/2;

        dragElement.parents().on("mousemove vmousemove touchmove", function(e) {

            if (e.type == "touchmove") {
                pageX = e.originalEvent.changedTouches[0].pageX;
            } else {
                pageX = e.pageX
            }

            leftValue = pageX + xPosition - dragWidth;

            //constrain the draggable element to move inside his container
            if(leftValue < minLeft ) {
                leftValue = minLeft;
            } else if ( leftValue > maxLeft) {
                leftValue = maxLeft;
            }

            widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';

            $('.draggable').css('left', widthValue).on("mouseup vmouseup touchend", function() {
                $(this).removeClass('draggable');
                resizeElement.removeClass('resizable');
            });

            $('.resizable').css('width', widthValue);

            updateLabel(labelResizeElement, resizeElement, 'left');
            updateLabel(labelContainer, resizeElement, 'right');

        }).on("mouseup vmouseup touchend", function(e){
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
        e.preventDefault();
    }).on("mouseup vmouseup touchend", function(e) {
        dragElement.removeClass('draggable');
        resizeElement.removeClass('resizable');
    });
}

1. You have to add "touchstart", "touchmove" and "touchend" to the events.
2. On touch events, "e.pageX" is not available. You have to use "e.originalEvent.changedTouches[0].pageX"

...hope this helps.

[rhukster]

A pull request would be greatly appreciated. It’s very easy to do and well documented. https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

[WHOOHAA]

I am having the same issue and great fix @bnd-re . Looking forward to it being in the update soon.