jQuery Countdown not working with IE 8

Question

I have one countdown embedded in my website. Its working fine in Mozilla / Chrome / IE9, But not working in IE 8.

http://jsfiddle.net/FVsGa/

$(function () {
    var ts = 1359647999000;

    if (ts > 1356524873000) {
        $('#countdown').countdown({
            timestamp: ts
        });
    }
});

Answer 1

Internet Explorer 8 behaves a bit differently than other modern versions of IE9 when you use the jQuery method to create DOM Elements via HTML strings. Apparently in IE8 you need to provide the closing tag in order for the element to be created properly.

The countdown plugin you're using contains the following line:

$('<span class="count' + this + '">')

Note here that the span element is not closed. You have a couple options:

1. Close the element, or
2. Choose a different approach

The first route is pretty self-explanatory:

$('<span class="count' + this + '"></span>')

This will fix your problem in IE8.

The second option is to take a different approach. One that I find really attractive is to use the HTML/Props signature, passing properties in as the second argument:

$('<span>', { "class" : "count" + this })

This also resolves the issues in IE8.

I have forked and corrected the code, as well as issued a pull-request to have the changes pulled back into the original repo for the benefit of others.