I'm fairly new to JS and XUL so please bear with me if this is a noob query :-)
I am developing an extension for firefox which performs a custom action when a toolbar button (created by me) is clicked. I have been able to create the button using mozilla examples but what I have seen is that even when the extension is installed successfully (and I restart firefox to complete the changes) the button needs to be added manually to the toolbar. After this it can be used as required and even on subsequent launches of FF it stays in the toolbar.
I wanted to know if there is a way by which the button will be auto-loaded when the extension is successfully installed. My XUL script looks like so:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"
href="chrome://custombutton/content/button.css"?>
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript"
src="chrome://custombutton/content/button.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="CustomButton[1]()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
</overlay>
You'll need to write some javascript code to accomplish that: Adding button by default. Take a look at Adding toolbar buttons to existing toolbars too.
Use the insertItem function: https://developer.mozilla.org/en/XUL/Method/insertItem You may 1. locate your container, such as the Navigation bar. 2. locate the target item to be inserted before or after. 3. insert your botton. 4. make it persist.
var nbar = document.getElementById("nav-bar");
var target = document.getElementById("urlbar-container");
var elem = nbar.firstChild;
while (elem) {
if (elem == target) {
break;
}
elem = elem.nextSibling;
}
nbar.insertItem("your-button-id", elem, null, false);
document.persist("nav-bar", "currentset");
Related
I've set up a new page and added jQuery.mmenu. now when I load the page the mmenu opens already by default.
mmenu is firing and adding mm-opened on the body on page load. Then the css transition kicks in and mmenu is opened nicely.
But I want it only to be opened when click on a menu button. Very strange. Anybody heard this before?
jquery:
$(document).ready(function() {
$("#my-menu").mmenu();
});
html:
<body>
<nav id="my-menu">
<ul>
<li>But WHy?</li>
</ul>
</nav>
<div>//content</div>
</body>
Nothing special going on in the markup
Add this to your css stylesheet and test it:
#my-menu:not(.mm-menu) {
display: none;
}
Add "mm-wrapper_sidebar-closed" class to html tag.
I added in html (javascript):
window.location.hash = "menu";
Ivan, I upvoted you because it made me realize that the issue for me is related to the hash, thanks : ).
If you're not opening the mmenu programmatically with JS, it instructs you to have a link with the href property set to the selector of the menu that you want to open. So I have something like:
...
to target the menu selector with an ID of navbar-menu. What I didn't realize was I had clicked on this link before all of my JS code was in place, so the current URL still had a hash in it pointing to the menu selector. e.g.
https://yourdomain.com/#navbar-menu
I'd refresh the page and the menu would just open automatically. Because mmenu allows you to use a hash to define the state of the menu - open when the hash corresponding to the menu selector is in the URL.
FYI for anyone who is running into the same issue. If the menu is opening automatically, remove the hash.
You can use the "initial" option under the sidebar addons.
sidebar: {
collapsed: {
use: '(min-width: 450px)',
hideNavbar: false,
},
expanded: {
use: '(min-width: 992px)',
initial: 'closed'
},
},
reference: https://github.com/FrDH/mmenu-js/issues/967
I'm using XUL to write my firefox toolbar. I use that xul code to do simple label button:
<?xml version="1.0"?>
<overlay id="Sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script type="application/x-javascript" src="chrome://sample/content/sample.js" />
<toolbox id="toolbox">
<toolbar id="Sample" toolbarname="Sample" >
<label value="Lable Button "/>
</toolbar>
</toolbox>
</overlay>
My question is how to add logo image, image button and button menu...also how to add submenu. Please somebody submit a quick sample of code, so I will understand better.
What you have there isn't a button - it is a static label.
To add a logo use image tag (see example in the documentation).
To add an image button use toolbarbutton tag (see example in the documentation).
To add a submenu use toolbarbutton tag with type="menu" and put a menupopup tag inside (again, there is an example in the documentation).
Note: You can use src attribute to specify the image source for an image element and image attribute to specify the image source for a toolbarbutton element. However, it is preferable to set the images in CSS, you can use list-style-image property for that:
#myToolbarButton
{
list-style-image: url(chrome://myextension/skin/toolbar.png);
}
I am playing around with the HTML5 features, and I want div's (and similar containers like articles, sections, etc.) to be draggable. Consider the following code:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Draggable Object</title>
</head>
<body>
<h1>Test #1: A Simple Draggable Object</h1>
<div draggable="true">This text should be draggable.</div>
</body>
</html>
I tested in OS X the following browsers:
In Chrome 7.0 and Safari 5.0.2 I can successfully drag the text around, but in Firefox 3.6 and 4.0b6 I can neither drag the text nor mark it (as if it was usual text). Is this a bug or a feature?
How do I achieve that Firefox lets me drag around these tags without using jQuery ?
According to HTML5 Doctor, this won't work in Firefox without some JS help.
The HTML 5 spec says it should be as
simple as adding the following
attributes to the markup of the
elements in question:
draggable="true"
However, this doesn’t work completely
for Safari or Firefox. For Safari you
need to add the following style to the
element:
[draggable=true] {
-khtml-user-drag: element;
}
This will start working in Safari, and
as you drag it will set a default,
empty value with the dataTransfer
object. However, Firefox won’t allow
you to drag the element unless you
manually set some data to go with it.
To solve this, we need a dragstart
event handler, and we’ll give it some
data to be dragged around with:
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
// store the ID of the element, and collect it on the drop later on
event.dataTransfer.setData('Text', this.id);
});
}
I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>
I'm currently building my first Firefox extension, and am having a little difficulty with one piece of functionality. I'd like to open a new browser tab in response to a button click on the toolbar. The new tab should contain the contents of a webpage, together with some extra buttons.
At the moment I've created a separate xul file for the contents of the new tab:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="myapp-report-window"
title="Example 4.5.1"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://myapp/content/main.js" />
<toolbox>
<toolbar id="nav-toolbar">
<toolbarbutton label="This-is-going-to-do-some-stuff"/>
</toolbar>
</toolbox>
<iframe id="myapp-report-frame" flex="1"/>
<script type="text/javascript">
function loadPage(url){
document.getElementById('myapp-report-frame').setAttribute('src',url);
}
</script>
</window>
This xul file is launched via this javascript, referenced from the main myapptoolbar.xul:
gBrowser.selectedTab = gBrowser.addTab('chrome://myapp/content/report.xul');
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load",
function(){
loadPage('http://www.somedynamicallysetwebsite.com');
}, true);
The problem that I'm having is that the loadPage function is not being found, so the src attribute of the iframe is never set. I'm sure it's some silly scoping problem, but I'm very new to firefox extensions (day 2!) so any help would be much appreciated.
I am new to this myself. Actually stumbled back here because I was trying to ask another question about firefox extension but I think I might be able to help.
Um, your loadpage function is declared within newtab.xul and therefore, the function can't be called from myapptoolbar.xul. I think XUL files are HTML files with enhanced privilege and hence share similar properties. You can declare the function within an app.js and then have the both of them include the app.js file like this:-
<script type="application/x-javascript" src="chrome://app/content/app.js" />
Place it somewhere at the top, right after the there.is.only.xul line would be nice. Just do things like what you'll normally do to a HTML page.
I hope this helps. =) Good luck on your extension!
I fixed this in the end - it was a scope issue. I had to access the iframe via the GBrowser property.