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.
Related
The Ajax accordion on my page isn't functioning at all. It displays fine on the page, but I can't seem to expand/collapse the panes when I click on their Headers.
Here's my code (just the HTML portion as I'm not aware of any code behind that is needed):
<aj:Accordion runat="server" ID="acMain" SelectedIndex="0"
FadeTransitions="true"
TransitionDuration="400"
FramesPerSecond="40" RequireOpenedPane="false" TabIndex="0"
SuppressHeaderPostbacks="true" HeaderCssClass="acHeader"
HeaderSelectedCssClass="acHeaderSelected">
<Panes>
<aj:AccordionPane runat="server" ID="Panel1">
<Header>
...
</Header>
<Content>
...
</Content>
</aj:AccordionPane>
<aj:AccordionPane runat="server" ID="Panel2">
<Header>
...
</Header>
<Content>
...
</Content>
</aj:AccordionPane>
</Panes>
</aj:Accordion>
I've checked the official page for the Accordion as well as a number of blogs on the subject (all of which seem to be a copy of the official page with the author's own wording) and according to all of this, I can't see that I've done anything wrong or missed anything out.
Matter of fact, I've checked an Accordion my boss made a while back and my code's basically the same as his (only panel content is different) and he has no code-behind either, so I'm really lost here.
Any help will be greatly appreciated
EDIT
After adapting my code according to a sample on asp.net, I've managed to collapse the first pane (SelectedIndex 0), but the other one won't expand :/
So I copied the accordion code from the asp.net how to page and put my content into the panes, still had no effect.
As it turns out, there was a rogue </div> tag in my content that was wrecking the accordion so I recommend that anyone having any similar problems checks their content very thoroughly.
Also, it's worth noting here that as this particular sample worked for me and because I'm telling you to use it if you're having trouble, it's author did leave an incorrectly closed </p> tag that might cause problems with your accordion during testing, so watch out for that.
I've been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.
This is my site structure:
<div id=container>
<div id="header">
<!-- Header + Navigation Buttons, same throughout the site. -->
</div>
<div id="main">
<!-- content of each page, different on each page. -->
</div>
</div>
Also note that each navigation button leads to an index.php file on a different sub-directory, e.g www.mysite.com/contact, www.mysite.com/comments etc.
How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn't reload, however the #main content does?
I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you'll never see a blank white page while the page is loading - instead you'll always see the nav bar etc. and the #main content would fade in and out.
Previously, I used this:
<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>
But it didn't work (note I did write the correct subdirectory) and the whole page would reload as normal.
If you could help me out I'd greatly appreciate it!
Thanks in advance!
mlazim14
<script type="text/javascript">
$(document).ready(function() {
$('#main').load('/subdirectory/ #main');
});
</script>
That should work. Are you sure the address is correct? Maybe the whole page wasn't loaded yet either. Try this, then 'echo' the contents in the index.php file:
$(function() {
$('#main').load('/comments/index.php');
});
Code inside the above function is executed when the page is ready. See jQuery .ready().
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");
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 thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!