Resizing elements with Google Closure

gistfile1.js

// Lessons in Google Closure's Resizing
// 
// Resizing to 100% isn't fair
//

// Our example:
new goog.fx.dom.Resize(this.toolbar, ['100%', size.height], ...);

// Google Closure's function definition
goog.fx.Resize.prototype.updateStyle = function() {
  this.element.style.width = Math.round(this.coords[0]) + 'px';
  this.element.style.height = Math.round(this.coords[1]) + 'px';
};


// If coords[0] is set to '100%', Math.round() is going to give us a NaN
// This means we are setting the element's width to "NaNpx"
// Chrome and friends politely ignore our ignorance and continues on
//
// IE however, is so fickle that it will throw an "Invalid argument" error without telling us where!
//


// In trying to figure out how to ignore the width we can try a couple of things

// First off all, try passing null
new goog.fx.dom.Resize(this.toolbar, [null, size.height], ...);

// That looks nice, very explicit...except for this: 
Math.round(null) //=> 0 

// Okay that doesn't work

// how 'bout undefined?
Math.round(undefined) //=> NaN

// Crap, no better...

// Empty string?
Math.round('') //=> 0

// This is getting ridiculous

// So it turns out we need to get an actual number (surprise, surprise)
// Luckily the Closure library gives us a quick an easy way to do so
goog.style.getSize(document.body).width

// Not super dynamic, but it's the best we can do at this point :P
new goog.fx.dom.Resize(this.toolbar, [bodyWidth, size.height], ...);