I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ? I work with Firefox 3.6.3.
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src=".js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ? I work with Firefox 3.6.3.
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery./jquery-latest.js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
- Interesting. It seems that there is the same problem with Opera 10.53. IE8 and Chrome work without problems however. – Aoi Karasu Commented May 21, 2010 at 1:09
2 Answers
Reset to default 6 +50After doing some trial and error tests, it looks like this is related to the moment that the browser recalculates and redraws the table when you fade in/fade out one of the cells. There's nothing wrong with your code, and jQuery is correctly toggling the 'display' property of the cell - it looks like it's a minor bug in FF.
Probably the easiest way around it is to avoid toggling table cells themselves, and instead toggle the contents of the column2 cell, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery./jquery-latest.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("td.column1").each(function(index) {
$(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
$(this).toggle(
function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
)
});
});
</script>
<style type="text/css" media="screen">
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
}
.column2 .details{
display:none;
}
</style>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
So, the script adds the column2 cell, and that stays visible the whole time - instead we show/hide the <span class="details"> within it. I've tested this version in FF 3.6.3 and it behaves as it should!
Oh - and I cleaned up your jQuery selectors for better performance. If you want more info on why, let me know!
I copied and tried your code, on Firefox 3.6.3 and Chrome 5.0.375.29. And saw nothing what you described so I am at loss.
Scrollbar moved only when scrolling normally, not when clicking on the text.