windows phone 8

[christian70]

did anybody find any issue with windows phone 8? on my site the slider is perfectly working on most browsers and devices (also ipad and other touch enabled devices) except on my nokia with windows phone 8. On it the slider is stuck to the first image, the swipe feature doesn't work and nor the pagination links does. any suggestion to fix it? is it an already known issue or just my fault? thanx.

[jtwee]

I just came across this myself and wish I'd known ahead of time. The reason it's not working is because Internet Explorer doesn't support the same touch events as every other mobile browser, and instead uses their own (e.g., MSPointerMove instead of touchmove).

The two options are to hack it yourself and add support for the corresponding MSPointer events, or to conditionally load a separate touch library (like hammer.js), listen for the corresponding gestures and then trigger your own next/prev that way.

If I come up with anything helpful for my project I'll post it here.

[jtwee]

This can be fixed by editing the touch event handling functions and adding code from here (http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx).

After every occurrence of var orig = e.originalEvent; add the line var touchPoints = (typeof orig.changedTouches != 'undefined') ? orig.changedTouches : [orig];

Then use the variable touchPoints in place of all instances of orig.changedTouches

For example, the onTouchStart function becomes:

var onTouchStart = function(e){
    if(slider.working){
        e.preventDefault();
    }else{
        // record the original position when touch starts
        slider.touch.originalPos = el.position();
        var orig = e.originalEvent;
        var touchPoints = (typeof orig.changedTouches != 'undefined') ? orig.changedTouches : [orig];
        // record the starting touch x, y coordinates
        slider.touch.start.x = touchPoints[0].pageX;
        slider.touch.start.y = touchPoints[0].pageY;
        // bind a "touchmove" event to the viewport
        slider.viewport.bind('touchmove MSPointerMove', onTouchMove);
        // bind a "touchend" event to the viewport
        slider.viewport.bind('touchend MSPointerUp', onTouchEnd);
    }
}

Also, make sure that all touch event bind/unbinds have MSPointer events added and the bx-wrapper has the following style applied:

.bx-wrapper {
    -ms-touch-action: none;
}

"touchstart" becomes "touchstart MSPointerDown" "touchmove" becomes "touchmove MSPointerMove" "touchend" becomes "touchend MSPointerUp"

[christian70]

I made all the changes that you suggested in the core js file. Though I've not got any Windows mobile device at hand at the moment. As soon as I get it I'll let you know if it worked to me. Thank you for your support indeed.

[christian70]

Well I tested this fix with a Nokia Lumia featuring Windows Mobile but unfortunately it seems it doesn't work to my site. You can have a look at my image slider here: http://www.caon-arreda.it/treee-tray-tavolino. It is expected to get both touch scrolling and click event to open up a full screen slideshow. It works with other devices like iPhone and iPad.

[jtwee]

The changes worked for my site, but it's not public so I can't show you the source. I tried yours and as you said it wasn't working. Perhaps try removing other event handlers, such as the click events and see if there's some conflict or a preventDefault stopping the pointer events from triggering. Otherwise try putting the ms-touch-action in other places, such as on the slides themselves, or on the body and see if anything changes. Sorry I can't help any more at this point.

[intsfanatic]

hi, i have the same problem with wp. is there anything else i need to add other than this: var touchPoints = (typeof orig.changedTouches != 'undefined') ? orig.changedTouches : [orig]; because i couldnt get it to work. this is my testsite: http://design.imago.ee/test/bxslider/index.html

[jtwee]

