Fbloggs Geekdom

FireFox doesn’t have a native global event handler. Here’s how to create one using FireFox’s event-capturing model.

Tags: Browser differences, FireFox, IE, JavaScript, Web Development

Mennagio.jpg, originally uploaded by djkenzie.

Taken on July 8, 2005

Firebug beta 1.0 is now available. This is by far the best toolbar available for FireFox or IE for debugging web applications. See This blog entry at Sitepoint for more details.  A few  of the features I really like are:

• The debugger  – identifies exact line of script in error.
• The HTML view – lets you view contents of externally linked Javascript files, also.
• The CSS inspector – shows you all ancestor css rules for elements, not just the current CSS rule, so you can see the total effect of the cascade.
• The ability to change CSS settings on the fly. For example, hover over a color, click on it, then change the RGB value to see another color – it does this for the specific area on the page, as well as in the sheet.

Tags: FireFox, JavaScript, Web Development

Ok, so JSON is conceptually simple. See json.org for more info. So I include json.js in a page, then attempt to reference the parseJSON method of a string object and get an error. Why? Is it because I reference the method in another external script file, instead of using inline script in the page itself? How exactly does Javascript run the code to extend the prototype of an intrinsic object? Is it prior to the page loading? Help!   BTW – I can get this working no problem in a simple page where the script is inline.

I confirmed that click is not a W3C method for anchor objects. However, thanks to the prototype property of objects you can extend a host object by adding methods to it. The code below does this for anchor elements, although you could do it for any element. Credit to Martin Honnen for his article at http://www.faqts.com/knowledge_base/view.phtml/aid/9368 for the solution. Here’s the code, which just needs to be in the top of your page so that it runs prior to any scripts at document load time:


try {
// create a element so that HTMLAnchorElement is accessible
document.createElement('a');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function') {
if (this.onclick({type: 'click'}) && this.href)
window.open(this.href, this.target ? this.target : '_self');
}
else if (this.href)
window.open(this.href, this.target ? this.target : '_self');
};
}
catch (e) {
alert('click method for HTMLAnchorElement couldn\'t be added')
}


Javascript Stuff

Tip: Local versus global variables- use the var keyword to declare a variable as local.  

Tip: don’t write this:     var x;   

because x will be undefined. Write this instead: var x = 0; // or some other initial value.

Question: the click method for anchor tags does not appear to work in FireFox. Can anyone confirm this? Here’s a piece of code that fails:
var anchortag = document.getElementsByTagName("a")[0];
anchortag.click();