3
他のdivを描画したdivでスクロールを有効にしました。オーバーレイdivのサイズを変更して、下にあるdivのマークを付けたいとします。 jqueryuiのサイズ変更可能な機能を使用しています。下にあるdivがスクロール0,0の位置にあるときにうまくいきますが、divがスクロールされてからサイズ変更が行われると、オーバーレイdivは韻と理由なしにジャンプします。 これを手伝ってください。どんな提案も大歓迎です。スクロールでサイズ変更プラグイン
これは、条件をテストするためのコードです。申し訳ありませんが、それのためのフィドルを作成できませんでした
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Resizable </TITLE>
<link rel="stylesheet" type="text/css" href="Styles/jquery.ui.resizable.css" />
<script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-layout.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Jquery/jquery.ui.core.js"></script>
<script type="text/javascript" src="Jquery/jquery.ui.widget.js"></script>
<script type="text/javascript" src="Jquery/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="Jquery/jquery.ui.resizable.js"></script>
<style type="text/css">
#insertfile {
overflow: auto;
position: absolute;
width:200px; height:100px;
border: 2px solid #000;
}
td { width: 50px; height: 50px; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
var currentTd = $('td#currentId');
var scrtop = currentTd.position().top;
var scrleft = currentTd.position().left;
$('#insertfile').animate({
scrollTop: scrtop,
scrollLeft: scrleft
}, 400);
var top = $(currentTd).position().top;
var left = $(currentTd).position().left;
var bottom = $(currentTd).position().top + $(currentTd).height() - $(currentTd).position().top;
var right = $(currentTd).position().left + $(currentTd).width() - $(currentTd).position().left;
$("<div id='frontLayer' class='front'></div>").insertAfter('.tableData');
// var frontDiv = document.getElementById('frontLayer');
$('#frontLayer').css({
'border': '3px solid #f00',
'position': 'absolute',
'z-index': 2,
'top': top + 'px',
'left': left + 'px',
'height': bottom + 'px',
'width': right + 'px'
});
$('#frontLayer').resizable({
handles: 'n,e,s,w',
});
});
</script>
</HEAD>
<BODY>
<div id='insertfile'>
<table border='1px' class='tableData'>
<tr><td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td id='currentId'>scroll to me</td>
<td>12</td>
</tr>
<tr><td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
</BODY>
</HTML>
上記のスクリプトを含めて、mozillaで実行してください。 ありがとう
私はあなたのためにフィドルを作成することをお勧めします –
が試みますが、大きなファイルからサイズ変更コードのみを分離するのに時間がかかります – kavita
私はコードを投稿しました。どんな提案も大歓迎です。 – kavita