Question

I am having an issue positioning a div. Here is the div:

<div class="facebookHoverDiv" style="position: absolute; top: 0; left: 0; z-index: 15000; display: none">
<div class="calendar-hover-top"></div>
<div class="calendar-hover-middle">
    <div class="post-image"></div>
    <div class="facebook-icon">Facebook</div>
    <div class="post-content"><span id="facebook-text">content</span>
        <div class="post-date">This will be the date.</div>
    </div>
</div>
<div class="calendar-hover-bottom"></div>
</div>

<div class="twitterHoverDiv" style="position: absolute; top: 0; left: 0; z-index: 15000; display: none">
<div class="calendar-hover-top"></div>
<div class="calendar-hover-middle">
    <div class="twitter-icon">Twitter</div>
    <div class="post-content"><span id="twitter-text">content</span>
        <div class="post-date">This will be the date.</div>
    </div>
</div>
<div class="calendar-hover-bottom"></div>
</div>

I am using the following jQuery function to display a tooltip:

    function ShowToolTip(event, postType, postMessage, scheduleDate, customPostId, postId) {
        if (postType == 'Twitter') {
            $('.twitterHoverDiv .post-content #twitter-text').text(postMessage);
            $('.twitterHoverDiv .post-content .post-date').text(scheduleDate);
            $('.twitterHoverDiv').css("left", event.x - 65);
            $('.twitterHoverDiv').css("top", event.y - $('.twitterHoverDiv').height());


            $('.facebookHoverDiv').hide();
            $('.twitterHoverDiv').show();
        } else {
            $('.facebookHoverDiv .post-content #facebook-text').text(postMessage);
            var url = "http://host.mmm.dev.webedge.mcmurry.com/Media/Image.ashx?articleid=" + postId + "&custompostid=" + customPostId;
            //url = url.replace("undefined", "0");
            $('.facebookHoverDiv .post-image').css("background-image", "url('" + url + "')");
            $('.facebookHoverDiv .post-image').css("background-size", "100%");
            $('.facebookHoverDiv .post-content .post-date').text(scheduleDate);
            $('.facebookHoverDiv').css("left", event.x - 65);
            $('.facebookHoverDiv').css("top", event.y - $('.facebookHoverDiv').height());


            $('.twitterHoverDiv').hide();
            $('.facebookHoverDiv').show();
        }
    }

If I run this in Google Chrome, it works perfectly. However, if I run it in FireFox, the tooltip shows up in the upper left hand corner of the screen. The issue seems to be in the $('.facebookHoverDiv').css("left", event.x - 65); and the $('.facebookHoverDiv').css("top", event.y - $('.facebookHoverDiv').height()); calls.

Do I need to so something specific for FireFox?

Answer 1

I figured it out. Just in case anyone else runs into this problem. The issue was caused by using the event.x and event.y properties. These properties exist in Chrome, but in other browsers they are called event.clientX and event.clientY. Changing the properties to this fixed my issue.