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
}
Related
I am using BlueImp Gallery (DEMO). I need to lock hide the buttons on certain situations, that worked great. But now I also need to hide the mouse and touch swipes as well.
Explanation: Users can swipe left or right, this will change the current picture.
I was not able to find the responsible event yet. How can I deactivate the swipe events and active it again? Is that possible?
They had no intend of publishing this feature, but it's in there.
var galleryContext
// initalize your gallery
blueimp.Gallery([{/* your images */}], {
// we need the context of the gallery
onopened: function () {
galleryContext = this
}
})
// now disable
galleryContext.destroyEventListeners()
// or enable
galleryContext.initEventListeners()
You can use on() like,
$(document).on('click touchmove',function(){
if(CERTAIN_SITUATIONS){ // only on certain situations
return false;// it will prevent to do anything in your document
}
});
If you want a div or container to be disable then use it like,
$(document).on('click touchmove','CONTAINER_ID_OR_CLASS',function(){
....
You can use stopPropagation() to prevent bubbling,
$(document).on('click touchmove',function(e){
if(CERTAIN_SITUATIONS){ // only on certain situations
e.stopPropagation();
return false;// it will prevent to do anything in your document
}
});
this worked for me: (tested on v3.2.0)
this.galleryInstance = blueimp(this.config.images, options);
this.galleryInstance.destroyEventListeners();
//this line makes sure no touch events are registered in the init function
//and preserving other events in tact
this.galleryInstance.support.touch = false;
this.galleryInstance.initEventListeners();
This is my first question, so i try to describe it precisely as possible and follow the stackoverflow guideline "How do I ask a good question?"
My Problem:
Im using the "old but gold" infinite-scroll jQuery plugin to load the next posts on a wordpress site. Im also using the lazyframe plugin to load youtube videos "lazy" with a click on the play button of a video. To ensure the lazyframe function after loading a set of new posts with the infinte scroll function, im initializing the lazyframe in the following way with adding the lazyframe('.lazyframe'); initializing code to the function(newElements) part of the infinite-scroll js:
//infinite scroll
if ($masonry.length && obj_testsite.infinitescroll != 'disable') {
nextSelector = obj_testsite.nextselector;
if (document.URL.indexOf('/source/') != -1) {
nextSelector = '#navigation #navigation-next a';
}
$masonry.infinitescroll({
navSelector : '#navigation',
nextSelector : nextSelector,
itemSelector : '.thumb',
prefill: true,
bufferPx : 500,
loading: {
msgText: '', // load spinner icon instead of gif images - see below
finishedMsg: obj_testsite.__allitemsloaded,
img: '',
finished: function() {}
}
}, function(newElements) {
lazyframe('.lazyframe');
var $newElems = $(newElements);
$('#infscr-loading').fadeOut('normal');
$masonry.masonry('appended', $newElems, true);
});
}
So far, this works fine. BUT, when i scroll down and load a few set of posts with infinite-scroll and then click the the play button sometimes the lazyframe plugin creates multiple youtube iframes.
My research so far showed me, that the reason why the event is firing multiple times is, because the event is attached to the element multiple times. The following code shows the part where the lazyframe plugin uses the addEventListener function to target an element in a document:
function n(e) {
if (e instanceof HTMLElement != !1) {
var t = {
el: e,
settings: i(e)
};
t.el.addEventListener("click", function() {
return t.el.appendChild(t.iframe)
}), d.videolazyload ? l(t) : s(t, !!t.settings.thumbnail)
}
}
Any idea how to solve this problem? I tried to stop the event propagation, but i was not able to fix it because of lack of knowledge. Any help would be appreciated.
Plugin author here. Thanks for using it!
There was a bug in the plugin that would attach multiple event listeners on the element/elements upon reinitialization. That's sorted in v1.1.1 so just update the plugin and it should work.
You use event capturing in your eventListener. Actually, not all browsers support event capturing (for example, Internet Explorer versions less than 9 don't) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery's included.
The nearest to what you are looking for in jQuery is using on().
So you can change your code to this (event):
$(t.el).off('click').on('click', function() {
return t.el.appendChild(t.iframe)
});
off() function remove event listener (in our case 'click') on element that you specified, so you can try this solution.
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.
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();
});
How can I detect/query, whether a changepage / transition is currently ongoing in jQuery Mobile (jQM)?
My goal is to prevent opening a dialog when a switch between pages is currently happening. Currently, th UI breaks when a dialog opens while a changepage event is ongoing.
Any Ideas on that?
In JQM 1.4.0 the class ui-mobile-viewport-transitioning is added the body tag during transitions so the following works for me:
if (!$("body.ui-mobile-viewport-transitioning").length) {
//do something
}else{
console.log("Don't do it we are transitioning")
return false
}
pagebeforeshow
Triggered on the page being shown, before its transition begins.
pagebeforehide
Triggered on the page being hidden, before its transition begins.
pageshow
Triggered on the page being shown, after its transition completes.
pagehide
Triggered on the page being hidden, after its transition completes.
http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
I didn't find transition state information within jQuery Mobile, however you can simply add three events, one before and one after the change and one for when the page change has failed. Then, keep in a global variable whether a transition is currently occuring:
window.transitioning = false;
$(document).on("pagebeforechange", function() { transitioning = true; });
$(document).on("pagechange", function() { transitioning = false; });
$(document).on("pagechangefailed", function() { transitioning = false; });
In this example, I create a global variable transitioning but you could create this variable where you see fit, e.g. making a local variable in your dialog handler rather than using a global variable.
You can now add your condition like this:
if(!transitioning) {
// Do your stuff
} else {
// Delegate the events by listening for pagechange and then do your stuff
}