I created a fork with the fixes included (https://github.com/breams/bxslider-4), but it hasn't been merged back in yet. I have no idea whether that's on the cards or not.

[PulkitRangwani]

This worked for me windows 8 ie11

var initTouch = function(){ // initialize object to contain all touch values slider.touch = { start: {x: 0, y: 0}, end: {x: 0, y: 0} }

        if (window.navigator.msPointerEnabled) {
            slider.viewport.bind('pointerdown', onTouchStart);
        } else {
            slider.viewport.bind('touchstart', onTouchStart);
        }
    }

    /**
     * Event handler for "touchstart"
     *
     * @param e (event)
     *  - DOM event object
     */
    var onTouchStart = function(e){
        if(slider.working){
            e.preventDefault();
        }else{
            // record the original position when touch starts
            slider.touch.originalPos = el.position();
            var orig = e.originalEvent;
            // record the starting touch x, y coordinates
            if (window.navigator.msPointerEnabled) {
                slider.touch.start.x = orig.pageX;
                slider.touch.start.y = orig.pageY;

                // bind a "touchmove" event to the viewport
                slider.viewport.bind('mousemove', onTouchMove);
                // bind a "touchend" event to the viewport
                slider.viewport.bind('mouseup', onTouchEnd);
            } else {
                slider.touch.start.x = orig.changedTouches[0].pageX;
                slider.touch.start.y = orig.changedTouches[0].pageY;

                // bind a "touchmove" event to the viewport
                slider.viewport.bind('touchmove', onTouchMove);
                // bind a "touchend" event to the viewport
                slider.viewport.bind('touchend', onTouchEnd);
            }
        }
    }

    /**
     * Event handler for "touchmove"
     *
     * @param e (event)
     *  - DOM event object
     */
    var onTouchMove = function(e){
        var orig = e.originalEvent;

        var origPageX;
        var origPageY;
        if (window.navigator.msPointerEnabled) {
            origPageX=orig.pageX;
            origPageY=orig.pageY;
        } else {
            origPageX = orig.changedTouches[0].pageX;
            origPageY = orig.changedTouches[0].pageY;
        }
        // if scrolling on y axis, do not prevent default
        var xMovement = Math.abs(origPageX - slider.touch.start.x);
        var yMovement = Math.abs(origPageY - slider.touch.start.y);
        // x axis swipe
        if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
            e.preventDefault();
        // y axis swipe
        }else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
            e.preventDefault();
        }
        if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
            var value = 0;
            // if horizontal, drag along x axis
            if(slider.settings.mode == 'horizontal'){
                var change = origPageX - slider.touch.start.x;
                value = slider.touch.originalPos.left + change;
            // if vertical, drag along y axis
            }else{
                var change = origPageY - slider.touch.start.y;
                value = slider.touch.originalPos.top + change;
            }
            setPositionProperty(value, 'reset', 0);
        }
    }

    /**
     * Event handler for "touchend"
     *
     * @param e (event)
     *  - DOM event object
     */
    var onTouchEnd = function (e) {
        if (window.navigator.msPointerEnabled) {
            slider.viewport.unbind('mousemove', onTouchMove);
        } else {
            slider.viewport.unbind('touchmove', onTouchMove);
        }

        var orig = e.originalEvent;
        var value = 0;
        // record end x, y positions
        if (window.navigator.msPointerEnabled) {                
            slider.touch.end.x = orig.pageX;
            slider.touch.end.y = orig.pageY;
        } else {
            slider.touch.end.x = orig.changedTouches[0].pageX;
            slider.touch.end.y = orig.changedTouches[0].pageY;
        }

        // if fade mode, check if absolute x distance clears the threshold
        if(slider.settings.mode == 'fade'){
            var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
            if(distance >= slider.settings.swipeThreshold){
                slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
                el.stopAuto();
            }
        // not fade mode
        }else{
            var distance = 0;
            // calculate distance and el's animate property
            if(slider.settings.mode == 'horizontal'){
                distance = slider.touch.end.x - slider.touch.start.x;
                value = slider.touch.originalPos.left;
            }else{
                distance = slider.touch.end.y - slider.touch.start.y;
                value = slider.touch.originalPos.top;
            }
            // if not infinite loop and first / last slide, do not attempt a slide transition
            if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
                setPositionProperty(value, 'reset', 200);
            }else{
                // check if distance clears threshold
                if(Math.abs(distance) >= slider.settings.swipeThreshold){
                    distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
                    el.stopAuto();
                }else{
                    // el.animate(property, 200);
                    setPositionProperty(value, 'reset', 200);
                }
            }
        }

        if (window.navigator.msPointerEnabled) {
            slider.viewport.unbind('mouseup', onTouchMove);
        } else {
            slider.viewport.unbind('touchend', onTouchEnd);
        }
    }

[jtwee]

I've moved onto using a carousel that is actually maintained, but someone else has added a pull request for Windows touch compatibility here https://github.com/stevenwanderski/bxslider-4/pull/596.

[Tidal-Wave]

Sorry for any lack of communication, I have been added to this project to maintain it. We are looking to include fixes for this in our next update. Closing for housekeeping purposes. Related to https://github.com/stevenwanderski/bxslider-4/pull/596.

[timholz]

@PulkitRangwani Thank you for the solution. I tested nokia (930/925) devices on browserstack. Looks good. All the best to you theo

p.s.: you have two console.log in your script. They cause trouble in ie9 and below