Good day all. I'm using JQVmap, I'm trying to show a tooltip while mouseovering some elements that are not in the svg map.
This comes to solve the issue that some of the countries are really small, so I'd like to provide the user some buttons on the map to show te tooltips of Greece, and Singapore (for example).
Actually I try to trigger the same event that is triggered in the jquery.vmap.js:
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
I've done this:
$('#vmap').trigger(labelShowEvent, [tooltipMaker("gr"), "gr"]);
and this:
$('#vmap').trigger(jQuery.Event('labelShow.jqvmap'), [tooltipMaker("gr"), "gr"]);
ofcourse without any luck.
the second attempt I recieved this error:
Uncaught TypeError: label.html is not a function
so I try to solve it by assign a function to that parameter:
label.html(tooltipMaker(code));
and defined a function like:
function tooltipMaker(code){
return '<div class="map-tooltip"><h3 class="header">Country: '+code+' </h3><p class="description">'+code+'</p></div>';
}
but it does not solve anything. Is there anyone that has the same problem and solve it somehow?
in the end I could also build a tooltip similar to the one used in the map, but I'd like to use the map logic (without doing a new map with the buttons as "real" fake regions, which it would be very difficult and long).
Related
I am trying to loop through a series of pages (javascript) from the following webpage:
http://nh.mypublicnotices.com/PublicNotice.asp?Page=SEARCHRESULTS
I found all of the elements that I need to loop through, but I am unable to click on it. What would be the best way to loop through these javascript elements:
from selenium.webdriver.support.select import Select
next_page=driver.find_elements_by_xpath('//[#id="PublicNoticeContent"]/table[2]/tbody/tr/td/table[2]/tbody/tr[6]/td/table/tbody/tr/td/table/tbody/tr[1]/td/a')
for i in next_page:
link=i.get_attribute("href")
Select(link)
Select.click()
You need to repeat your materials on Select and working with a class.
link=i.get_attribute("href")
Select(link)
This code has just grabbed what had better be a SELECT tag, but it certainly looks as if you've grabbed only an href. You tried to create a Select object from that link ... but then, having created it, you failed to save it: you threw it away.
Select.click()
I'm not at all sure how you expect this to work: this invokes click as a direct call of a class method, but Select has no such method, so this will fail because teh attribute doesn't exist: an error message you failed to provide in your posting.
Start with this: once you work through your tutorial materials and learn to extract the proper SELECT tag from a URL i ... perhaps
select_tag = i.find_element_by_tag_name(“select”)).select_by_index(0)
clickable = Select(select_tag)
clickable.click()
You click on the object you created, not on the class.
Does that help get you going? You still need to figure out how to code that first line in your application.
I have multiple (444) popups open on my map.
I tried this:
$(".leaflet-popup-close-button").each(function (index) {
$(".leaflet-popup-close-button")[index].click();
});
But this way, not all get closed. Only half of them get removed. Exactly half. So first time 222 get removed, the second time 111 get removed.
Why is this happening?
For recent versions of Leaflet:
The proper way to close a popup is to use the built-in .closePopup() method:
map.closePopup();
If you have multiple layers with different popups (like in the OP's case), then you could iterate over the layers and close the popup on each layer:
map.eachLayer(function (layer) {
layer.closePopup();
});
This is what i did to solve my problem:
var firstLayer = true;
map.eachLayer(function (layer) {
// do something with the layer
if (firstLayer) {
firstLayer = false;
} else {
map.removeLayer(layer);
}
//console.log(layer);
});
I have 3 layers, the first one is the main one which displays my map, that's why it mustn't be removed. I removed the second and the third one which are both layers with multiple popups on it.
Thanks #rafaelbiten who pointed me in the right direction (layers).
I see what you're trying to do, but that doesn't seem to be a very good idea. You're literally (programmatically) causing 444 clicks that don't really exist to happen. If one day you decide to track user clicks on those items, you'll have a problem.
What if you try to add a class to the common parent of those 444 leaflet-popup-close-button that force them, via CSS to collapse/close?
Something like that would be a better solution for what you're trying to do.
Btw, checking their docs it seems like these popups are all open on a new layer, so you probably just need to remove that layer and all of them will be gone.
From their docs:
Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want.
And checking further you have addLayer and removeLayer. Whatever you do, I'd suggest you avoid all those programmatically clicks.
Here is my issue; I am trying to display "markers" and on mouse over/out/click give some actions.
The problem is that no event gets fired on over at all and when on click (down) in the console I get some feedback, but not of the element per say (target == undefined).
My different shapes are groups in a group called "marker".
And I group everything with the following:
marker.add(plateShape, plateLabel, line, indicator);
When using
marker.addWithUpdate(plateShape, plateLabel, line, indicator);
I get some feedback (over being finicky at best) but the layout get completely messed up.
You can comment/uncomment Line 86 to check the behaviour in the following fiddle.
https://jsfiddle.net/u7x7az1j/5/
Thank you for your help! :)
The problem comes from your use of add.
Replace add with addWithUpdate and be aware that addWithUpdate takes one parameter at time.
marker.addWithUpdate(plateShape);
marker.addWithUpdate(plateLabel);
marker.addWithUpdate(line);
marker.addWithUpdate(indicator);
i tried on your fiddle and it works.
Consider replacing rect + triangle + line with a simple parametric fabric.Path you can easily build.
i'm representing some data with the parallel coordinates library (based on d3.js) ( https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates )
main functional part of the code is the following:
var parcoords = d3.parcoords()("#example") //#example is the div for the drowing
.data(eingabe) // eingabe is the var, which contains the data
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
so far it works fine :)
but now i want to hide one specific axis of the parallel coordinates; i only don't want to show it.
I want that the axis is completeley removed, so that it takes no place and the lines don't be affected of the values of this dimension, but i don´t want to do that by manipulating the data. i only want to manipulate the plot (thats the reason i called it hide).
i've searched on the api description but didn't find something. I searched in the internet but didn't find anything, too. But i think i remember that i've seen a peace of code, where the first axis was hidden, but i can't find it again.
Can anybody tell me, how i can hide an axis or where i can find the solution?
thank you, greetings
Jones
You're missing a .hideAxis(array) method call, where the array is a list of keys of the exact column names in your dataset that you want to hide. This method does exactly what you said you wanted:
"...hide one specific axis of the parallel coordinates; i only don't want to show it."
"I want that the axis is completley [sic] removed, so that it takes no place"
"the lines dont [sic] be affected of the values of this dimension, but i don´t want to do that by manupulating [sic] the data. i only want to manipulate the plot."
To implement this method, your code would need to be
var parcoords = d3.parcoords()("#example") //#example is the div for the drowing
.data(eingabe) // eingabe is the var, which contains the data
.hideAxis(["col1", "col2"])
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
Note: .hideAxis can take in a blank array if you don't want to hide any axis, i.e. .hideAxis([])
You can implement this method in some sort of update/redraw function if you want to allow the user to specify which axis(es) to remove; else, removing it completely via the DOM is impossible. This, performing the axis(es) hide via code, is your only option to implement what you want.
To see this method in action, take a look at the API documentation, specifically, their "example1" graph and code at http://syntagmatic.github.io/parallel-coordinates/index.html#example1
Assuming you just want to hide the axes (i.e. make it invisible) and not remove it completely
d3.selectAll("#example0 > svg > g > g.dimension:nth-child(3)").attr("opacity", "0");
Assuming example0 is the id of the wrapper around your svg element. You could also do the same thing directly on your svg element if you have it.
The above would still leave you able to interact with the filter of the hidden axis. To make it non-interactable, use .attr("display", "none");
Don't have a fiddle, but you should be able to copy paste the above line and run it from the console at http://syntagmatic.github.io/parallel-coordinates/ and see the effect on the chart in the Bundling section.
Here is the effect - before and after respectively
I'm using Tooltipster which seems to be a nice jquery plugin.
Regardless I need to have my tooltips dynamic, which I don't believe should be that difficult. However I wrote a script and maybe it's because I'm tired or I don't know the simplest of javascript. Probably a combination of both.
I can't seem to get around this particular error. TypeError: $(...).tooltipster is not a function.
Here is the basic javascript code:
$("img#box_image[data-img-number]").hover(function(e) {
e.preventDefault();
i = $(this).attr("data-img-number");
var w = "http://trailerbrokerimages.s3.amazonaws.com/pics/" + i ;
window.console.log('before tool');
window.console.log('before tool ' +w);
tool(w);
});
var tool = function (w) {
$('.tooltip_two').tooltipster({content: $('<span><img style="height:191px; width:256px;"src="http://trailerbrokerimages.s3.amazonaws.com/pics/'+w+'" /></span>')});
An example of the code can be found at http://www.trailerbroker.com/go/listings/view/219
I suspect it's lame mistake on my part, thanks.
You have the same id box_image for multiple elements.
I understand that you're trying to make it unique by appending the data-img-number, but this won't work, as there's no way you can do this at run time unless your explicitly specifying different hover handlers.
Instead you could attach the hover handler to a class.
Add a class="box_image" to your <img /> elements and attach the hover as follows,
$(".box_image").hover(//rest of your code here//)
This should give you the desired functionality.
I solved this problem by using twitter bootstrap popover. Don't waste your time with tooltipers.