We Keep Coding

jQuery UI draggable prevents scrolling on mobile

I have draggable elements with full screen width listed vertically.
I am using a plugin called (jquery.ui.touch-punch) to enable jQuery draggable on mobile. But the problem is that the draggable elements prevent the user from scrolling the page.
$('#novieList .element .content').draggable({
axis: 'x',
revert: function() {
return $(this).position().left < 30;
},
containment: [ 0, 0, 75, 0 ],
scope: 'element',
scroll: false,
delay: 300,
drag: function(event, ui) {
return true;
},
start: function(event, ui) {
// Prevent to drag the element after open it
var left = $(this).position().left;
return left == 0;
},
stop: function(event, ui) {
var left = $(this).position().left;
if (left != 0) {
$(this).offset({left: 75});
}
return true;
}
});

I don't believe commenting out event.preventDefault() in jquery.ui.touch-punch.js works any longer. I tried the same solution and found that jQuery UI draggable itself was blocking the default behavior of a vertical scroll -- even when the element is set to drag only along the x-axis.
The solution that worked for me was to measure any change in the cursor's vertical position and use window.scrollBy to manually scroll the window by the same amount:
var firstY = null;
var lastY = null;
var currentY = null;
var vertScroll = false;
var initAdjustment = 0;
// record the initial position of the cursor on start of the touch
jqDraggableItem.on("touchstart", function(event) {
lastY = currentY = firstY = event.originalEvent.touches[0].pageY;
});
// fires whenever the cursor moves
jqDraggableItem.on("touchmove", function(event) {
currentY = event.originalEvent.touches[0].pageY;
var adjustment = lastY-currentY;
// Mimic native vertical scrolling where scrolling only starts after the
// cursor has moved up or down from its original position by ~30 pixels.
if (vertScroll == false && Math.abs(currentY-firstY) > 30) {
vertScroll = true;
initAdjustment = currentY-firstY;
}
// only apply the adjustment if the user has met the threshold for vertical scrolling
if (vertScroll == true) {
window.scrollBy(0,adjustment + initAdjustment);
lastY = currentY + adjustment;
}
});
// when the user lifts their finger, they will again need to meet the
// threshold before vertical scrolling starts.
jqDraggableItem.on("touchend", function(event) {
vertScroll = false;
});
This will closely mimic native scrolling on a touch device.

I found a solution to that problem at Scrolling jQuery UI touch punch. You have to remove a event.preventDefault() in jquery.ui.touch-punch.js on line 38. So far I have only tested on Sony Xperia Z1 Compact, Android 5, Chrome, but it works very well in a project very similar to one named here.

I had the problem regarding that I could scroll on mobile when my div was dragable, as the CSS of the Jquery UI had the following code set to none, so by reverting the changes by putting them on initial everything worked again!
.ui-draggable-handle {-ms-touch-action:initial!important;touch-action:initial!important}

Prevent scrolling when done too quickly with jQuery

In order to prevent mousewheel scrolling to scroll the entire page when reaching the top/bottom of an element with its own scrollbars, I'm using Brandon Aaron's Mousewheel plugin.
This works fine, as long as I don't scroll too quickly. It seems that when scrolling really quickly, two events will pass the "I haven't reached the top/bottom" check yet and will both be executed. However, one of them will then scroll the element to the top/bottom and the next one will then scroll the entire page, which was what I was trying to prevent.
I'm currently doing this
$('.popupContents').bind('mousewheel', function (e, d) {
var t = $(this);
if (d > 0 && t.scrollTop() === 0) {
e.preventDefault();
} else if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
});
(As posted in Prevent scrolling of parent element? )
How do I make it so that the function properly stops all events at the top/bottom even when the user scrolls quickly?

I ended up manually tracking the desired scroll position and disallowing the normal scroll event altogether.
var wantedScrollTop = 0;
$('.popupBody').bind('mousewheel', function (e, d) {
var t = $(this);
var scrollTo;
if (d > 0) {
scrollTo = Math.max(0, wantedScrollTop - 30);
} else if (d < 0) {
scrollTo = Math.min(t.get(0).scrollHeight - t.innerHeight(), wantedScrollTop + 30);
}
if (typeof scrollTo !== "undefined") {
wantedScrollTop = scrollTo;
t.scrollTop(wantedScrollTop);
//t.stop().animate({ scrollTop: wantedScrollTop + 'px' }, 150);
}
e.preventDefault();
});
d is the scroll direction, so I'm manually keeping track of the wanted scroll position here. In my case there is only one popup at a time, so I didn't bother sticking the wantedScrollTop in a data- attribute or something similar on the element, which could be useful when youdo have multiple elements that need to track their own scroll position.
It is not doing a fluent scroll like your browser would, but it will change the vertical scroll position by 30 pixels for each time the scrollwheel triggers the event. I left the commented out line in the code to show how that could be achieved. However, for me this resulted in scrolling which feeled very lagged when scrolling quickly.

Best way of making draggable element jump to cursor (and start drag) when mousedown on parent

