jQry UI Resizable icon problem
HTML
<div id="resizableLeft" class="ui-widget-content floatleft">
<div id="AlertDiv" style="width:20px;height:1px;"><img src="../images/indicator.gif" /></div>
<div id="progressbar"><div class="progbarText">Loading portfolios...</div></div>
<span style="margin-left:250px;">Portfolio Filter: </span>
<select id="drpPortFilters">
<!--option>Select a portfolio filter</option-->
</select>
<div class="PortfolioList"> <!-- PORTFOLIO TABLE CONTENTS ! -->
<table id="pftable" class="pftable">
<caption></caption>
<thead>
<tr>
<th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>
</tr>
</thead>
<!--tfoot>
<tr><th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th></tr>
</tfoot-->
<tbody></tbody>
</table>
</div>
</div>
CSS
div.floatleft { float:left;width:620px; }
div.floatright { float:right;width:550px; }
#resizableLeft { background-color: #efeeef; width: 720px; height: 600px; padding: 0.3em; }
#resizableRight { background-color: #efeeef; width: 650px; height: 600px; padding: 0.3em; }
.ui-progressbar .ui-progressbar-value {
background-image: url(../Images/pbar-ani.gif);
}
div.progbarText
{
width:150px;height:0px;opacity:1; margin-left:20px;
}
JavaScript
$(document).ready(function () {
$(function () {
$("#resizableLeft").resizable({
maxHeight: 800,
maxWidth: 1000,
minHeight: 500,
minWidth: 410,
animate: false
});
$("#resizableRight").resizable({
maxHeight: 900,
maxWidth: 1000,
minHeight: 600,
minWidth: 500
});
});
// Portfolio Filters change event !!
$('#drpPortFilters').change(function () {
var selValue = $('#drpPortFilters option:selected').text(); //$(this).val();
alert(selValue);
$('#pftable').find("caption").text(selValue);
var cap = oTablePf.find("caption");
alert(cap.text());
});
});
function parsePortfolioFilters(xml) { // parse portfolio filters XML; append to drop down list !
$(xml).find("filter").each(function () {
var filterId = $(this).attr('id');
var filterName = $(this).find('name').first().text();
$('#drpPortFilters').append("<option value=" + filterId + ">" + filterName + "</option>");
});
}
function parsePortfolios(xml) {
var PfJsonData = [];
var termColWidth = 12;
var expType = "";
$(xml).find("portfolioSummary").each(function () { // parse <portfolioSummary> nodes and create Html Table !!
var pfId = $(this).attr('portfolioId');
var exp = [];
var myRow = "";
var name = "";
$(this).find("keys key").each(function () {
switch (($(this).attr('type'))) // Pf keys: ExpType or Member
{
case "ExpType":
expType = $(this).attr('displayValue');
break;
...