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.
Related
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/
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 have searched the web for the past hour for a solution. I want to achieve the following hover-behavior on iOS.
1st tap -> hover on
2nd tap -> hover off
This will mainly be used to present images.
Because of the CSS tag I assume you want to do this in HTML.
This is almost impossible to do without javascript. You could add a click event handler that toggles the .hover class. For example (untested code, don't copy-paste ;)
element.addEventListener('click', function(evt) {
if (this.className == 'hover') {
this.className = 'hover';
} else {
this.className = '';
}
});
If you have other classes on the document it's probably easier to use a JS framework, e.g. jQuery (again untested):
jQuery(element).click(function(evt) {
jQuery(this).toggleClass('hover');
});
I want to be able to get a reference to the menu object that autocomplete builds, (so I can get the .attr("id") for example), but I'm not very familiar with jQuery/javascript. In the source, I found this:
https://github.com/jquery/jquery-ui/blob/1-9-stable/ui/jquery.ui.autocomplete.js#L182
so there is an object flying around, I just can't seem to find how to get hold of it.
So, for example, if I've got an input with an autocomplete bound to it like this:
// input = reference to the input text box on the form
input.autocomplete({
select: function(event, ui) {
// how to get the reference here?
// some things I've tried
// return input.menu
// return input.data("menu")
// and a few others but they didn't work either
}
});
I tried looking at the data object itself, but there were so many options I could spend all day looking at it and still not find what I'm looking for.
You can get the widget's reference by looking into dataset assigned to its root element (input). Then fetching menu property (and its underlying element) is kinda trivial. )
select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
menu = widget.menu,
$ul = menu.element,
id = $ul.attr('id'); // or $ul[0].id
}
... as this within select function refers to the <input> when this function called as an event handler.
A simpler way to do this:
$(this).autocomplete('widget');
It does the same as:
select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
menu = widget.menu,
$ul = menu.element,
id = $ul.attr('id'); // or $ul[0].id
}
It gives the ul list
$(this).autocomplete('widget').attr('id');
This post talks about the problem that jQuery tabs is still having with the back button. What the customer needs is fairly simple - when they press back, they want to go back to what they were just looking at. But jQuery tabs loads the first tab, not the one that was selected when the user left the page.
I've read the accompanying link and it says "It is planned and Klaus is working on it whenever he finds the time."
Has anyone solved the back button problem with jQuery UI tabs?
Using the solution to the history problem easement posted, a dirty fix for the back button problem would be to periodically check the location.hash to see if it has changed, and if it has, fire the click event of the appropriate link.
For example, using the zachstronaut.com updated jQuery Tabs Demo, you could add this to the $(document).ready callback, and it would effectively enable the back button to switch tabs, with no more than a 500ms delay:
j_last_known_hash = location.hash;
window.setInterval(function() {
if(j_last_known_hash != location.hash) {
$('#tabs ul li a[href="'+ location.hash +'"]').click();
j_last_known_hash = location.hash;
}
}, 500);
Have you tired updating the browsers location as you switch tabs?
http://www.zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html
if you had a class on your tab container that was tabContainer, to update the url when user clicks a tab, you could do this:
$(".tabContainer").tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
then, instead of firing click, you could use the tabs select method if you have some getIndexForHash method that can return the right tab number for the selected hash value:
var j_last_known_hash = location.hash;
window.setInterval(function() {
var newHash = location.hash;
if(j_last_known_hash != newHash) {
var index = getIndexForHash(newHash);
$('.tabContainer').tabs("select",index);
j_last_known_hash = newHash;
}
}, 100);
window.onhashchange = function () {
const $index = $('a[href="' + location.hash + '"]').parent().index();
$('.tabContainer').tabs('option', 'active', $index);
}