Develop Reference

Prevent child event from firing

I have a slider that I am currently making. I am making slow progress, but I am making progress nonetheless!
Currently I have this:
http://codepen.io/r3plica/pen/mEKyGG?editors=1011#0
There are 2 things you can do with this control, the first thing is you can drag left or right. The second thing you can do is click a "point" and it will scroll to the center.
The problem I have is that if I start dragging from a point, when I let go it will invoke the moveToCenter method.
I have tried to prevent this by adding
// Stop from accessing any child events
e.preventDefault();
e.stopPropagation();
to the end of the dragEventHandler, but this did not work.
I also have 2 boolean values options.drag and options.start. I though I might be able to use them somehow (if the drag has started and is enabled then don't perform the moveToCenter but this didn't work either.
Do anyone have any idea how to get this to work?

Maybe this will help. You can register your events in bubbling or capturing mode, using addEventListener method. It defines orders of processing your events - child -> parent (bubbling), or vice versa (capturing).
http://www.quirksmode.org/js/events_advanced.html
So, if you use addEventListener(event, handler, true), it will use capturing event mode.
Codepen:
http://codepen.io/anon/pen/bZKdqV?editors=1011
divs.forEach(function (div) {
div.addEventListener('click', function(e) {
e.stopPropagation();
console.log('parent');
}, true);
});
Be aware of browser support (IE9+). All modern browsers - yes, of course.
http://caniuse.com/#search=addeventlistener
Update
So it turned out to be easier than first approach. (no need for capturing)
Check out codepen:
http://codepen.io/anon/pen/QExjzV?editors=1010
Changes from your sample:
At the beginning of moveToCenter: function(e, options, animate) function
if (options.started) {
return;
}
In if (['mouseup', 'mouseleave'].indexOf(e.type) > -1):
setTimeout(function() {
options.started = false;
} , 100);
instead of
options.started = false;
Hope this helps.

Prevent Swiping/Dragging of slides in PhotoSwipe

I can not seem to get Photoswipe to prevent a drag/swipe from changing slides (so only the arrows go to the previous/next slides)
The issue is that I've got a HTML slide with touch events inside it, but photoswipe's touch events are superseding them and while dragging around in the content of the slide, the entire slide moves too...
I thought this event was supposed to prevent it?
pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
preventObj.prevent = true;
});
I also tried the 'isClickableElement' option, but that doesn't seem to help, either...

This method isn't ideal, but if you're looking to disable swiping/dragging without having to use a modified version of PhotoSwipe, this worked for me:
var allowSwipe = false;
function preventSwipe (e) {
if (!allowSwipe) {
e.preventDefault();
e.stopPropagation();
}
}
pswp.container.addEventListener('pointerdown', preventSwipe);
pswp.container.addEventListener('MSPointerDown', preventSwipe);
pswp.container.addEventListener('touchstart', preventSwipe);
pswp.container.addEventListener('mousedown', preventSwipe);
Or if you're using jQuery:
var allowSwipe = false;
$(pswp.container).on('pointerdown MSPointerDown touchstart mousedown', function () {
return allowSwipe;
});
Using the allowSwipe variable, you can re-enable swiping at any point by setting it to true.

Owl Carousel Event from Click or Autoplay

Trying to find a way to differentiate between Owl Carousel 2.0 Events (translate, or change) that were triggered by a mouse click vs. triggered by an autoplay event.
I would be extra grateful for an answer which approaches the question in a more general form– For an event which can be simultaneously trigger by the user and a setInterval, are there any properties of the event which can help to differentiate the source?
Example Set Up

You can use a boolean to track when the carousel is clicked.
var clicked = false;
$('.carousel').click(function() {
clicked = true;
$(this).trigger('next.owl.carousel');
});
$('.carousel').on('change.owl.carousel', function(event) {
if (clicked) {
clicked = false;
$('.info').text('click');
} else {
$('.info').text('autoplay');
}
});
Updated fiddle: http://jsfiddle.net/jn67faot/

I presume you were doing this in an attempt to add some logic into the autoplay event.
In case you were, I was able to accomplish this by doing the following.
Within the owl.carousel.js file you will find autoplay events.
In my particular case, I was looking to add functionality to the end of the autoplay processing.
Autoplay.prototype._next = function(speed) {
// Native Carousel Logic
// Additional Custom Code here
}

Scratch Effect Plugin: getting the scratch to go across multiple panels without lifting mouse

I'm using the HTML5 rabid scratch plugin to achieve a grid of little panels that can be scratched off to reveal images behind.
Demo:
http://jsfiddle.net/CeTR8/2/
Problem:
When you click and drag over a panel, it scratches that panel but you have to mouseup and mousedown for each panel. I'd like scratch from one to another without having to mouseup and mousedown.
I've tried making the following modifications to trigger on mousemove (if mouse button is also down) and it's somewhat working on safari/chrome in Mac but not in IE9 and probably others..
// Bind downHandler to mousemover instead
self.theCanvas.bind('mousemove', $.proxy(self.addDownHandler, self));
// self.theCanvas.bind('mousedown', $.proxy(self.addDownHandler, self));
// self.theCanvas.bind('mouseup', $.proxy(self.addUpHandler, self));
// $(window).bind('mouseup', $.proxy(self.addUpHandler, self));
....
addDownHandler: function (e) {
// only scratch if mouse down
if(e.which == 1){
var self = this;
self.theCanvas.bind('mousemove', $.proxy(self.mouseMoveHandler, self));
}
}
Current
http://jsfiddle.net/CeTR8/3/
Is there a better way to do this that will work across browsers?

http://jsfiddle.net/ericjbasti/CeTR8/5/
Changed
self.theCanvas.bind('mousedown', $.proxy(self.addDownHandler, self));
to
$(window).bind('mousedown', $.proxy(self.addDownHandler, self));

Enable and disable jquery knob dynamically

I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?
Ideally I would like to do something like this (on a disabled knob)
$('.button').click(function() {
$('.knob').enable();
});
Edit:
I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.

html
<input class="knobSlider" data-readOnly="true">
<button id="testBtn">clickHere</button>
script
in doc ready,
$(".knobSlider").knob();
$("#testBtn").click(function(){
$(".knobSlider").siblings("canvas").remove();
if($(".knobSlider").attr("data-readOnly")=='true'){
$(".knobSlider").unwrap().removeAttr("data-readOnly readonly").data("kontroled","").data("readonly",false).knob();
}
else{
$(".knobSlider").unwrap().attr("data-readOnly",true).data("kontroled","").data("readonly",true).knob();
}
});
For reference you can use my jsfiddle link > http://jsfiddle.net/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)

If someone doesn't like how the accepted answer destroys and recreates the internal canvas element, then checkout my approach:
https://jsfiddle.net/604kj5g5/1/
Essentially, check the draw() implementation (I also recommend listening on value changes in the draw method instead of the change and release, which work for and click and mousewheel events respectively, which imo is inconvenient).
var $input = $("input");
var knobEnabled = true;
var knobPreviousValue = $input.val();
$input.knob({
draw: function () {
if (knobPreviousValue === $input.val()) {
return;
}
if (!knobEnabled) {
$input.val(knobPreviousValue).trigger("change");
return;
}
knobPreviousValue = $input.val();
console.log($input.val());
},
});

Try this to disable the control.
I'm still trying to find a way to enable it back
$("#btnDisable").click(function(){
$("#knob").off().prev().off();
});