Question

I’ve built a stripped down example of what is not working on IE :
http://so.demuyt.net/case1/

( IE8. jQuery 1.7.1 )

Clicking one date in IE does nothing, clicking a second date will put a ‘green pill’ next to the first and second selected date. Doing this in Chrome will put 1 pill with the first click and 1 pill with the second click.

I add a ‘pill’ like this:

$("#canvas").append('<span class="label label-success Workcounter ' + date + ' ' + calendarName + '">1</span>');

I position the ‘pill’ like this:

$(".Workcounter." + date + '.' + calendarName).position( { of : $(".Work-date-highlight."+calendarName+"."+date) , at : "left top" , offset : "3 3" } );

There are no errors in js console, what I have noticed is that in debug mode, I will see the pill added in Chrome, whereas I wont see it added in IE (even when I click the second date).

Any help or pointers would be very appreciated to make IE behave like Chrome & FireFox.

Answer 1

The line you use to position the element seems to be causing the problem for me, try replacing:

$(".Workcounter." + date + '.' + calendarName).position( { of : $(".Work-date-highlight."+calendarName+"."+date) , at : "left top" , offset : "3 3" } );

with:

var datePos = $(".Work-date-highlight."+calendarName+"."+date).position();

$(".Workcounter." + date + '.' + calendarName).css({
    left: datePos.left - 3,
    top: datePos.top - 3,
    position: 'absolute'
});