It seems that the .position() method of jQuery calculates wrong values
if there are hidden elements above the shown element that you are
trying to calculate value for. Seems that this is only happening in
IE. Does anyone know any workaround for this?
Here's an example. Rows 3 through 6 and 8 through 12 are hidden. When
you click on rows 1 and 2, the cursor moves to the top of the rows
correcty. When you click on row 7, it is off (lower) by a bunch of
pixels. When you click on row 13, it is off even more:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></
script>
<script type="text/javascript">
$(function()
{
$(".hideMe").hide();
$("tr").click(function()
{
var cursor = $(document.getElementById
("cursorSpan"));
cursor.css("top", $(this).position().top);
//cursor.position().top = ($(this).position
().top);
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr class="hideMe">
<td>row 3</td>
</tr>
<tr class="hideMe">
<td>row 4</td>
</tr>
<tr class="hideMe">
<td>row 5</td>
</tr>
<tr class="hideMe">
<td>row 6</td>
</tr>
<tr>
<td>row 7</td>
</tr>
<tr class="hideMe">
<td>row 8</td>
</tr>
<tr class="hideMe">
<td>row 9</td>
</tr>
<tr class="hideMe">
<td>row 10</td>
</tr>
<tr class="hideMe">
<td>row 11</td>
</tr>
<tr class="hideMe">
<td>row 12</td>
</tr>
<tr>
<td>row 13</td>
</tr>
</table>
<span id="cursorSpan" style="background-color:black;
position:absolute;"> </span>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
