1
2
3
4
5
6
7

<script type="text/javascript">
$(function(){
	$('input.calendarSelectDate').live('click', function() {
		$(this).datepicker({showOn:'focus'}).focus();
	});
});
</script>

You would think just a simple “$(this).datepicker()” call wrapped inside the live() event would work, but it doesn’t. Turns out that in order to get it working consistently, you have to add the ’showOn: focus’ config option as well as manually focusing on the element with the focus() event. Charming.

One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your page. This will ensure the elements higher in your HTML source will also have a higher z-index order on your page, solving most of the IE stacking issues. If you’re using jQuery (the best Javascript library there is), here’s the quick fix:

1
2
3
4
5
6
7

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

This code will start with a z-index of 1000, and decrement the z-index for each DIV element of the page by 10, giving the first DIV a z-index of 1000, the second, 990, the third 980, and so on. Notice that the selector will find all DIV elements with the code “$(‘div’)”, using the same syntax as CSS selectors. If your HTML code has different requirements, feel free to change the code or the selector to suit your needs by following jQuery’s documentation on selectors.

Update for MooTools (04/14/2009):

A generous commenter has posted the code for fixing z-index issues with MooTools 1.2:

1
2
3
4
5
6
7

if(Browser.Engine.trident){
	var zIndexNumber = 1000;
	$$('div').each(function(el,i){
		el.setStyle('z-index',zIndexNumber);
		zIndexNumber -= 10;
	});
};