jQuery UI slider with Touch Punch: handle locked

Question

I'm using jQuery UI slider with Touch Punch (http://touchpunch.furf.com) so it works on touch mobile devices. The slider sits in a header which is position:fixed to the top. Content below the header isn't fixed and scrolls underneath the header as you scroll up. It works fine on desktop however when I tested it on an iPhone the slider handle isn't draggable once you start scrolling up.

I think it's executing the scroll event rather than the click/touch event for the handle.

<div id="top">
  <div id="slider"></div>
</div>

<div class="pics">CONTENT</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">    
$('document').ready(function() {

$(function() {
    $( "#slider" ).slider({
        value:250,
        min: 50,
        max: 1000,
        range: "min",
        step: 50,
        slide: function( event, ui ) {
        $( "#amount" ).html( ui.value );
        }
    });
});
});
</script>


//css//

#top {
width: 100%;
position: fixed;
top:0; }

.pics {
margin: 0 auto;
width: 100%;
max-width: 1280px;
padding-top: 86px;}

After looking around I've tried adding this to disable scroll over the #top div:

$("#top").bind("touchstart", function(e) { e.preventDefault(); });

But I presume that doesn't work as it's still picking up the div with class .pics underneath?

Thanks for any help you may give and apologise if I'm not making sense or missing the obvious!

score 0 · Answer 1 · answered Dec 10 '12 at 21:14

OK I think I've found a fix for this. Probably not the most efficient way and I've only been able to check it on iPhone and iPad so far.

var divTop = $("#top").height();

$(document).bind("touchmove", function(e) { 
if (e.originalEvent.touches[0].clientY < divTop) {
    e.preventDefault();     
}
});

So if the touchmove event is triggered in the same area covered by the div #top the default action is prevented (i.e. scroll) but the slider handle works.

jQuery UI slider with Touch Punch: handle locked

1 Answers1