rbanks303
asked on
jQuery and CSS Popup In a Widget
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!
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER