I have a Google map on the left, and a corresponding contents on the right.
When a user moves around the map or zoom in or zoom out, how can I dynamically change the contnets on the right given the "new" map now?
I guess I need to know the "current" map information and then use that to retrieve the content corresponding to this information.
Since I don't specifically know what you want to do, hopefully these JS snippets can get you started.
You'll need to attach an event handler to your map probably in body.onload. The GMap2 "move" event fires any time the map view is changing, which may be a lot if the user is dragging or constantly zooming.
function onBodyLoad() {
//assumes you have a GMap2 object named 'map' already declared somewhere
GEvent.addListener(map, "move", onMapMove);
}
function onMapMove() {
//update right div content
}
Related
I want to add actions for when the user clicks on an object from a Paths layers. I notice that I really need to click in the middle of each path for this to happen. Is it somehow possible to increase that radius so when the user clicks even just a bit near that object the on-click action would trigger? Couldn't find such property for any layer.
I think you are looking for pickingRadius, check this out.
You should be able to apply that on Deck instance.
With React:
<DeckGL
...otherProps
pickingRadius={10}
>
With vanilla JS:
const deckgl = new Deck({
...otherProps,
pickingRadius: 10
});
I'm using a VIS.JS network diagram as a menu (of sorts) with a master/detail relationship to another area of the screen. Each time a user selects a node I signal the loading of the other area. Since the load is asynchronous and can take time (1-2 sec) I'd like to prevent the network node selection from changing until the details are loaded.
Ideally I'd like for the click to invoke the callback, without changing the node selection. Then receive a notification from the detail pane that the loading is complete, and only then change the node selection through code.
I think the only thing I'm missing is the ability to disable the auto-selection of a node when it is clicked.
Is that possible?
Thanks
-John
I don't know if it'll exactly fit your need but,
I needed to create some node unselectable so I prefix my unselectable node's id with a marker.
And then
const unselectableMarker = 'header-';
network.on('selectNode', (opts) => {
network.setSelection({
nodes: opts.nodes.filter(id => !id.startsWith(unselectableMarker)), // prevent selection of headers nodes
edges: opts.edges,
});
});
I've found nothing in actual doc for preventing events in network context.
Capturing the event and preventing default behaviour should not focus the element.
handleClick (evt) {
evt.preventDefault();
// rest of code
}
I got a question to which I have no answer after a couple of hours of trying and googling :(
I've created three dojo.dnd.Source components. It is used to couple a user to a project so to the left I've got projects and to the right I've got my users and in the center I got a canvas. I set up the relevant creators and checkacceptance functions and all is well.
Onto the center canvas a user can drop a project which is shown as a div containing all related users as div elements. The other dndtype that can be dropped is the user type, in that case I want to empty the canvas and show all projects to which te dropped user is related. As soon as I drop a project or user on the canvas the creator function is called. The problem is that the creator function returns 1 element that should be dropped, if I drop a user I need to draw several elements onto the canvas so the creator method isn't fully covering this since it returns only one element.
To cope with the default behaviour I tried to manually add projects to the canvas and returning only one, I know it ain't pretty :S It's working but I'm confronted with strange behaviour, if I move a project on the canvas it is treated as a user in stead of a project.
Bottom line, is there a way that you guys know of to drop one item and create multiple. I was searching to trigger the drop event myself but to no avail.
Thanks!
The event you are looking for is Source's onDrop event. Check the API docs for some more events you could use: there is a onDropExternal and onDropInternal for use inside and between Stores.
require(["dojo/dnd/Source"], function(Source){
var source = new Source({
onDrop = function(source, nodes, copy) {
//called only on the current target, when drop is performed
this.inherited(arguments); //execute the default onDrop function
//now add the node(s) to the other stores here
//you might be able to just do something like:
source2.insertNodes(nodes);//but this is untested ;)
}
});
});
I'm starting in sencha touch ,and I try to create an application.only,I have a problem. I use a list with indexbar. this list is in a panel. and I wonder if it's possible to add an event listener to the panel, to jump to an index to the next. Let me explain with an example:
-We have a list of products and these products are sorted by their type (phones,computers...), the indexbar lets you know what type of product it is.
-To switch from one type to another,We Have to scroll.
What I seek to do is put a listener to the panel so that the scroll from one type to another is automatic every time you tap on the panel or on a next button. for example.
Please excuse my english and help
Thank you.
Try using dom property scrollTop .
For example:
el.dom.scrollTop = 1000;//this will push the panel down by 1000px;
You can always get the el, dom from panel/element properties/ attributes list.
I see that there are three events fired when a tab is selected and I see the order in which the events are fired but I'm rather confused about which event to use or how these are truly different. If all three are fired, couldn't I just put my code in any of the events?
I must be missing something here. Can someone clarify?
So after messing with this more I'm going to share what I ended up doing in the hopes that it might help someone else.
I had to generate dynamic tabs based on data returned in an Ajax call. It's basically data by date where the tabs are the date and they display whatever data falls within that date.
Generating the tabs from the returned data was easy but I couldn't figure out how to write out the associated data. Finally (and I should have started here), I looked that the generated dom and noticed that a dynamically created tab also creates a div. Maybe that's obvious to some (it wasn't to me) and if it was in the documentation I missed it. Anyway, this code will generate tabs from an array and then append html to the associated div when the tab is clicked. I don't need all the variables but I thought that might make it more readable. Put the function for show before adding the tabs or it wont work!
var _sessionDates = getSessionDates(sessionData.Sessions);
var $tabs = $("#sub-tabs");
$tabs.tabs({
show: function(event, ui) {
var selected = $tabs.tabs('option', 'selected');
var _sessionDates = getSessionDates(sessionData.Sessions);
var grid = buildGrid(_sessionDates[selected]);
$('#' + _sessionDates[selected]).html(grid);
}
});
$(_sessionDates).each(function(i, dayOfShow) {
var d = dateFormat(dayOfShow, "mediumDate");
$tabs.tabs('add', '#' + dayOfShow, d);
});
Finally, I have to "scroll" through my data shown in the tab and I was able to do that with these two lines. The first line gives me the id of the div element corresponding to the selected tab (which is really the important part) and the second line just calls my method and passes in the id of the div less the '#'. My date is also my id. There's a global variable that I've changed outside of this that makes it work. I know that's bad and I'll remove it when I refactor it.
var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href');
$($el).html(buildGrid($el.replace('#', '')));
select is triggered when a tab is clicked on, but before the tab has been shown
load is triggered after the contents of a remote tab have been loaded (i.e. a tab whose content is not part of the initial page payload, but that is loaded via an ajax call when the user clicks on the related tab)
show is triggered after a tab has been shown
The jQuery documentation makes this relatively clear, but I had to experiment in order to fully understand the difference between select and show.
This has been made more clear since the original question was asked so now the following is true:
Effectively, the functionality for "show" is now provided by "activate" and "select" is done with "beforeActivate" while "load" is still the same.
activate: (previously show) Triggered after a tab has been activated (after animation completes)
beforeActivate: (previously select) Triggered immediately before a tab is activated.
load: Triggered after a remote tab has been loaded.
Also provided are:
beforeLoad: Triggered when a remote tab is about to be loaded, after the beforeActivate event.
create: Triggered when the tabs are created.