I have a page with a full screen revolution slider on it. I need for the slides to advance on the scroll wheel. The code I have below uses the scroll event (not mousewheel) to advance through the slides but has one inherent problem. If you really spin the mousewheel, it will scroll through the entire deck all at once and you really can't control where you end up. I was hoping to remove the listener once one use of the scroll wheel has been detected and then add it again right after the slide changes ... something like that ... I'm only guessing ... or maybe it could somehow constrain the scroll event to one click?
What I have now in my document ready code block:
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
revapi17.revnext();;
}
else
{
revapi17.revprev();;
}
_top = _cur_top;
console.log(_direction);
});
Reference for revolution slider API: http://clapat.ro/themes/creative/doc/rev-documentation.html#!/publicapi
dev URL: http://devonline.wpengine.com/story-2/
UPDATE: Thanks everyone. I found a solution:
// bounce if slider isn't present on the page
if(typeof revapi17 === 'undefined') return;
// add wheel listener when slide changes
revapi17.on('revolution.slide.onchange', onChange);
function onChange() {
// remove wheel listener before adding it to ensure event only fires once
revapi17.off('DOMMouseScroll mousewheel').on('DOMMouseScroll mousewheel', onWheel);
}
function onWheel(event) {
// remove wheel listener as soon as wheel movement is detected
revapi17.off('DOMMouseScroll mousewheel');
event = event.originalEvent;
if(event.wheelDelta > 0 || event.detail < 0) {
revapi17.revprev();
}
else {
revapi17.revnext();
}
}
Related
I need to add back navigation on swipe. I can do that fairly easily by just adding a swipe listener to the page view and calling goBack. But I really would like the animation that goes with it (in Instagram or FB) where as soon as you start dragging your thumb, the page translates to the right and the previous page starts to translate into view. And then once you get to a certain point it actually performs the navigation.
I tried animating the page, as well as the frame to the right figuring since the view isn't being destroyed it might work. But it doesn't display the page Im navigating back to.
Looking for help on how to accomplish this!
I guess you might have come across the other SO thread answering this question natively.
All you have to do is modify the default gesture recogniser on iOS frame.
export function onNavigatedFrom(args: EventData) {
console.log("Adding gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && !(<any>frame)._gestureRecognizer) {
const controller = frame.ios.controller;
const popGestureRecognizer = controller.interactivePopGestureRecognizer;
const targets = popGestureRecognizer.valueForKey("targets");
if (targets) {
let gestureRecognizer = UIPanGestureRecognizer.alloc().init();
gestureRecognizer.setValueForKey(targets, "targets");
frame.nativeView.addGestureRecognizer(gestureRecognizer);
(<any>frame)._gestureRecognizer = gestureRecognizer;
}
}
}
export function onNavigatedTo(args: EventData) {
console.log("Back to root page, removing gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && (<any>frame)._gestureRecognizer) {
frame.nativeView.removeGestureRecognizer((<any>frame)._gestureRecognizer);
(<any>frame)._gestureRecognizer = null;
}
}
Playground Sample
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
I work with Openlayers 2.x and I have zoomstart event
map.events.register('zoomstart', map, function(e) {
// 1. OpenLayers.Event.stop(event);
// 2. return ;
// 3. e.preventDefault();
}
});
My way (1,2,3) not working and event does not stop and change zoom level. Can anybody help me?
The zoom event is triggered by the zoomBarUp function in PanZoomBar control, see: http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js and the line
this.map.zoomTo(zoomLevel);
One way to prevent zoom for zoom levels above 13 would be to override this function, which you can do by adding your own version, either in a standalone js file or by using prototype within you OpenLayers init function, ie, after OpenLayers has loaded.
OpenLayers.Control.PanZoomBar.prototype.zoomBarUp = function(evt){
//copy here the code from the actual function
if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
return;
}
//rest of code .....
//put in your check for zoom level here before calling this.map.zoomTo(zoomLevel);
if(this.map.zoom<13){
this.map.zoomTo(zoomLevel);
this.mouseDragStart = null;
this.zoomStart = null;
this.deltaY = 0;
OpenLayers.Event.stop(evt);
}};
There may be a more elegant way, but this should work.
Highcharts offers the opportunity to detect clicks on chart points, but is it possible
to detect other events, such as the double click or mousedown event?
Thanks in advance
Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.
You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.
You can get creative with some events. Here's an example of detecting a double click using a click handler:
Working Demo
var clickDetected = false;
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function(event) {
if(clickDetected) {
alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
clickDetected = false;
} else {
clickDetected = true;
setTimeout(function() {
clickDetected = false;
}, 500);
}
}
}
},
...
It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:
chart.series[0].data[0].graphic.on('dblclick', function() {
//callback here
});
And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.
It is hard to expliain the actual code as i dont exactly know where the problem is, but it will be great if anyone can help in explaining how events are delegatd/bubbled in Ember.
I have a case where mouse move on document is not triggered inside one view. This happens when the view gets inserted dynamically using outlets.
MOUSE MOVE BINDING CODE:
MOVE_EVENT = touch ? 'touchmove' : 'mousemove',
$(document).on(MOVE_EVENT, function (e) {
console.log('move event move=true');
if (move) {
e.preventDefault();
stop = getY(e);
//console.log('move event move=true');
var val = pos + (start - stop) / h;
val = val > (max + 1) ? (max + 1) : val;
val = val < (min - 1) ? (min - 1) : val;
inst.scroll(target, val);
}
});
If I load the page with a router URL that shows the view in the outlet by default, the mouse move inside the view triggers mousemove on body. And when I gets into the view by changing states it doesnt happen: here is a log of a statechage that leads to the behaviour.
mouse move in repeat view
move event move=true
mouse move in repeat view
move event move=true
STATEMANAGER: Sending event 'chooseSkipTime' to state root.ote.
STATEMANAGER: Entering null
STATEMANAGER: Entering root
STATEMANAGER: Entering root.ote
STATEMANAGER: Entering root.ote.repeat
STATEMANAGER: Entering root.ote.repeat.skiptimes
STATEMANAGER: Entering root.ote.repeat.skiptimes.index
skiptimes view Inserted
skiptimes is inserted into an oulet on RepeatView. After such a state change the mouse move inside repeat view is not getting triggered, or it is not triggering the mousemove on document. At this same time as I move mouse outside the area of the parentview(RepatView) then mouse move shows log.
In a nutshell mousemove inside a view is not triggered. I have put:
mouseMove : function(e){
console.log('Mouse Move in Blah Blah View');
}
in every view inside RepeatView including RepeatView, none triggers. But mouse move on Parent of RepeatView and upwards is triggering as logs are shown.
It is hard to expliain the actual code as i dont exactly know where the problem is, but it will be great if anyone can help in explaining how events are delegatd/bubbled in Ember.
UPDATE
After further investigation it looks like the following stopPropogation in ember-latest is causing this, not yet able to understand why its going to else.
setupHandler: function(rootElement, event, eventName) {
var self = this;
rootElement.delegate('.ember-view', event + '.ember', function(evt, triggeringManager) {
var view = Ember.View.views[this.id],
result = true, manager = null;
manager = self._findNearestEventManager(view,eventName);
if (manager && manager !== triggeringManager) {
result = self._dispatchEvent(manager, evt, eventName, view);
} else if (view) {
result = self._bubbleEvent(view,evt,eventName);
} else {
//evt.stopPropagation();
}
return result;
});