मुझे समझ में नहीं आता है कि उदाहरण के लिए "रेखा 9" क्लिक करते समय लंबवत स्क्रॉल बार स्वचालित रूप से सबसे ऊपर की स्थिति में क्यों जाता है। आगे के क्लिक स्क्रॉल बार को स्थानांतरित नहीं करते हैं। क्या कोई यह बता सकता है कि क्यों, और इसे कैसे ठीक किया जाए? मैं फ़ायरफ़ॉक्स 3.6.3 के साथ काम करता हूं।वर्टिकल स्क्रॉल बार स्वचालित रूप से क्यों चलता है?
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/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>
जे एस:
$(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") });
});
});
सीएसएस:
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;
}
दिलचस्प। ऐसा लगता है कि ओपेरा 10.53 के साथ एक ही समस्या है। आईई 8 और क्रोम हालांकि समस्याओं के बिना काम करते हैं। –