[jQuery] Backwards positioning problem
Hi all. I'm being beaten by a rather strange positioning problem that my hair would appreciate some help with. I'm trying to have a div "popup" with an ajax call when a link is clicked, and remain present until explicitly closed. That part works fine. The problem is positioning that div. I want it to be located so that its bottom left corner corresponds with the link that was clicked. I can get the horizontal position correct, but the vertical position is completely bizarre. I have a series of links in a table (calendar), and if I click a link in the first row, the div shows up some 900 pixels too far down. If I click the second row, the div shows up *higher* than if I click the first row, but still some 825 pixels too far down. It happens in both Firefox 2 and IE 6. The third row it's ~800 pixels too low. And so on. I've been able to replicate this behavior in several different configurations, although sometimes the div shows up way too high rather than too low. I am completely confused. :-(
I've managed to narrow down the code to the following test case, which uses jquery 1.1.2 and the dimensions plugin (and firebug, of course). Any suggestions would be greatly appreciated. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery/jquery-1.1.2.pack.js" type="text/javascript"></script>
<script src="dimensions.js" type="text/javascript"></script>
<style type="text/css">
#calendarTip {
display: none;
position: absolute;
width: 180px;
height: 135px;
z-index: 10;
background: white;
text-align: left;
border: 1px dotted green;
}
.calendarTable {
position: relative;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('<div id="calendarTip"></div>').appendTo('body'); // The popup div
$('.calendarTable a').bind('click', function(event) {
event.preventDefault();
var offset = $(event.target).offset({scroll: false});
console.debug(offset); // When clicking the 3rd link (21), this prints top=79, left=11
$('#calendarTip')
.css('bottom', offset.top)
.css('left', offset.left)
.load($(this).attr('href'), {}, function(responseText, status, response) {
var popup = $(this).show();
popup
.find('.closeLink').bind('click', function(event) {
event.preventDefault();
popup.hide();
}).end()
.show();
console.debug($('#calendarTip').offset({scroll: false})); // This prints top=851, left=12
console.debug($('#calendarTip').css('bottom')); // This prints 79
console.debug($('#calendarTip').css('left')); // This prints 11
});
});
});
</script>
</head>
<body>
<div id="calendar">
<table class="calendarTable">
<tr>
<td><a href="popup.html">Sa<br />7</a></td>
</tr>
<tr>
<td><a href="popup.html">14</a></td>
</tr>
<tr>
<td><a href="popup.html">21</a></td>
</tr>
<tr>
<td><a href="popup.html">28</a></td>
</tr>
<tr>
<td><a href="popup.html">4</a></td>
</tr>
</table>
</div>
</body>
</html>
--Larry Garfield