Currently, I am using this for server monitoring :
http://bl.ocks.org/d3noob/9692795
The problem is, I am not getting how to add buttons (start, stop) in a tooltip.
I have gone through d3js tooltip doc:
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
But not able to do this. Can anyone help me please.
Current Code:
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
// add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(
"PID: " + d.name + "<br/>" +
"Command: " + d.COMMAND + "<br/>" +
"User: " + d.RUSER + "<br/>" +
"%CPU: " + d.CPU + "<br/>" +
"Memory: " + d.SIZE
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
The problem is that the tooltip doesn't respond to mouse events (pointer-events: none; in the CSS). This is done to avoid triggering the mouseout event on the node as soon as the tooltip appears above it. (Normally, the element on top would capture the mouse event, by turning off pointer-events the mouse movements are passed through to the elements underneath).
If you want the tooltip to be interactive, with buttons or links, you'll need to remove that CSS line and figure out a different way of closing/hiding the tooltip. For example, you could hide the tooltip when the tooltip <div> is moused-out, or you could add a dedicated close button on the tooltip.
Related
I am making a simple jQuery mobile app, where one of the pages is about a restaurant.
On that page, I want to have a button that, when clicked, saves the information of the restaurant to a database.
I already have a php code that can save data to my database, and i have this javascript code that works together with it.
Though this is used for saving data from a google maps infowindow when closed. I just need a on click button.
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&description=" + description + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function (data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
}
What is the easiest approach to this?
Thanks.
EDIT:
Is it possible to do like this, if i create a button with id #btn_save :
$(document).ready(function() {
$(document).on("click","#btn_save",function() {
"phpsqlinfo_addrow.php?name=" + john + "&address=" + lolstreet 12 +
"&description=" + this is restaurant john + "&lat=" + xx.xx() +
"&lng=" + yy.yy();
}); });
Sorry, i know i should be learning the basics first.. :/
If I understood correctly, you need to add button onClick event handler? If so, here you go (using jquery 1.9+):
$(document).ready(function() {
//onClick event handler for button with id "btn_save"
$(document).on("click","#btn_save",function() {
//Your code here
});
});
I have jquery function that calls a php script some data from my mysql database, the jquery function is called as below :
$(document).ready(function(){
getTopFiveDeals();
When this runs it gets the data fine and builds some HTML and inserts it into the webpage. As shown below:
$('ul.special-list').append("<li><a href='#' class=restaurantItem restaurant= '" + item.estName + "' adddress='" + item.estAddr + "'><img src= " + item.img_link +
" width='60' height='60' alt='" + item.estName + "'><div class='img-det'><strong class='title'> " + item.title + " </strong><p> " + item.desc_short +
" <br>Expires: " + item.expiry_date + " </p><em class='price'>" + item.price + "</em></div></a><a href='dealDetail.html?id=" + item.id +
"' class='det-link'>Detail</a>");
The problem starts when i have a simple jquery function below. The function is not called instead the page reloads to index.html#
$("a.restaurantItem").click(function (event) {
alert('Hello');
}
Any help and or advice would be much appreciated.
Many Thanks
$("a.restaurantItem") is called once. It doesn't look for new elements. You need to use the event delegation syntax of .on() to match those dynamically created elements:
$('ul.special-list').on('click', 'a.restaurantItem', function(e) {
e.preventDefault(); // To stop the link from redirecting the browser
});
You'll need delegated event handlers for dynanic elements, and to prevent the default action on anchors (to avoid scrolling to top or following the href)
$('ul.special-list').on('click', 'a.restaurantItem', function(event) {
event.preventDefault();
alert('Hello');
});
use .on() this way
$(document).on('click',"a.restaurantItem",function (event){
event.preventDefault();
alert('Hello');
});
i'm using GoogleMap API in my project where the position of a particular vehicle is rendered by using data in the DB, i have already implemented this, MY question is if its possible to get numbers on the Markers,e.x Vehicle A has been in 100 places from 1 to 2 of Decembre, i would like having numbers starting from 1 to 100 kinda showing its path,This is the create marker function of my Google API:
function createMarker(point, IMEI, Velocity, Ora, Data) {
var marker = new GMarker(point, iconBlue);
var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); });
return marker;
}
Thanks for your time!
I think you need to generate markers for those values. You could do this easily with a php script that would write numbers over your base marker.
Here's an article on how to extend marker to add a label. It's pretty old though, so I'm not sure if it works with current version of GMaps.
I am using this contextmenu plugin: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/
DEMO: http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
SOURCE-CODE: http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/jquery.contextMenu.js
DEFAULT CALL:
$("#myDiv").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
I want to call this context menu on a left click rather than a right click, how can I achieve this ?
or any other plugin suggestions?
Do a regular click handler:
$("#myDiv").on('click', function() {
$(this).contextmenu(...)
})
Inside the source code, looking for the following codes:
if( evt.button == 2 ) {...
According to W3C its values should be:
Left button = 0,
Middle button = 1,
Right button = 2,
According to Microsoft its values should be:
Left button = 1,
Middle button = 4,
Right button = 2,
You may change the value depending on what you need.
I have been trying to make the FullCalendar events use Facebox to pop up with information when they are clicked. I have no problem putting the events on the calendar or getting the information that needs to be displayed it is just getting the pop up box to work.
I have tried adding rel="facebox" to both the "span" and the "a" that wraps the event title but neither seem to affect it.
If anyone has tried this before or knows a possible solution I look forward to hearing from you.
I copied and expanded the example from the fullCalendar eventClick document page:
$('#calendar').fullCalendar({
eventClick: function( calEvent, jsEvent, view ) {
var txt = 'Event: ' + calEvent.title + '<br>' +
'Event Start: ' + calEvent.start + '<br>' +
'Event End: ' + calEvent.end + '<br>' +
'Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY + '<br>' +
'View: ' + view.name;
// for an image use: jQuery.facebox({ image: 'dude.jpg' })
// for ajax page use: jQuery.facebox({ ajax: 'remote.html' })
jQuery.facebox(txt);
}
});
Oh, and if you want to get any of the other calEvent objects, look at the fullCalendar event object page. There could be more if you are using the google calendar extension, including description and location
It might have something to do with the way facebox works. I think it might only run on the initial load of the page - so when you add these to new elements the facebox code has already run and the new elements are not recognized.
If you are using this to initiate facebox:
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Then that is the case. You should add something to the eventRender method so that as events are rendered you call the facebox method on then, which instantiates them as facebox elements.
From http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/:
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
But instead of "element.qTip" you would use "element.facebox" with the proper arguments. You may need to set an href too.