I want to disable all action when clicking a legend item.
So far i managed to disable the column hide/appear animation by doing this
events: {
legendItemClick: function(){return false}
}
or in Android:
events = HIEvents().apply {
legendItemClick = HIFunction("function() { return false; }")
}
but now when i click on of the legends items it just gets highlighted while the others go into the background like this
You need to disable inactive and hover states:
series: [{
...,
states: {
inactive: {
enabled: false
},
hover: {
enabled: false
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/7s1bkw8v/
API Reference: https://api.highcharts.com/highcharts/series.pie.states
Related
I am using a jQuery DataTable. On the top, there are many buttons that will eventually call different actions for the selected rows.
Two of these buttons actually hold a collection of buttons.
The buttons should only be enabled under certain conditions, depending on which rows are selected.
The main buttons are very easy to enable/disable as found in the examples https://datatables.net/extensions/buttons/examples/api/enable.html
$(document).ready(function() {
var table = $('#example').DataTable({
dom: 'Bfrtip',
select: true,
buttons: [{
text: 'Action1',
enabled: false
}, {
text: 'More actions',
enabled: false,
extend: 'collection',
buttons: [{
text: 'Sub-action1',
enable: false
}, {
text: 'Sub-action2',
enable: false
}]
}, {
text: 'Action2'
enable: true
}]
});
});
To enable Action1 or Action2, I simply use their indexed position:
table.button(0).enable(condition); // Changes Action1
table.button(2).enable(condition); // Changes Action2
But I also need to enable/disable buttons within a collection. In this example: Sub-Action1 and Sub-Action2.
How do I access those?
hey refer to this link :- https://datatables.net/reference/type/button-selector
this may help !
In the code below I have a pointFormatterfor a tooltip. What I'd like to do is to, for some points, completely hide the tooltip. I have tried returning null or false in these cases, however, an empty tooltip still appears. Is it possible to completely hide a tooltip when using pointFormatter? I've seen that with other formatters it is posisblet return null or false but this doesn't seem to be the case here.
tooltip: {
useHTML: true,
borderWidth: 0,
backgroundColor: "rgba(37,37,37,0.95)",
style: {
padding: 10
},
headerFormat: "",
pointFormatter: function () {
if(this.hrr_num === 16){
return null;
}
return self.getToolTip(parseInt(this.hrr_num));
},
followPointer: false,
shadow: false,
shape: "square",
hideDelay: 0
}
There are several *formatter Functions in the Tooltip Object. The one you are looking for is just called formatter. If you return false in this function then the tooltip will not be displayed at all. This should do the trick:
tooltip: {
[...]
formatter: function () {
if (this.point.hr_num === 16) {
return false;
}
return self.getToolTip(parseInt(this.point.hr_num));
},
[...]
}
In my sencha Touch application i am using the slidenavigation, when ever i click on the hamburger icon the menu slides out.
Now i want to mask the active view when menu slide is open.
My code for slidenavigation is as below
createMenu: function(){
var items = [
{
xtype:'button',
text:'Home',
ui: 'mainmenu',
listeners: {
tap: function(){
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
}
else
{
Ext.Viewport.hideMenu('left');
Ext.Viewport.setActiveItem({xtype: 'main'});
}
}
}
},
{
xtype:'button',
text:'Videos',
ui: 'mainmenu',
listeners: {
tap: function(){
Ext.Viewport.setActiveItem({xtype: 'videolist'});
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
}
else
{
Ext.Viewport.hideMenu('left');
}
}
}
}
];
return Ext.create('Ext.Menu', {
width: 200,
scrollable: 'vertical',
items: items,
id: 'mainmenu',
cls: 'mainmenu',
});
}
To show your mask, before "Ext.Viewport.showMenu()"
add this line :
Ext.Viewport.getActiveItem().setMasked(true);
To hide your mask, after "Ext.Viewport.hideMenu()"
add this line :
Ext.Viewport.getActiveItem().setMasked(false);
I've been using jVectorMap quite successfully-- it's a wonderful package for displaying interactive maps!
In this case, I only want some regions to be selectable, and there doesn't seem to be an option to set regions active/inactive. So instead, I set "regionsSelectable=false", and then set "selectedRegions" to the ones I want active.
This works fine (showing the correct hover attributes, etc. for "active" regions only)-- with one exception, in iOS. There, it takes two "clicks" (touches) for the "onRegionClick" handler to get invoked. On the first click, the "selectedHover" attributes are set correctly, but "handleRegion" never gets called. A second click, and "handleRegion" is called.
Initialization code looks like:
map = new jvm.WorldMap({
container: $('#mapdiv'),
map: 'world_mill_en',
regionsSelectable: false,
regionStyle: {
initial: { fill: '#0086d0' },
hover: { "fill-opacity": 1.0 },
selected: { fill: '#003a6a' },
selectedHover: { fill: '#ff7a00' }
},
onRegionClick: handleRegion,
selectedRegions:["CN","RU","US"],
...
});
function handleRegion(e,cc) {
alert("cc="+cc);
...
}
What is needed is either a way to "activate" only a few regions, or a way around this two-click problem.
I know this is a bit outdated question, but here is a hack around iOS issue for others like me who bumped to this question while searching for some hack around this.
As you already noted, iPad/iPhone are emulating hover with first "tap" .. and click with second "tap".
So to fix this ackward behavior we will do following (example on fiddle)
var lastCode = "";
var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: 'green',
normalizeFunction: 'polynomial',
regionsSelectable: true,
regionsSelectableOne: true,
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: "white",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: "white",
"fill-opacity": 1
},
selected: {
fill: "#EC6602",
"fill-opacity": 1
},
selectedHover: {
fill: "#EC6602",
"fill-opacity": 1
}
},
onRegionClick: function(e, country){
if (lastCode && lastCode == country) {
e.preventDefault();
return;
}
var map = $("#world-map").vectorMap("get", "mapObject");
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
},
onRegionLabelShow: function (e, el, country) {
if (iOS) {
e.preventDefault();
var map = $("#world-map").vectorMap("get", "mapObject");
if (lastCode) {
map.regions[lastCode].element.setSelected(false);
}
map.regions[country].element.setSelected(true);
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
}
},
markers: [{
latLng: [37.7833, -122.4167],
name: 'San Francisco'
}]
});
In short words, we are overwriting onRegionLabelShow functionality with custom behavior (only for the iOS devices). Basically we are preventing the tooltip from showing and instead of that we are selecting the hovered (tapped) ccountry, focusing it and storing it's code in global variable.
On second tap we are detecting if the country has changed by comparing current code with last value and in that case un-selecting previously selected country and selecting new one.
It should be fairly easy to adapt the resolution to your needs.
actually, you should check onRegionTipShow:
...
handleIOSClick = function (e, el, code) {
if (istouch) {
var mapObject = $(map).vectorMap('get', 'mapObject');
map.regions[code].element.setSelected(true);
e.preventDefault();
}
},
CreateMap = function () {
if (typeof $(map) !== 'undefined'){
$(map).width(700);
$(map).height(400);
mapObject = $(map).vectorMap({
map: 'us_lcc_en',
onRegionClick: regionClicked,
onRegionTipShow: handleIOSClick,
backgroundColor: "inherit",
regionStyle: {
initial: {
fill: '#477294'
}
}
});
}
},
...
I have a QTip assigned to an element as follows:
$('#myDiv').qtip({
show: { when: { event: 'click', } },
hide: { when: { event: 'unfocus' } },
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'red' // Style it according to the preset 'cream' style
},
position: {
corner: {
tooltip: 'topMiddle', // Use the corner...
target: 'bottomMiddle' // ...and opposite corner
}
},
content: {
text: self.parent('.qtip').html(),
title: { text: 'My Title' }
},
});
Under 'text' in 'content', I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.
However, my current means of self.parent('.qtip').html(), as displayed above, is not working.
What is the standard way to do this? Thanks.
I later found the solution to this question.
To access properties of the element that triggered the QTip, one must structure the code in this way:
$("#container a").each(function() {
$(this).qtip({ // QTip code });
});
That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.
Maybe you could set it before:
var text = $('#myDiv').text();
And use it inside the object:
text: text,