CODEWITHSUNDEEP
jquerycssfirefoxhtml
Icemanind
Icemanind

Reputation: 48686

Div not being positioned right in FireFox

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?

Upvotes: 0

Views: 158

Answers (2)

Icemanind
Icemanind

Reputation: 48686

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.

Upvotes: 2

epascarello
epascarello

Reputation: 207511

Set a unit

.css("left", (event.x - 65) + "px");

Do the same thing with top

Upvotes: 0

Related Questions