Hacking at 0300 » Javascript

Don’t Reinvent the Wheel

Danny — Mon, 29 Jun 2009 18:38:13 +0000

I needed a date/time picker and spend a couple of hours making a simple one:

Obviously, I didn't spend a couple of hours putting this together. I wrote it quickly, then spend the hours getting it to work even remotely correctly in Internet Explorer.

Download the code and the HTML template.

But I wasn't fond of the user interface (edit time by typing, then click on date) or the design, so I decided to search for something better and found, via John Resig, Maxime Haineault's timepickr.


$('#timepickr').timepickr({convention: 12, resetOnBlur: false});

Which I like a lot more (I'll have to separate the date from the time-picking, but I think that's the right approach anyway). This should teach me that Google Is My Friend. No need to invent everything from scratch!

Copying jQuery UI styles and Detecting CSS Loading

Danny — Wed, 24 Jun 2009 13:49:11 +0000

So let's say I want to create elements that match a jQuery UI theme (in my case, I was using a and wanted to copy colors). I could try to parse the CSS file directly, but that runs afoul of the same-origin security problem (I use Google's CDN to get the jQuery UI stylesheets, as in http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css). I could go through the document stylesheets to find the relevant styles, but there's an easier way; just create an element with the desired classes and query that:

var background = $('').css('background-color');

But there's a problem if I'm using Themeswitcher.


function showcolor(){
  var background = $('').appendTo('body').css('background-color');
  $('#result').text(background).css('color', background);
  $('#tester').remove();
}
$('#themeswitcher').themeswitcher({
  onSelect: showcolor
});

If you play with this, you notice that there's a race condition going on. Themeswitcher adds a element and the new stylesheet is loaded asynchronously. Meanwhile, the onSelect callback is called and the style of the test element is grabbed. But, depending on whether the new stylesheet is in the cache and how fast your internet connection is, the new stylesheet may not be loaded. So the color from the old stylesheet is returned.

Doing It Right (and Failing)

Figuring out what to do is easy. The theme switcher adds stylesheets with class "ui-theme", so the newest stylesheet is always $('link.ui-theme:last'). So all we need to do is tell when that is loaded.

That problem is not easy. One solution is to check whether the stylesheet object associated with the link exists, with $('link.ui-theme:last')[0].sheet.cssRules (see this discussion). But stylesheet objects are subject to the same-origin security rule, so this fails with outside stylesheets.

It is claimed that the onLoad event is fired when stylesheets are loaded, but doesn't work in Firefox or Webkit, which rules out all the browsers I care about.

Trust me, I tried this for a long while and did a lot of searching. There's no way to tell that a stylesheet has been loaded. I could create a loop that polled for changes in the test

but that's ugly, inefficient and assumes that the new style always uses a different color.

Hoist the Jolly Roger

If at first you don't succeed, hack it. There's a different element that does let us know when it's been loaded: images. will try to load the file "foo" and, if that fails, will call func. But there's one catch, a bug? security feature? in Webkit: it will not call the onerror function if the file is in the cache already. It doesn't call onload; it just doesn't do anything. So we test first to see if the onerror trick works, and if it doesn't, we add a random parameter to make sure the file reloads. It means that we don't take advantage of caching the CSS file in Webkit browsers, but the code works:


var noCache = function() {return '?'+Math.random()};
var href = $('link.ui-theme:last').attr('href');
$('').attr('src', href).error(function() {
  $.noCache = function() {return '' };
  $(this).remove();
}).appendTo('body');
$('#betteronselect').click(function(){
  $('#themeswitcher').empty().themeswitcher({
     onSelect: function(){
        var href = $('link.ui-theme:last').attr('href')+noCache();
        $('').attr('src', href).error(function() {
          showcolor();
          $(this).remove();
        }).appendTo('body');
    }
  });
});

Of course, my analysis may be wrong and the reason that this works is that it delays the showcolor long enough to lose the race. I don't think so, but it will take some experimenting to make sure.

Improving jQuery UI widget getters/setters

Danny — Fri, 24 Apr 2009 03:12:36 +0000

