I have an issue I can't seem to track down. I am using Flot to graph some data, super easy. I want to add the hover effect you see here: Flot Example
Unfortunately, under no circumstance can I get the 'plothover' event to fire. This is a brief snippet from the code:
$.plot($chartArea, eventData, eventOptions);
$chartArea.bind("plothover", function (event, pos, item) {
console.log('hovering!');
});
Is there something you need to set in the options object to enable this behavior? Thanks!
Like an idiot, I forgot to include the grid option. Check out the object:
eventOptions = {
points: {
show: true
},
lines: {
show: true
},
grid: { hoverable: true, clickable: true },
xaxis: {
min:earliestMessage.timestamp,
max:currentTime,
mode:"time",
ticks:10
}
};
notice the grid parameter. That's what was missing. Duh!
:)
I'm not sure what $chartArea is in your code, but lets try something like this:
var chartArea = $("#placeholder"); // your chart div
$.plot(chartArea, eventData, eventOptions);
$(chartArea).bind("plothover", function (event, pos, item) {
console.log('hovering!');
});
Related
I have been looking for days and I haven´t found anything yet. I also have tried some codes I developed just like:
me.comboEstudios = me.getGestionRrhh().down('#pestanaTrabajador').down('#pestanaDatosBasicos').down('#nivelEstudios');
me.comboEstudios.getStore().load({
scope: this,
callback: function(records, operation, success) {
me.comboEstudios.setValue(respJson[0]['NIVEL_ESTUDIO']);
}
});
but it seems like this code works well for setting values in combo boxes in forms but it doesn't work for combo box in a grid.
If someone knows how to do this, I would appreciate
You need to manage it in beforeedit event, in my case I am using ptype: 'cellediting' and below is my code:-
plugins: [{
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
edit: 'cellEditingBlur',
beforeedit: function (editor, context, eOpts) {
var empDesignation = Ext.getStore('employeedesignation');
if (empDesignation && !empDesignation.isLoaded()) {
empDesignation.load();
}
}
}
}],
Hope it helps :)
I'm working on an interactive map using the New Signature US map plugin. You can see my code here: http://codepen.io/ann_kwilinski/pen/EKdGYW
I'm also going to preface this with I am a beginner with javascript.
I need to add an active state to my state labels and I am really stuck on how to write that. The plugin has the hover state options but not active state.
'labelTextHoverStyles': {
fill: '#000000'
},
If any one can point me in a direction on how to do that it would be much appreciated.
Update
I need help binding the the stateSpecificLabelStyles to the click event I already have:
'click' : function(event, data) {
$('#clicked-state')
.text('Breathe Better Network partners in '+ data.name)
.stop()
.animate({backgroundColor: '#ddd'}, 1000);
// Populate List in Panel
//var stateSelected = data.name;
var stateContent = $('#'+data.name+'-li').html();
// alert(stateContent);
$("#state-list-response").html(stateContent);
//Open Panel List
$(".state-list-overlay").slideDown( "fast", function() {
$(".state-list-panel").slideDown( "fast", function() {
$(".state-list").fadeIn();
});
});
$("#map > svg > path").each(function(i){
$(this).css('fill', '');
});
$('#' + data.name).css('fill', '#26aedf');
},
});
I think you need to use stateSpecificStyles property of JQuery U.S Map:
$('#map').usmap({
stateSpecificStyles: {
'MD': {fill: 'yellow'},
'VA': {fill: 'teal'}
}
});
As 'MD' and 'VA' are your state codes in the MAP.
Update: And yes, you can also bind your own Click event like:
click: function(event, data) {
// Output the abbreviation of the state name to the browser's console. Press f12 in your browser to see this result.
console.log(data.name);
// And when you have the state abbreviation, you can use the above example like this:
stateSpecificStyles: {
data.name: {fill: 'black'}
}
}
I'm binding a click event on every series point in order to get the data associated with the point.
plotOptions: {
series: {
point: {
events: {
click: function () {
console.log("that > ", this);
}
}
}
}
}
If I have a chart with no drilldown It works fine ( fiddle ).
However, if I define a drilldown ( fiddle ) i can only get the point data for the inner series. The point data is null for the slice i just clicked to drilldown.
this > c {series: null, name: null, y: null, drilldown: null, options: null…}
Is this a bug or am i missing something ?
It is a bug.
Reported to our developers here.
This happens because your click handler gets executed when the clicked element has already disappeared. Looks like a bug to me.
A quick fix would be to modify highcharts js/modules/drilldown.src.js around line 513 to look like this:
// Add the click event to the point label
H.addEvent(point, 'click', function () {
setTimeout(function() {
point.doDrilldown();
}, 100);
});
Here's a modified fiddle.
We're working on a Kendo UI grid that is bound to REST endpoint. The messaging portion is working great.
Where we're having trouble is trying to mask a phone number input. We like the following behavior:
1) User clicks into phone number cell.
2) User enters 1234567890.
3) When leaving the cell, the format is changed to (123) 456-7890.
We looked already at custom formats. Those seem date/time and number specific. I haven't found a way to do a custom format for a string column.
We also looked at doing this with a formatPhoneNumber function that is called on each cell's change event. I'm not happy with that approach, though it does work.
Here is the base code for the grid. I'd like to just find a way to include a custom format, or bind to a function when defining the column or field properties.
EditGridConfig = function() {
var self = this;
self.gridConfig = {
columns: [
{ field: 'PhoneNumber', title: 'Phone Number', width: '150px' },
],
data: [],
toolbar: [
{ name: "save" },
{ name: "cancel" }
],
dataSource: {
type: "json",
transport: {
read: "/api/BusinessEntity",
update: {
url: function(parent) {
return "/api/BusinessEntity/" + parent.Id;
},
dataType: "json",
type: "PUT"
}
},
schema: {
model: {
id: "Id",
fields: {
PhoneNumber: { type: "string" },
}
}
}
},
editable: "incell"
};
self.selectedData = ko.observable();
};
Here is the change event and formatPhoneNumber function we are using to get the phone number to format when focus leaves the cell. I'm just not happy with this approach, and am looking for a "cleaner" way to do it.
change: function (e) {
if (e.field == "PhoneNumber") {
console.log('before' + e.items[0].PhoneNumber);
e.items[0].PhoneNumber = formatPhoneNumber(e.items[0].PhoneNumber);
console.log('after' + e.items[0].PhoneNumber);
}
}
function formatPhoneNumber(number) {
return number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}
Thanks much for any suggestions!
Sorry for answering my own question. I thought I would add some more detail along the lines of #James McConnell's answer so other people won't struggle like I did trying to wire up the jQuery.on event with the .mask function.
Thanks to James' hint, I wound up using the Masked Input jQuery plugin and wiring up to dynamically created events using jQuery.on.
Here is the helper function I wrote (simplified for example):
applyDynamicInputMask = function(container, selector, event, mask) {
$(container).on(event, selector, function() {
var $this = $(this);
$this.mask(mask);
});
};
And to call it:
applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");
edit: function (e) {
//if edit click
if (!e.model.isNew()) {
$('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
//init mask widget
kendo.init($('input[name=Time]'));
}
}
Have you tried a jQuery plugin? We use this one at work:
http://digitalbush.com/projects/masked-input-plugin/
You can bind the plugin to any jQuery selector, so just slap a custom class on the input that needs formatted, and use that to hook up the plugin. Not sure if this is a viable solution, but it's what I've used in the past. HTH! :)
I'm using JQuery UI - Selectable. I want to deselect the element if it has been pressed and it has already been selected (toggle)
Could you help me to add this functionality please !
Because of all the class callbacks, you're not going to do much better than this:
$(function () {
$("#selectable").selectable({
selected: function (event, ui) {
if ($(ui.selected).hasClass('click-selected')) {
$(ui.selected).removeClass('ui-selected click-selected');
} else {
$(ui.selected).addClass('click-selected');
}
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('click-selected');
}
});
});
You already have that functionality with jQuery UI selectable if you're holding down the Ctrl key while clicking.
If you really need that as the default functionality, you don't need to use selectable, you can do it just as a simple onclick handler, like what nolabel suggested.
Or... you might as well edit jquery.ui.selectable.js and add an option which does just what you need. Shouldn't be too hard, there are 4 places where event.metaKey is checked, make sure if your option is set, just run the codepaths as if event.metaKey was always true.
As the selectables could use some more customisation, you could also make a feature request for jQuery UI developers to include it in the next official version.
You have to inject two simple elements in the code to achieve what you want. This just inverts the metaKey boolean, whenever you need inverted/toggle functionality.
options: {
appendTo: 'body',
autoRefresh: true,
distance: 0,
filter: '*',
tolerance: 'touch',
inverted: false /* <= FIRST*/
},
_mouseStart: function(event) {
var self = this;
this.opos = [event.pageX, event.pageY];
if (this.options.disabled)
return;
var options = this.options;
if (options.inverted) /* <= SECOND*/
event.metaKey = !event.metaKey; /* <= SECOND*/