[Plugin: The Events Calendar] Calendar Pop-Ups in IE problem

  • Great Plug-In and works very well.

    Problem we’re having is that in FireFox, the calendar and the pop-ups appear just fine. However, if you’re using IE and you mouseover one of the events on the calendar, the pop-up is behind the next day. So whatever the pop-up information has will be behind the next day’s header and dates; you can’t read all of the information.

    Also, if you select an event as ‘All Day Event’ and give it a stretch of dates, like July 12 to July 16, then the dates do not show, but only the title does on mouseover. However, if you remove the checkmark for All Day Event and then give it a time, it does show up.

    In IE, the page heading information (includes the drop downs, and previous/next month links) are crammed up top.

    Does anyone know if there is a CSS tag to add to make IE look normal?

    The address is here: https://firstprespaducah.org/category/Events

    Thanks for any info.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi wishfull !

    I had the same problem that you described. I couldn’t find any answer, so i decided to get around the problem.

    To avoid the bug of the tooltip under IE7 (pop-up behind the next day), simply modify these lines in the file ‘events.js'(line:13,16):

    backticks
    var bottomPad = $(this).parents(“td”).outerHeight() + 22; /*default=5*/
    var bottomPad = $(this).outerHeight() + 35; /*default=18*/
    backticks

    The values will depend of the height of your ‘td’ elements. What we need is to display the tooltip above the ‘td’ containing the number of the day.

    The toolip will then not appear above the ‘td’ containing the date. The bug is avoided.

    Hope this will help you.

    Bye

    Heya everyone! I figured I’d let everyone else know my fix for this situation because IE just refuses to die!

    Within your Events folder or Views folder (depending if you’re using a custom template or not) locate table.php and alter the following lines of code:

    Line 81 Original:
    $return = "<div class='daynum tec-event' id='daynum_$day'>";

    Line 81 Replacement:
    $return = "<div style='z-index:1;' class='daynum tec-event' id='daynum_$day'>";

    and

    Line 120 Original:
    <div id='event_<?php echo $eventId; ?>' class="tec-event

    Line 120 Replacement:
    <div style="z-index:2;" id='event_<?php echo $eventId; ?>' class="tec-event

    What this will do is instruct IE (or any other browser for that matter) to show the bubble (or pop-up as you call it) in-front of the calendar.

    Yay for z-index! booo for IE!

    Hi Somesite, thanks for sharing! And your changes DO fix the tooltip/pop-up from appearing ABOVE the adjacent table for the next day.

    However, it does not seem to address the instances where there are multiple events in one day. In those cases, there is still an overlay problem with the other events in the same day and the pop-up.

    Anyone know the fix to this?

    IE is still more than 50% of the user base various parts of the world, and as much as I deplore spending the insane amount of time and energy in finding fixes for IE’s non standard behavior, I have to support it for the time being.

    Is this just an issue with IE7 and not IE8? Looks fine when I test on IE8. I don’t have a computer with IE7 for testing.

    Yay for Somesite! Boo for IE!

    You can also put this in your CSS file:

    div.tec-event {z-index:2 !important}
div.daynum {z-index:1 !important}
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: The Events Calendar] Calendar Pop-Ups in IE problem’ is closed to new replies.