I want to create a Highcharts Plugin which should improve the Accessibility module.
In the plugin code I want to change the screenReaderSectionFormatter (http://api.highcharts.com/highcharts/accessibility.screenReaderSectionFormatter). Can I add the function somehow to the general chart options? Or can I override the function in another way?
Thanks in advance.
You could override the highcharts function if you wish. This piece of code will add a default function for screenReaderSectionFormatter if one is not provided in the settings
var originalHighchartsFunction = Highcharts.chart
Highcharts.chart = function() {
var higchartsSettings = arguments[1];
if (higchartsSettings.accessibility == undefined) {
higchartsSettings.accessibility = {
screenReaderSectionFormatter: function(){
// your code
}
}
}
return originalHighchartsFunction.apply(this, arguments);
}
here is the full fiddle where i added the load event in the function override as a proof of concept http://jsfiddle.net/uz7bd7xo/1/
Related
im searching an example for using the exportData event in Highcharts
https://api.highcharts.com/highcharts/chart.events.exportData
I do not find any example, can someone help me?
You need to add exporting and export-data modules and click for example 'View data table' in the context menu:
chart: {
events: {
exportData: function() {
alert('export data!');
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/50vx6ad8/
Docs: https://www.highcharts.com/docs/export-module/export-module-overview
In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.
E.g. I want the event for month name in following example.
Thanks In advance.
If you don't want to use JQuery you can use it as follows
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
});
complete code at http://jsfiddle.net/t07ok5v3/5/
Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.
Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/
Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:
xAxis: {
labels: {
events: {
click: function () { ... }
}
}
}
I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.
for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
alert('You clicked on '+this.textContent);
}
});
I am trying to create a bootstrapped firefox extension to obtain current tabs url and title. The issue is that I want to check when the tab url has the word "about:" in its url. The solution that I propose is to check the require("sdk/tabs").activeTab.url" using the browsers native string.substr() javascript function. Is any posibility to use browsers native javasript functions on widget or ToolbarButton onClick method?
exports.main = function(options) {
var base64 = require("sdk/base64");
var panel = require("sdk/panel").Panel({
width: 700,
height: 470,
onHide: function ()
{
panel.contentURL = "about:blank";
}
});
var tbb = require("toolbarbutton").ToolbarButton({
id: "extension-tbb-id",
label: "IFShare+",
image: "https://www.fasdfasd.es/factory/templates/templateforidkreader/favicon.ico",
panel: panel,
onClick: function()
{
windowPanel = require("sdk/tabs").activeTab;
title = windowPanel.title;
url = windowPanel.url;
// Is any posibility to do something like that ????
contentScript: "if("+url+".substring(0,5)=='about:'){"
{
url='';
title='';
}
contentScript: "}"
this.panel.contentURL = "https://www.fasdfasdf.es/factory/index2.php?option=com_idkreader&view=shareplus&task=window&Itemid=0&url="+base64.encode(url, "utf-8")+'&title='+base64.encode(title, "utf-8")+'&ref=ext';
},
});
// move the toolbar button to the navigation bar
if ("install" == options.loadReason) {
tbb.moveTo({toolbarID: "nav-bar"});
}
}
I'm not entirely clear on the details of what you're trying to accomplish, but I think you're close.
To answer the question as asked, no you can't access variables from within a content script. The best you can do is use content script messaging a mentioned in the page-mod documentation.
However, to accomplish what you want, you don't need to do this. You can just do what you want in the onClick function itself, like so
function onClick()
{
windowPanel = require("sdk/tabs").activeTab;
title = windowPanel.title;
url = windowPanel.url;
if(url.substring(0,5)=='about:'){
{
url='';
title='';
} else {
//You can insert any content script stuff you want here
}
this.panel.contentURL = "https://www.fasdfasdf.es/factory/index2.php?option=com_idkreader&view=shareplus&task=window&Itemid=0&url="+base64.encode(url, "utf-8")+'&title='+base64.encode(title, "utf-8")+'&ref=ext';
}
If you refine your question a bit, I will be happy to refine my answer.
Given a certain event (say, a button click), I'd like to disable Chosen.js for a specific select box.
Is this possible?
I had a similar requirement although it didn't require a button click, I just wanted to enable / disable Chosen for specific select boxes.
My solution is for each select element that you don't want to use Chosen with, add the CSS class 'no-chzn'. Then in chosen.jquery.js, add the following lines to the constructor (this is near line 533 in version 1.1.0):
$.fn.extend({
chosen: function(options) {
if (!AbstractChosen.browser_is_supported()) {
return this;
}
return this.each(function(input_field) {
var $this, chosen;
$this = $(this);
if ($this.parent().hasClass("chosen-disable")) { return; } // Just add this line!
chosen = $this.data('chosen');
if (options === 'destroy' && chosen) {
chosen.destroy();
} else if (!chosen) {
$this.data('chosen', new Chosen(this, options));
}
});
}
});
For example you have a select with class no-chosen and you do this:
$("select:not('.no-chosen')").chosen();
It means it takes all selects except the one with no-chosen class.
example: i have an un-ordered list containing a bunch of form inputs.
after making the ul .sortable(), I call .disableSelection() on the sortable (ul) to prevent text-selection when dragging an li item.
..all fine but I need to re/enable text-selection on the form inputs.. or the form is basically un-editable ..
i found a partial solution # http://forum.jquery.com/topic/jquery-ui-sortable-disableselection-firefox-issue-with-inputs
enableSelection, disableSelection seem still to be un-documented: http://wiki.jqueryui.com/Core
any thoughts?
solved . bit of hack but works! .. any comments how i can do this better?
apply .sortable() and then enable text-selection on input fields :
$("#list").sortable({
stop: function () {
// enable text select on inputs
$("#list").find("input")
.bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
e.stopImmediatePropagation();
});
}
}).disableSelection();
// enable text select on inputs
$("#list").find("input")
.bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
e.stopImmediatePropagation();
});
A little improvement from post of Zack - jQuery Plugin
$.fn.extend({
preventDisableSelection: function(){
return this.each(function(i) {
$(this).bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
e.stopImmediatePropagation();
});
});
}
});
And full solution is:
$("#list").sortable({
stop: function () {
// enable text select on inputs
$("#list").find("input").preventDisableSelection();
}
}).disableSelection();
// enable text select on inputs
$("#list").find("input").preventDisableSelection();
jQuery UI 1.9
$("#list").sortable();
$("#list selector").bind('click.sortable mousedown.sortable',function(e){
e.stopImmediatePropagation();
});
selector = input, table, li....
I had the same problem. Solution is quite simple:
$("#list").sortable().disableSelection();
$("#list").find("input").enableSelect();
The following will disable selection for the entire document, but input and select elements will still be functional...
function disableSelection(o) {
var $o = $(o);
if ($o.find('input,select').length) {
$o.children(':not(input,select)').each(function(x,e) {disableSelection(e);});
} else {
$o.disableSelection();
}
}
disableSelection(document);
But note that .disableSelection has been deprecated by jquery-ui and will someday go away.
EASY! just do:
$( "#sortable_container_id input").click(function() { $(this).focus(); });
and replace "sortable_container_id" with the id of the element that is the container of all "sortable" elements.
Quite old, but here is another way:
$('#my-sortable-component').sortable({
// ...
// Add all non draggable parts by class name or id, like search input texts and google maps for example
cancel: '#my-input-text, div.map',
//...
}).disableSelection();