I've got a home-made slider made from jQuery UI's draggable() function:
$("#petrolGauge .fuelBar .slider").draggable({
containment: "parent",
axis: "x",
drag:function(){
updValues();
},
start:function(){
$(this).css("background-color","#666");
},
stop:function(){
//checkForm();
$(this).css("background-color","#AAA");
}
});
This is for the following markup:
<div id="petrolGauge">
<input id="endPet" name="endPet" type="hidden" value="0">
How much fuel was left in the tank when you were finished? (Use the slider) <b>(~<span class="petLeft">0</span>%)</b>
<span class="mandatory">*</span><br />
<div class="fuelBar">
<div title="Drag" class="slider"></div>
</div>
This works a treat, when I click on the slider. But I'd like it so that when I click the fuel bar (the slider's parent) the slider not only starts dragging but also jumps to the cursor. I've achieved it by doing this:
$("#petrolGauge .fuelBar").on("mousedown",function(e){
slider = $("#petrolGauge .fuelBar .slider");
left = e.pageX-($(this).offset().left)-(slider.width()/2);
updValues();
slider.css("left",left).trigger(e);
});
Two problems with this:
Firstly, when clicking on the parent I get a couple of second's delay before the slider starts to drag? I've tried and tested this in Chrome and IE and both do it. Secondly if the cursor is less than half of the slider's width away from the edge of the parent, the slider will move to the outside of the parent. Wouldn't be hard to fix this with a couple of checking, but was wondering if there was another way? I'm suprised that draggable() doesn't have any parameters for this to be honest. I didn't want to use slider() if I could help it but if it's the only way, then it's the only way.
Here's a fiddle to work with.

The reason you get the delay is because you use .trigger() inside the .on() event which creates a big loop. As a result the loop slows down the moving process.
$("#petrolGauge .fuelBar").click(function (e) { // use click instead of mousedown
slider = $("#petrolGauge .fuelBar .slider");
left = e.pageX - ($(this).offset().left) - (slider.width() / 2);
if(left > 570) { left = 570; } else if(left < 0) { left = 0; }
// it looks like a draggable bug due to the manual position change, so use a small check
slider.css("left", left); // change the position first
updValues(); // then calculate and update the div
// no need to trigger the event a second time because it will loop until jQuery exceeds it's trigger limit.
});
Here's an updated FIDDLE
Updated answer
To make .slider move accordingly to the mouse movement when not directly dragged, bind a mousemove event to the mousedown and unbind it when mouseup. Then in .mousemove() you change the position of .slider.
var move = function (e) {
left = e.pageX - ($('#petrolGauge .fuelBar').offset().left) - (slider.width() / 2);
if (left > 570) {
left = 570;
} else if (left < 0) {
left = 0;
}
slider.css("left", left);
updValues();
};
var slider = $("#petrolGauge .fuelBar .slider");
$("#petrolGauge .fuelBar").mousedown(function (e) {
e.preventDefault();
left = e.pageX - ($(this).offset().left) - (slider.width() / 2);
if (left > 570) {
left = 570;
} else if (left < 0) {
left = 0;
}
slider.css("left", left)
$(this).bind('mousemove', move);
updValues();
}).mouseup(function () {
$(this).unbind('mousemove');
});

js smooth stick navigation

I have a question but I actually do not know how to ask.
I am trying to make a navigation bar stick on top when pass a point smoothly.
My reference is this -> http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html
My problem is when I use IE or Chrome to check it, there is a "blink" effect.
It is more like the scroll function will finish process after scroll over the point. So the things(HTML) after Nav will go on the top of the Nav on 0.1 ~ 0.3 secs then scroll function will finish process. Even through is short but it is visualize-able when the HTML over the nav.
However, If I use Firefox to check it, there is no such blink effect.....
May I ask what is the problem here I got?? What Should I check about??
My setting is a Anchor right before the Nav, Nav z-index = 99, and inside of the scroll function is below.
$(this).scrollTop() > $(anchor).offset().top
? nav.addClass('sticky')
: nav.removeClass('sticky')

jQuery(document).ready(function($) {
var my_nav = $('.navbar-sticky');
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = my_nav.offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
my_nav.addClass( 'stick' );
} else {
my_nav.removeClass( 'stick' );
}
};
var initio_parallax_animation = function() {
$('.parallax').each( function(i, obj) {
var speed = $(this).attr('parallax-speed');
if( speed ) {
var background_pos = '-' + (window.pageYOffset / speed) + "px";
$(this).css( 'background-position', 'center ' + background_pos );
}
});
}
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
initio_parallax_animation();
});
});

Horizontal swipe gesture and vertical page scroll

I am building a mobile site and I have a slide show of images that allows sliding through images horizontally. The javascript library I'm using is bxslider. However, if one touches the slide show and wants to scroll the page up/down, the slide show blocks vertical scrolling and hence another section of the site must be touched.
Could someone please tell me how I could keep vertical scroll enabled (i.e, not allow the slideshow to block the normal scroll?)
Thanks!

Try this, Change the onTouchMove fn in the bxslider library to this
var onTouchMove = function (e) {
if (slider.settings.mode != 'fade') {
var orig = e.originalEvent;
var value = 0;
// if horizontal, drag along x axis
if (slider.settings.mode == 'horizontal')
{
var hchange = orig.changedTouches[0].pageX - slider.touch.start.x;
var vchange = orig.changedTouches[0].pageY - slider.touch.start.y;
if(Math.abs(hchange)>20 && Math.abs(hchange)>Math.abs(vchange))
{
value = slider.touch.originalPos.left + hchange;
setPositionProperty(value, 'reset', 0);
e.preventDefault();
}
// if vertical, drag along y axis
} else{
e.preventDefault();
var change = orig.changedTouches[0].pageY - slider.touch.start.y;
value = slider.touch.originalPos.top + change;
setPositionProperty(value, 'reset', 0);
}
}
}

If you goto the options page for the bxslider website, search for preventDefaultSwipeX, and preventDefaultSwipeY
Those are what you are looking for.