Resizable performance issue
I'm using the most current jquery-ui 1.5 package and trying to
implement a simple splitpane, such as the one that is included in the
package zip file. My needs are simpler in that I only need two panes
and one splitbar, which I can get to appear just fine.
My problem is when I actually try to resize the panes...the splitbar
moves VERY slowly and sometimes either doesn't move at all or lags so
far behind where the cursor is it might as well not be moving. What's
even more odd is that I can drag the bar to the left (make the pane
narrower) fairly normally most of the time, but making the pane wider
takes somewhere on the order of 10-15 seconds, if it fires at all.
This behavior is consistent between IE6/7 and FF2/3.
My code is pretty simple, and the behavior occurs with or without the
<iframe> content versus simple static text. It also does the same
things whether the layout is tabled (as the sample included in the zip
file is) or dived out which is how it started out life.
JS:
$(document).ready(function(){
$("#ui-split-side").resizable({
handles:'e',
minWidth:240,
maxWidth:400,
proxy: 'proxy'
});
});
HTML:
<body>
<table id="container" style="height:100%;" cellpadding="0"
cellspacing="0" border="0">
<tbody>
<tr style="height:100%;">
<td style="height:100%;" id="ui-split-side-box">
<div id="ui-split-side" style="height:100%;">
<iframe src="/foldertree.aspx" id="treeframe"
name="treeframe" frameborder="0" height="100%" />
</div>
</td>
<td style="height:100%;" id="ui-split-main-box">
<div id="ui-split-main" style="height:100%;">
<iframe src="/documentlist.aspx?folderkey=<%
Response.Write(folderkey) %>" id="docframe" name="docframe"
frameborder="0" height="100%" />
</div>
</td>
</tr>
</tbody>
</table>
</body>
Any ideas?