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)});
Related
I would like to make a tooltip that will respond to the keys (left / right). How do I add an event in a similar way:
$.jqplot.eventListenerHooks.push(['jqplotClick', handleClick]);
I need to get the 'plot' object in event.
You might want to start by checking out one of my other answers and see the code sample there. It presents a way of listening for keyboard events.
It comes down to the following code:
$(document).keydown(function(e) {
if (e.keyCode == 37) {
//on left arrow key down
}
else if (e.keyCode == 39) {
//on right arrow key down
}
});
Remember that to have the sample respond to keys the 'Result' area on the jsfiddle must be selected.
Personally, for the tooltip I would use a custom one, to have a better control over it. How to do it is, for example, presented in this answer.
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
I have FullCalendar up and running and it is very nice. My question here is how best to go about implementing timeslot hover functionality. It would be very nice if the user could have a visual cue for any given timeslot they are hovering over.
I found the following link http://code.google.com/p/fullcalendar/issues/detail?id=269 that gives a solution that adds a new structure in agenda cell row in order to provide access to individual cells. However, it is indicated that this solution will cause FullCalendar to become sluggish.
Before I start looking into the FullCalendar code, I thought I would ask if anyone else has any ideas or a solution.
My thoughts about approaching this are as follows:
Add placeholder events to each timeslot. The user would not see these events but these invisible events could be used to allow "hover" marking. My concern here is that adding the extra events would cause FullCalander to become sluggish. Also, the drag and drop functionality could be impacted.
FullCalender can determine what timeslot the user clicked in. Would it be possible to use the code that gets the timeslot clicked on in order to provide a reference for hover highlighting?
Other?
I am considering option 2 as a place to start. However, if anyone has another idea for a workable solution, I would be glad to hear it.
If I come up with a solution, I will post it here.
Thanks,
Jim
Here is a link to the FullCalendar site: http://fullcalendar.io/
I have found it very nice to work with.
The following code did the trick for me.
$('.ui-widget-content').hover(function(){
if(!$(this).html()){
for(i=0;i<7;i++){
$(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>');
}
$(this).children('td').each(function(){
$(this).hover(function(){
$(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'});
},function(){
$(this).prop('style').removeProperty( 'background-color' );
});
});
}
},function(){
$(this).children('.temp_cell').remove();
});
Make sure to add it after the code that instantiates the calendar and, it should work AS IS if the defaultView property of the JQuery calendar is 'AgendaWeekly'.
Cheers,
M
I had the same problem since it's sometimes hard to see which timeslot you're actually clicking on. To fix this I wrote a line to alter fullcalendar.js. Not the ideal solution, but it's a quick fix.
This is the line:
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
And placed it inside (around code line 3080):
"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : ' ') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
"<div style='position:relative'> </div>" +
"</td>" +
Now you can just place a tooltip hover on all fc-slots that have the .ui-widget-content class (the <td> you see above in the code). And get the hidden input value to display in that tooltip.
If jQuery, you can use the live event and get the corresponding first child and grab its value.
If extJS
Ext.onReady(function(){
Ext.QuickTips.init();
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'your-calendar-id',
width: 140,
minHeight: 30,
delegate: '.ui-widget-content',
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>');
}
}
});
});
I realize this isn't actually an answer but a comment on a previous answer but I've yet to reach the reputation to comment on answers.
W.R.T to the answer by #user4243287 one extra step I had to take was to put this logic in the 'viewRender' option when initializing my calendar in order to make sure that this continued to work when moving between weeks.
I'm using jqGrid with cell editing. I have setup the colModel properties using the editrules option. Everything works fine in that if I edit a cell and try to save an invalid value the grid displays an error dialog, but I need to know how to position the error message dialog that comes up because in the case of my layout it ends up behind a video. I'm not quite sure how to hook into this and there don't seem to be any obvious options on how to do it.
In this case the dialog I would be trying to manipulate is the one with ID of info_dialog.
Also I'm using the clientArray option for cellsubmit.
I realize this is rather old but upon searching I didn't find any indication this might have been added since, so I figured now that I've figured it out I'd let everyone know how I solved the positioning of mine.
$(document).ready(function ()
{
$.jgrid.jqModal = $.extend($.jgrid.jqModal || {}, {
beforeOpen: centerInfoDialog
});
});
function centerInfoDialog()
{
var $infoDlg = $("#info_dialog");
var $parentDiv = $infoDlg.parent();
var dlgWidth = $infoDlg.width();
var parentWidth = $parentDiv.width();
$infoDlg[0].style.left = Math.round((parentWidth - dlgWidth) / 2) + "px";
}
From what I could find in the jqGrid source code, you can add a beforeOpen and an afterOpen. In my case I'd rather position the thing before it's displayed (duh!). Would be nice if there was a parameter to hook it up in the grid declaration, but this does the trick in the mean time.
I hope this helps someone! I spent most of my afternoon on this!
Default value of zIndex parameter of info_dialog is 1000. The function info_dialog from grid.common.js part of jqGrid will be called from grid.celledit.js without usage a 4-th parameter which can change the option.
So the best pragmatical way which I could recomend you is to decrease zIndex value of your div with the video so that it will be less then 1000.
I am having difficulty with finding out how to get tap coordinates from tapEvent object, which is passed to my custom handler (I didn't find it's specification anyway). There is also singleTap event, which passes custom variables "X" as "Y", which is coordinates, i guess, but I can't invoke that one in Emulator.
The point is that I am working on one application, where I have big element and I need to know where exactly user tapped (it maybe global screen coordinate or relative coordinate of my element).
Here is example code:
//inside of assistant's setup method:
Mojo.Event.listen(this.controller.get('elem'), Mojo.Event.tap, this.listenSingleTap.bindAsEventListener(this));
//custom handler:
SomeAssistant.prototype.listenSingleTap = function(singleTapEvent){
this.someOtherMethod(singleTapEvent.x, singleTapEvent.y); //This is wrong and doesn't work - how I suppose to get tap coordinates?
}
Thank you very much for any suggestions.
The x and y coordinates for the tap event are in the "down" property of the event.
Ex.
MyAssistant.prototype.setup = function() {
Mojo.Event.listen(this.controller.get('elem'), Mojo.Event.tap, this.handleTap.bind(this));
}
MyAssistant.prototype.handleTap = function(event) {
Mojo.Log.info("tap down at x: " + event.down.x + " y: " + event.down.y);
}