troubleshooting Question

jQuery and CSS Popup In a Widget

Avatar of rbanks303
rbanks303 asked on
jQueryWeb DevelopmentCSS
2 Comments1 Solution596 ViewsLast Modified:
Okay, I've got a tough one for you.  Whoever can solve this one is the master.

I have a widget that people install on their blog.  jQuery is installed with the widget.  The widget uses jquery to create a "hover popup" whenever someone moves their mouse over a persons picture.  

The HTML and Javascript I use to create the popup are listed in the code section.

Here's the problem: on this most blogs, the popup works great (move your mouse over the recent visitors widget):

http://tararustyhallejosh.blogspot.com 

However, on some blogs, the popup is displayed way too far to the right (move your mouse over the recent visitors widget):

http://blog.rustinbanks.com

I did some investigating, and it does look like that the CSS "left" and "top" properties are getting set correctly, just interpreted differently.  In the correct blog, the "left" value is the same as the .offset().left property of the popup.  This is what I would expect.  In the incorrect blog, the "left" value is the same as the .position().left property of the popup.  Both have absolute, not relative positioning.  

Whoever can figure this out will have awesome karma sent their way along with points!
<script type="text/javascript">
jQuery(document).ready(function() {
 
jQuery('.triggerpopup').hover(function() {
        var pos = jQuery(this).offset();
        var width = jQuery(this).width();
        jQuery(this).next("div").css({ "left": (pos.left + width) + "px", "top": pos.top + "px" });
        jQuery(this).next("div").stop(true, true).fadeIn("slow");
 
    }, function() { jQuery(this).next("div").fadeOut("fast"); });
 
 
});
</script>
 
<div class="triggerpopup">
A Picture And Some Text
</div>
<div class="popup" style="display:none; position:absolute;width:220px">
Some Text
</div>
ASKER CERTIFIED SOLUTION
Silhouette

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros