The popout is added as a new div box positioned absolutely. Because the calendar is in a table popping out from within the cells caused z-index issues. A hotspot div was added to serve as a hit state to prevent mouseleave from being triggered by leaving a child of the popout.
In IE, the behavior is very erratic. Mouseleave is sometimes triggered but often not. Any help would be greatly appreciated.
Try the following code, its your code but i changed it a little. Basically the below code will do the same thing the only difference is how the event handler gets managed, rather then using a completely new selector and event handler we can bind an event directly to the element we need to in the same scope.
$('.ebox').hover(function() {
var data = $(this).find('.popup').html(), os = $(this).offset();
var popup = '<div class="m_popup"><div id="hotspot"></div>' + data + '</div>';
$('.m_popup').remove();
$('#main').prepend(popup);
$('.m_popup')
.prepend(popup)
.css({top: (os.top - 50), left: (os.left - 50)})
.bind('mouseleave', function() {
$(this).unbind().hide();
});
});
This means that you don’t need the following code anymore…
if that doesn’t work ^ - which from what i can tell it should
quick question: did you set the height and width of the elements involved? also if you’re using floats, I would try to replace that with padding.
IE is completely clueless when it comes to float and even more so if you’re using absolute positions without defining height and width.
I’ve even managed to CRASH IE9 with javascript multiple times because of floats and absolute positions…
damn you microsoft! can you believe the d-bags are suing google for being a monopoly because bing sucks ass?
-_-
Microsoft: “Oh noooz, my pay for top results search engine can’t cheat by indexing google results, where’s the lawyer who prosecuted us in the 90’s!?”
Its interesting to see how you bound the behavior. I was trying to figure out how to do that.
Unfortunately, it does not fix the IE behavior.
It doesn’t act consistently. It seems to trigger mouseleave occasionally a few seconds after the event has occurred. It does this in IE 7-9.
Thank you SgtLegend for correcting my code. Unfortunately, that didn’t fix the problem.
The IE behavior feels like it is being asked to do something requiring enormous processing power, and it just can’t handle it (like a recursive loop). I thought maybe layering all the months on top of each other could be the cause of the problem, but I made a test page with only one month: Rockland Conservatory of Music :: Calendar
And this also has the same problem.