Jquery popup problem in ie

JavaScript
1

The pop out on this page works fine in everything except all versions of Internet Explorer.
Rockland Conservatory of Music :: Calendar

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.

Thank you,
E

2

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…

$('.m_popup').live('mouseout',function(){
    $('.m_popup').css('display','none');
});

See how it goes and let me know but this should hopefully fix the IE issue.

3

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!?”

4

Thank you SgtLegend,

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.

No there are no floats involved.

Any other ideas?

Thanks E.

5

In your code you still have the following code which still may be conflicting with the new code.

$('.m_popup').live('mouseout',function(){
    $('.m_popup').css('display','none');
});
6

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.

Is there anything that would do this?

Thanks E

7

Instead of using the .hover method trying using .mouseenter instead.

8

OMG it worked! E

9

Glad to have helped :slight_smile: