How to Get the mouse position, in "onRegionOver:function(event,code,region)" in jqvmap???
The event object in the function, doesn't have the properties from mouse position.
I need show a div, with extra country information, when the mouse overs the region.
thank you very much!
First of all I am not sure if this is a right approach or not. If you open the jquery.vmap.js plugin file, check out this code:
if (e.type == 'mouseover') {
jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
Change the code of the following line to:
jQuery(params.container).trigger(regionMouseOverEvent, [e, code, mapData.pathes[code].name]);
This event e is passed as a parameter to the function in the plugin. And in your call back function add one more parameter
onRegionOver:function(event,e,code,region){
alert(e.pageX,"_",e.pageY);
}
This worked for me...Hope this Helps for you
Related
Iam working on Angular-nvd3 forceDirectedGraph to show data.
I have plot the chart but unable to trigger click event only in forceDirectedGraph.
My issue is when I click on any node i need to open a popup and show data regarding that node.
I did some research in angular-nvd3 site but was unable to find click event which normally will come like below code:
dispatch: {
elementMouseover: (t, u)=>{
},
elementMouseout: (t, u)=>{
},
elementClick: (t, u) =>{
}
}
And I should bind the data in angular 6 scope or I can call a function to bind it.
Please find the below code which I have worked on and suggest me the right way.
Plunkr
It can be done within the nodeExtras function. When you extend it in your Plunkr as shown below, the "stringified" node object is shown in an alert when a mouse click occurs on it. It also changes the cursor (into hand cursor) when the mouse pointer hovers over a node.
nodeExtras: function(node) {
node
.attr('cursor', 'pointer')
.on('click', n => alert(JSON.stringify(n)))
&& node
.append("text")
.attr("dx", 10)
.attr("dy", ".55em")
.text(function(d) { return d.name;})
.style('font-size', '10px');
},
Instead of 'click', you will probably rather opt for 'dblclick', otherwise the alert is displayed each time the user drags a node.
I'm almost finished with a quiz of mine. I've encountered an error which I have finally pinpointed. But first I'll tell you some background info on the code.
Background
On stage, there exist 4 button components registered as movie clips. These are later stored in an array. When a certain icon is clicked on stage, these buttons are to be activated by adding event listeners to all of them. When a button is pressed, it checks if it's the 'correct' answer and removes the event listeners.
Now I have done extensive checks and narrowed down the problem to the following.
Code
This function will add button listeners to each button recursively. Note that the variable 'num' is a fixed integer between 1 - 4 which is generated earlier into the code and used for many 'if' cases.
function addButtonListener(num:int):void
{
for (var obj:Object in _buttons)
{
_buttons[obj].addEventListener(MouseEvent.CLICK, checkans(num));
}
}
This function is basically the opposite and also disables the buttons
function removeButtonListener(num:int):void
{
for (var obj:Object in _buttons)
{
_buttons[obj].removeEventListener(MouseEvent.CLICK, checkans(num));
_buttons[obj].enabled = false;
}
}
Now one thing I noticed through the use of trace functions is that the code correctly adds the button listeners but it does not remove them.
This function calls for each button to be removed.
function checkans(num:int):Function
{
return function(e:MouseEvent):void
{
if (e.currentTarget.label == xmlNodes)
{
points = points + (2 * num);
scoreBox.text = points.toString();
}
else
{
trace("Incorrect!");
}
if(myText.parent){
myText.parent.removeChild(myText)
}
closeShowQuestion(num);//closes a previous function
removeButtonListener(num);//Should I pass this variable into the end function?
GoFishing.addEventListener(MouseEvent.CLICK, fish);//Starts the process again.
}
}
So am I removing the event listeners incorrectly?
Do you need to see more code to be sure?
Thanks in advance!
removeEventListener must use the SAME function that was used in addEventListener.
Your checkans function always returns a NEW function, so it will not be the same for add and remove.
If you have to pass a num into your listener function, do it other way. Make it a property of a button or store externally etc.
I am using angular-bootstrap-lightbox and would like to add a callback function when the image is changed.
Specifically, on the mobile view, when a user swipes right or left, I want to get the image id, as well as the direction of the swipe.
This code works fine to initialize the lightbox:
$scope.openLightboxModal = function(index) {
Lightbox.openModal($scope.images, index);
}
How do I add a callback function to the above so as to register the image change event?
Thanks!
Got it!
On this line in the angular-bootstrap-lightbox.js file:
https://github.com/compact/angular-bootstrap-lightbox/blob/0cfd9aea6e1ed7a192614c6ee4480e13dfdfbeb9/dist/angular-bootstrap-lightbox.js#L13
You can change thit ng-swipe-right=Lightbox.prevImage() to something like ng-swipe-right=Lightbox.myFunction() and in my controller, I have access to that event!
I have a window, and inside it a panel. The panel contains text (basic html). After the window is ready I call the following function, which finds elements with specific class, and registers click events on them. This works at first.
After closing the window, and recreating 1:1 similar window the events will not fire. The same happens if I .update() the panel and re-run my function - the events fail to fire. Why is this?
I can still see elements being found, and apparently some events must be registered, but my clicks can't be captured by the debug code, or the receiving function anymore.
addEvents: function(win) {
// The Window
var ow = win;
// Using this debug trick I can see that on the second time the events wont fire
// -- nothing gets printed to console
Ext.util.Observable.capture(ow, function(){
console.log(arguments);
});
// Will search for elements, finds elements that have class myclass
// In my case the elements are just ordinary html tags in the visible content
// area of the panel.
var elems = ow.down('panel').getEl().select(".myclass").elements;
Ext.Array.forEach(elems, function (item, index, allItems) {
// We need Ext DOM element to be able to attach stuff to it
var elem = new Ext.dom.Element(item);
elem.on ('click', function (evt, el, o) {
ow.fireEvent('myevent', ow, elem);
});
});
}
I suspected at first that I have to actually unregister the previous events and destroy the window, so I tried adding this to the close of the window:
window.down('panel').destroy();
window.destroy();
However it seems I have some other problem I really am unable to understand.
This is a very JQuery-ish way to add events. You are dealing with components and should add event listeners on components. If you need to delegate events down to html elements then you need to set a single event listener on the Component encapsulating the elements and add delegate config to the actual html elements.
Here are some resources:
Explain ExtJS 4 event handling
Event delegation explained:
http://www.sencha.com/blog/event-delegation-in-sencha-touch (applies to extjs just as well)
More on Listeners with extjs: https://stackoverflow.com/a/8733338/834424
I have been fiddling with a few lines of code for two days now and for some reason I cannot get it running.
What I want:
A user selects a relation from a combobox and subsequently must select a person from a list of persons filtered by the first combobox. If there is only one person, it must be selected outright. If it has more than one, I want the combobox to expand and of course show the list of retrieved persons. Sounds pretty simple.
The onRelationContactSelect() is code which is normally executed when a person is selected. Since the select event isn't triggered when setting a value manually, I simply call it by hand. I have the code in the callback of the load event to ensure the data is retrieved from the server. That is required to expand in the first place or select a record.
The problem:
When I have one record (records.length == 1) everything works like a charm. When I have more than 1 record, the combobox contactCombo fails to expand. I debugged quite a bit through the ExtJs internal code and the reason is that is has no focus. No matter what I try with calling contactCombo.focus(), it does not focus. Therefore it won't expand. To make it even more annoying I can expand another combobox with the following code:
function onRelationContactSelect() {
categorieStore.load({ callback: function(r, options, success) {
//debugger;
//categorieCombo.focus();
//categorieCombo.expand();
}});
categorieCombo.focus();
categorieCombo.expand();
}
As can be seen I call focus() and expand() outside of the callback but the mode of categorieStore is 'local'. The data in categorieStore is static but still retrieved from the server.
The code:
function onRelatieSelect() {
contactStore.baseParams = {"relatieId": relatieCombo.value };
contactStore.load({callback: function(records, options, success) {
if(records.length == 1) {
contactCombo.setValue(records[0].get('Id'));
onRelationContactSelect();
} else {
contactCombo.clearValue();
contactCombo.focus();
contactCombo.expand();
}
}});
openTicketRelationLabel.show();
gridTicketRelatie.show();
ticketRelatieStore.load({ params: {relatieId:relatieCombo.value}});
SetRelatieInfo();
SetContractsInfo();
setSfHoursOsab();
showRelationNotifications(relatieCombo.value);
}
I have tried for ages, but it seems I simply cannot focus a combobox from within the callback handler and outside of the callback handler I have no data yet.
Can anybody please help me out?
After sandboxing two different comboboxes I found the solution.
The solution turned out to be weird but simple:
categorieCombo.on('select', function() {
subcategorieCombo.focus();
subcategorieStore.load({ callback: function(r, options, success) {
subcategorieCombo.focus();
subcategorieCombo.expand();
} });
Focus before the load.
Focus again in the callback of the load.
The only dissatisfying about this solution except from needing to focus twice is that I have no clue whatsoever why this works, but it solved the problem for me.