Mozilla Developers’ take on Tamarin

By now everyone and their brother should have heard of Adobe's generous donation of their AVM2 to the Mozilla Foundation.

Brendan Eich seems to be extremely excited about the code, I would be too. This should really speed up JavaScript 2.0 adoption in browsers (when the spec is finalized). And since a variety of Firefox's UI features are implemented in JavaScript, it should also help speed up the Firefox.

Frank Hecker has a great post that answers what does this all mean to me.

Overall, I'm really excited about this, but I'm left with a question. With Apollo using WebKit (and JavaScriptCore), will Apple's WebKit project adopt AVM2 too?

Paul Robertson has a nice link roundup too.

More on the Future of JavaScript

I was visiting a site called Ajaxian this morning and noticed a nice little post about the future of JavaScript. Specifically, there is a link to a presentation that Brendan Eich gave on JavaScript 2. For those of you who don't know, Brendan Eich is the creator of JavaScript and works at the Mozilla Foundation.

Besides giving examples of new JavaScript 2 syntax, there is a little timeline on when these features will make it out into the wild. JS 1.7 appears in Firefox 2 and JS 1.9 appears in Firefox 3. Unfortunately, it looks like the JavaScript 2 spec will be finalized after Firefox 3 is released (early 2007), hence it's version being called 1.9.

FlashObject and Frames

Microsoft is finally going to patch IE so it doesn’t infringe on the Eolas patent portfolio. Of course that means we need to update all of our plug-in code so we don’t confuse users. The quickest solution is to use deconcept’s FlashObject. I’ve been using it a lot lately and it’s awesome.

FlashObject works by dynamically creating the flash plug-in code and replacing the html located within a specified tag. However, this presents a problem when you’re sharing code between pages in different frames. FlashObject is only looking on the page that loaded it for that specified tag. Of course you could always include the flashobject.js on each page, but that just seems like a waste to me.

The quickest and easiest solution for me was to modify the write method of FlashObject. Instead of just passing in the tag to be replaced, I also pass in a reference of the document where the tag is located. The new way of calling FlashObject’s write method looks like this:

fo.write(“flashcontent”,document);

Using the keyword document references the current document, but you can easily change that to what ever you need. Then in the flashobject.js file I changed the following lines:

write: function(elementId){
...
var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;

to

write: function(elementId, targetDoc){
...
var n = (typeof elementId == 'string') ? targetDoc.getElementById(elementId) : elementId;

Now I can load the library once and have multiple frames use it. I'm pretty sure this method will work for popup windows too.

Note: I haven’t tested this solution thoroughly and I’m sure there is a better way of doing it to, but it works for now.

Image Scaling with JavaScript

I recently implemented an image scaling feature for an image archive I wrote at work. Normally, I wouldn't scale an image down in a webpage, but I wanted the user to be able to download the full size image by right-clicking. And since these images are used for graphic design, it doesn't make sense to scale them before they're placed in the archive.

The first thing I needed to do was create a container for my image.  Both the container and the image inside of it need an id.

<div id="container">
	<img id="picture" src="some.jpg">
</div>

With the ids I can grab both the container's and the image's height and width. The container's dimensions are usually set in the CSS.

var box = document.getElementById("container");
var img = document.getElementById("picture");

// Grab the image's dimensions
var imgH = img.clientHeight;
var imgW = img.clientWidth;

// Find which dimension is scaled the most
var scaleH = box.clientHeight / img.clientHeight;
var scaleW = box.clientWidth / img.clientWidth;

// Scale the image
if (scaleH < scaleW) {
	img.style.height = box.clientHeight + "px";
	img.style.width = Math.round(imgW * scaleH) + "px";
} else {
	img.style.width = box.clientWidth + "px";
	img.style.height = Math.round(imgH * scaleW) + "px";
}

You now have an image scaled proportionally at run-time. There is actually a lot more to the feature I implemented at work, but this will hopefully get you started. For example a more robust version would check to see if the image needs to be scaled at all, allow the user to select zoom levels, and load the image in dynamically. If you load the image in that way you need to attach an onload event to the image to make sure its loaded before it's scaled. Enjoy!