Right now UI widgets need to explicitly declare "getter" functions (methods that return information about the widget rather than manipulate it) with $.ui.widget.getter = 'gettermethod1 gettermethod2'. The reason is that most jQuery plugins are chainable: $(selector).widget('method').css('color','blue') executes method on each element matched, then css('color','blue') on each element. Some plugins and some uses of plugins instead return information about the first element selected, so they cannot be chained, like $(selector).css('color'). For normal methods, the widget code creates a plugin that automatically executes the method named on each element matched, then returns the jQuery object to allow chaining. It uses the getter list to determine which methods should pass their return value from the plugin instead, and only operate on the first element matched.

This is inelegant, and makes my subclassing code less useful, since the getter list cannot be extended easily, only copied or replaced.

This is due to be improved in jQuery 1.7.2 (or at least it's in the latest nightlies): any method that returns this is a "regular" method that, when used as a plugin, should be chainable. Any method that returns anything else is a "getter" that returns that value when used as a plugin.

Thus, in the widget tutorial, we no longer need the line $.ui.green4.getter = "getLevel"; and getLevel remains unchanged, but setLevel needs to be changed to:

    setLevel: function (x) {
        var greenlevels = this._getData('greenlevels'); 
        var level = Math.floor(Math.min(greenlevels.length-1, Math.max(0,x))); 
        this._setData('level', level); 
        this.element.css({background: greenlevels[level]}); 
        return this; // note new return value
    },

I think this will be an improvement, even if it means rewriting all my widgets. I would rather have used a return value of "undefined" as the flag for a chainable method, since that would not require rewriting regular methods, and getters that intentionally return undefined should be few and far between. But no one asked me.

Finding the Size of a Table

Danny — Fri, 27 Mar 2009 07:48:27 +0000

elements are among the most frustrating to use if you are trying to style them with Javascript, because their sizes are so unpredictable and poorly controlled with CSS. I was trying to set the size of a table (a calendar, if you must know) by setting the size of each

and hoped the surrounding

would expand to fit (the way a div containing any other, fixed size, element would) but the table was shrunk to the smallest possible size. Compare:


This is 150px wide

	
		A simple table
		
			1 2
		
	


	a simple div 400px wide

Notice how the lower

has width: 400px and actually is 400px wide; the surrounding

is 150px wide but has overflow: visible so you can see the bigger

extending past it. The

, on the other hand, even though it has two s that are supposed to be 200px wide, is shrunk to fit the enclosing . Not good.
The only solution I found was to calculate the width that the 
should have had, and set the width of the enclosing  to that value. But how to find the "natural" width of the table? We have to set the size of all the enclosing elements to something huge so the table will not be shrunk, get the width of the 
 
, then set everything back. And, to make things harder, the table has to be visible in order to get its width; all the parameters like offsetWidth and clientWidth are set to zero if the table is not visible. And that includes the case where any of the parent elements have display: none, so jQuery's innerWidth hack (set the CSS of the element itself to {display: 'block'; visible: 'hidden'}, get the offsetWidth, then switch the CSS back) won't work; it only affects the visibility of the element itself.
Making the 

 itself have position: absolute temporarily solves the shrinking problem but not the visibility problem.
The key was to use jQuery's undocumented $.swap function. It is what jQuery itself uses to calculate sizes of hidden elements. It takes an element, a set of CSS properties and a callback, and temporarily sets the element to have those CSS properies, calls the callback, then restores the CSS. Now all I have to do is use that recursively:

function truewidth (e, parent){
	if (arguments.length == 1) parent = e.parentNode;
	var ret = 0;
	// we assume the table is in the document, so we eventually reach , and we assume the body is visible
	if (!parent || parent.nodeName.toLowerCase() == 'body') return e.offsetWidth;
	$.swap (
		parent,
		{ position: 'absolute', width: '9999px' , display: 'block' },
		function() { ret = truewidth(e, parent.parentNode) }
	);
	return ret;
}
And I can use it:

This is 150px wide

	





		A simple table
		
			1 2
		
	



	a simple div 400px wide



$('#widthexample').width(truewidth($('#widthexample table')[0]));

Table height
One more problem with tables: I wanted to use a 
 for the calendar header (the month/year part) and wanted it to be animated when it changed, so I needed to know the height of the table so I could set the size of the containing element. Easy, no? Just $('table').height(). Unfortunately, I discovered a heretofore undocumented bug in Firefox: it does not include the caption in the height. IE, Opera, Safari and Chrome all do.
The easiest way I've found to correct for this without browser sniffing is to remove the caption, calculate the height, then put the caption back:

function trueheight(e){
	for (var child = e.firstChild; child; child = child.nextSibling){
		if (child.nodeName.toLowerCase() == 'caption'){
			e.removeChild(child);
			var h = e.offsetHeight;
			e.insertBefore(child, e.firstChild);
			return h + child.offsetHeight;
		}
	}
	return e.offsetHeight;
}

Note that if the table is hidden, you may need to use the $.swap technique above. Note also that it uses offsetHeight, which does not include the margin. I can't offhand imagine using margins on a caption, but if you do, you will have to add it back (doing $(child).outerHeight(true) is reasonable).
Demonstrating:


	
		
			A simple table
			
				
					the surrounding div does not
					correct for caption size
				
			
		
	


	
		
			A simple table
			
				
					the surrounding div corrects
					for caption size
				
			
		
	



$('.heightexample:eq(0)').height($('.heightexample:eq(0) table').height());
$('.heightexample:eq(1)').height(trueheight($('.heightexample:eq(1) table')[0]));




Roman Numerals in Javascript
Danny — Mon, 09 Mar 2009 18:48:01 +0000
I was looking at some code that included converting arabic to roman numerals, and it was all things like this:


function Level(i, v, x)
        {
        this.i = i;
        this.v = v;
        this.x = x
        }

levels = new Array();

levels[0] = new Level('I', 'V', 'X');
levels[1] = new Level('X', 'L', 'C');
levels[2] = new Level('C', 'D', 'M');

function calcDigit(d, l)
        {
        if (l > 2)
                {
                str = '';
                for (var m = 1; m <= d * Math.pow(10, l - 3) ; m++)
                        str += 'M';
                return str
                }
                        
        else
                if (d == 1)
                        return levels[l].i
                else
                        if (d == 2)
                                return levels[l].i + levels[l].i
                        else
                                if (d == 3)
                                        return levels[l].i + levels[l].i + levels[l].i
                                else
                                        if (d == 4)
                                                return levels[l].i + levels[l].v
                                        else
                                                if (d == 5)
                                                        return levels[l].v
                                                else
                                                        if (d == 6)
                                                                return levels[l].v + levels[l].i
                                                        else
                                                                if (d == 7)
                                                                        return levels[l].v + levels[l].i + levels[l].i
                                                                else
                                                                        if (d ==  
                                                                                return levels[l].v + levels[l].i + levels[l].i + levels[l].i
                                                                        else
                                                                                if (d == 9)
                                                                                        return levels[l].i + levels[l].x
                                                                                else
                                                                                        return ''
// And so on

It all reminded me of fourth-grade BASIC. I should have been taking care of patients, but the challenge of writing a better converter kept me busy for a few minutes. Here's what I came up with:

var romanNumerals = [
	[1000, 'M'],
	[900, 'CM'],
	[500, 'D'],
	[400, 'CD'],
	[100, 'C'],
	[90, 'XC'],
	[50, 'L'],
	[40, 'XL'],
	[10, 'X'],
	[9, 'IX'],
	[5, 'V'],
	[4, 'IV'],
	[1, 'I']
];
arabic2roman = function(n){
	var r = '';
	for (var i = 0; i < romanNumerals.length; ++i){
		for (var x = romanNumerals[i]; n >= x[0]; n -= x[0]) r += x[1];
	}
	return r;
}
roman2arabic = function(r){
	var n = 0;
	for (var i = 0; i < romanNumerals.length; ++i){
		for (var x = romanNumerals[i], l = x[1].length; r.substr(0,l) == x[1]; r = r.substr(l)) n += x[0];
	}
	return n;
}

 

Or, if you are willing to assume that your browser will always enumerate objects in order, you can make it a bit smaller:

var romanNumerals = { // assumes objects are enumerated in order
	M: 1000,
	CM: 900,
	D: 500,
	CD: 400,
	C: 100,
	XC: 90,
	L: 50,
	XL: 40,
	X: 10,
	IX: 9,
	V: 5,
	IV: 4,
	I: 1
};
arabic2roman = function(n){
	var r = '';
	for (var x in romanNumerals){
		for (var i = romanNumerals[x]; n >= i; n -= i) r += x;
	}
	return r;
}
roman2arabic = function(r){
	var n = 0, i = 0;
	for (var x in romanNumerals){
		for (var l = x.length; r.substr(i,l) == x; i+=l) n += romanNumerals[x];
	}
	return n;
}

Anyone out there with something smaller?