I'm looking for some documentation on d3js and mobile events? I'm basically trying to avoid double tap zoom and then trigger a separate function. Currently I'm using this jquery plugin to remove double tap/zoom on mobile
link to the code
But I can't find anywhere a binding of double tap in d3js. There is a double click event that will fire on double tap but given the current jquery plugin to override zoom my double click event does not fire.
Any help is much appreciatedThanks!
Ok so the answer is you can add a touch start event. So something like this
g.append("rect").on("touchstart",function(){
var t2 = e.timeStamp,
t1 = $(this).data('lastTouch') || t2,
dt = t2 - t1,
fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
})
Please note that this code is provided originaly by this gist and was modified by Wouter Konecny
I just added it as a touchstart event. Works like a charm by the way
Related
as the Toolbar or Titlearea on scroll animation feature is referenced in the last section of the Toolbar API, and also in this great video tutorial (starting at about min 45), the animation works well under given circumstances.
I was not able to find any documentation about what these have to be, however I found one circumstance, in which it does not work. Here is a working example to demonstrate the problem:
Form hi = new Form("Title", new BoxLayout(BoxLayout.Y_AXIS));
EncodedImage placeholder = EncodedImage
.createFromImage(Image.createImage(hi.getWidth(), hi.getWidth() / 5, 0xffff0000), true);
URLImage background = URLImage.createToStorage(placeholder, "400px-AGameOfThrones.jpg",
"http://awoiaf.westeros.org/images/thumb/9/93/AGameOfThrones.jpg/400px-AGameOfThrones.jpg");
background.fetch();
Style stitle = hi.getToolbar().getTitleComponent().getUnselectedStyle();
stitle.setBgImage(background);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(15);
// hi.setLayout(new BorderLayout()); // uncomment this for the animation to break
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// add some elements so we have something to scroll
for (int i = 0; i < 50; i++)
contentContainer.add(new Label("Entry " + i));
hi.add(contentContainer);
// hi.add(BorderLayout.CENTER, contentContainer); // use this line instead of the above for the animation to break
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(anim);
hi.show();
With my current app and the codesample from the Toolbar API (which is roughly adapted here), I found out that the onScrollAnimation event is not being called, when a scroll occurs inside a BorderLayout. Even when I have a separate container, which is not the contentpane itself, and I set setScrollableY(true); to true, the animation works properly. The animation stops working, when this very container is put into Center of the Form, via Borderlayout. in the example above, the layout is exactly the same, as there are no other components in other areas of course, but it breaks the animation.
How to solve this? In my app, I have the need for a BorderLayout but still want to use this cool feature. Also, this is a very un-intuitive feature, if it works for some, but not all layouts. It should be completely layout-agnostic and work in every case.
Thank you.
The adapter is bound to the forms content pane scrolling so it won't work if you have a border layout in here. In that case scrolling isn't detected because the code just isn't aware of the scrolling. It would need to track the scrolling of any component in the UI to detect that scrolling.
as hinted by Shai, the solution is the following:
hi.setLayout(new BorderLayout());
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// add some elements so we have something to scroll
for (int i = 0; i < 50; i++)
contentContainer.add(new Label("Entry " + i));
hi.add(BorderLayout.CENTER, contentContainer); // use this line instead of the above for the animation to break
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(contentContainer, anim);
instead of using the onTitleScollAnimation to just add the animation, provide your own scrollable "body" or content container as the first argument, appended by the animation(s).
jsfiddle: http://jsbin.com/wamunoside/1/edit?html,output
jsfiddle
This is taken from the example given on the Bootstrap 4 docs site:
just adding a 2nd dropdown to this example below the 1st dropdown found here:
https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown
So in the jsfiddle this is how you cause the issue:
1.) reduce the width of the output tab so that it shows the menu for mobile (991px or less)
2.) You will see two 'dropdown link', click on the top one which expands the submenu.
3.) click on the other 'dropdown link' below the currently expanded one.
Notice both dropdowns are now closed - should have opened the 2nd dropdown.
ended up issue being my code...
I added the following if event.type == "mouseleave" and that seems to have fixed the issue reasonably well, still not perfect (for desktop):
http://jsbin.com/yiyohatequ/edit?html,css,js,output
I'm basically struggling with the best way to get dropdown-menu to appear 'on hover' for desktop and dropdown to appear 'on click' for tablet/mobile. so that is why I wrote this code in the 1st place.
/* Prevent more than 1 dropdown showing up at once*/
$('.nav-link').hover(function (event) {
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave"
if (event.type == "mouseleave") {
var hovered = this.nextElementSibling;//.dropdown-menu
var navdropdowns = $('.dropdown-menu');
navdropdowns.each(function (a, b) {
if (hovered != b) {
$(b).removeClass('show');
}
});
}
})
I need an on click event on image overlays.
According to the documentation Leaflet documentation imageOverlay (as far as I understand it correctly)
I can use the interactivity option to receive mouse events.
If true, the image overlay will emit mouse events when clicked or hovered.
I thought it would work something like that:
let newOverlay = L.imageOverlay(imageUrl, imageBounds, {opacity:0.5, interactive: true});
newOverlay.on('click', function(d) {alert('I have been clicked ' # this)});
My final goal is to get the pixel coordinates of the click event, relative to the image on which the click event happened.
Can someone spot my error or is there another approach?
I tried for hours, but I did not succeed :(
I am thankful for every help.
Kind regards
Niklas
Just a little mistake
Change # to + so you will get alert message: I have been clicked [object Object]
alert('I have been clicked ' # this)
to
alert('I have been clicked ' + this)
let newOverlay = L.imageOverlay(imageUrl, imageBounds, {opacity:0.5, interactive: true});
newOverlay.on('click', function(d) {alert('I have been clicked ' + this)});
I have a grouped Kendo Grid and need to trap collapse and expand events. For grids with detail there is detailExpand event . Is there something equivalent for group expand/collapse?
After poking around in the kendo source code, there is no directly provided event but you can just attach your own handler to the same event that kendo attaches to internally to handle the expand/collapse.
Internally, kendo attached a handler to expand/collapse icons like so:
if (that._isLocked()) {
that.lockedTable.on(CLICK + NS, '.k-grouping-row .k-i-collapse, .k-grouping-row .k-i-expand', that._groupableClickHandler);
} else {
that.table.on(CLICK + NS, '.k-grouping-row .k-i-collapse, .k-grouping-row .k-i-expand', that._groupableClickHandler);
}
where CLICK = "click" and NS = ".kendoGrid".
So, you can just add your own handler to the exact same element, i.e.:
var grid = $("#grid").getKendoGrid();
var table = grid._isLocked() ? grid.lockedTable : grid.table;
table.on('click.kendoGrid', '.k-grouping-row .k-i-collapse, .k-grouping-row .k-i-expand', myGroupableClickHandler);
and then do whatever you need to do in myGroupableClickHandler().
Example: http://dojo.telerik.com/#Stephen/udUga
I am programming a highly responsive web application and came across the issue that most time is used to recognize double taps.
I am using this code from the website:
var singleTap = new Hammer.Tap({ event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
hammer.add([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure(doubleTap);
This basically works quite fine. However, due to the timeouts/intervals the recognition of a double tap takes quite "long". I guess its about 2 times the interval - one for each tap.
The waiting for the last interval (waiting for a third tap) is senseless in my scenario.
Is there any "ok tapCount == 2, we fire now and don't wait any longer"-TapRecognizer option?
Update, I have done some logging:
First column: passed ms since first event
0 input: mousedown
74ms input: mouseup
145ms input: mousedown
218ms input: mouseup
520ms double tap
-
0 input: mousedown
64ms input: mouseup
366ms single tap
This confirms my theory that double tap is waiting for a third click but I don't think there's an option to disable this.
I share my solution to the problem:
I copied the TapRecognizer and named it DblTapRecognizer. The interesting source code lines are:
if (tapCount === 0) {
// no failing requirements, immediately trigger the tap event
// or wait as long as the multitap interval to trigger
if (!this.hasRequireFailures()) {
return STATE_RECOGNIZED;
} else {
this._timer = setTimeoutContext(function() {
this.state = STATE_RECOGNIZED;
this.tryEmit();
}, options.interval, this);
return STATE_BEGAN;
}
}
"if (!this.hasRequireFailures())" seems to misbehave in my situation, since the comment hints at immediate firing... So just "return STATE_RECOGNIZED;" and delete the rest for the DblTapRecognizer.
We ran into similar slowness issues. Apparently there is an inherent lag on tap action on touch devices.
We ended up using FastClick
All you need to do is FastClick.attach(document.body);
This improved the "tap performance" for us.