SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Jquery popup problem in ie

    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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code JavaScript:
    $('.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...
    Code JavaScript:
    $('.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. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In your code you still have the following code which still may be conflicting with the new code.

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

  6. #6
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Instead of using the .hover method trying using .mouseenter instead.

  8. #8
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OMG it worked! E

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Glad to have helped


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •