HTMLページを別のページにロードする必要があるプロジェクトがあります。そのためにjqueryを使用しましたが、問題は、ページがロードされるたびにdiv要素が正しく配置されないことです(下の画像のスクリーンショットを確認してください)。要素の検査がクリックされると、それらは機能します。この奇妙な機能に基づいて多くの質問をチェックしましたが、このエラーを解決できませんでした。私のコードは次のとおりです:
HTML 部分:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/jquery1.js" type="text/javascript"></script>
<script src="js/custom.js"></script>
</head>
<body>
<div id="sidebar">
<ul>
<li id="ft-bar"><h3><a><span class="icon-signal"></span>Freshtime Context Bar</a></h3></li>
</ul>
</div>
<div id="maincontent">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</body>
</html>
Javascript:
$(document).ready(function(){
$('#ft-bar').click(function(){
$('#maincontent').load('ftp-bar.html');
})
});
ftp-bar.html ファイル:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Life range slider</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery1.js"></script>
<script src="js/colResizable-1.3.min.js"></script>
<script type="text/javascript">
$(function(){
//callback function
var onSlide = function(e){
var columns = $(e.currentTarget).find("td");
var ranges = [], total = 0, i, s ="Ranges: ", w;
for(i = 0; i<columns.length; i++){
w = columns.eq(i).width()-10 - (i==0?1:0);
ranges.push(w);
total+=w;
}
for(i=0; i<columns.length; i++){
ranges[i] = 100*ranges[i]/total;
carriage = ranges[i]-w
s+=" "+ Math.round(ranges[i]) + "%,";
}
s=s.slice(0,-1);
$("#text").html(s);
}
//colResize the table
$("#product-life-slider").colResizable({
liveDrag:true,
draggingClass:"",
onResize:onSlide,
gripInnerHtml:"<div class='box1'>Grower <br> 2 Days</div> <div class='label1'></div>",
minWidth:8
});
});
</script>
</head>
<body>
<div class="containerftp">
<table width="80%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="20%"><input type="text" class="ftp" name="Days to Useby" placeholder="Days to Useby" value=""></td>
<td width="20%"><input type="text" class="ftp" name="Storage Temp" placeholder="Storage Temp" value=""></td>
<td width="20%"><input type="text" class="ftp" name="Storage Time" placeholder="Storage Time" value=""></td>
<td width="20%"><input type="range" class="ftp" value="30" min="0" max="100"/></td>
<td width="20%"><input type="text" class="ftp" name="Average Temperature" placeholder="Average Temp" value=""></td>
</tr>
</table>
<br/><br/><br/><br/><br/><br/>
<table id="product-life-slider" width="80%" cellspacing="0" cellpadding="0" border="0" padding-left="2%">
<tr>
<td class="partner" width="2%"></td>
<td class="partner" width="24%"></td>
<td class="partner" width="6%"></td>
<td class="partner" width="27%"></td>
<td class="consumer" width="14%"></td>
<td class="useby" width="27%"></td>
</tr>
</table>
</div>
CSS 部分:
.containerftp{margin:5% auto;text-align:left; position:relative;}
input[type=range].ftp:first-of-type {width: 120px;}
input.ftp {padding:10px;width:85%;border:1px solid #c5dbef;border-radius:5px; background:#e0effc;font-size:14px;}
input.ftp ::-webkit-input-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp ::-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp :-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;} /* Older versions of Firefox */
input.ftp :-ms-input-placeholder { color: rgba(0,5,143,.5);text-transform: uppercase;}
#product-life-slider {border:1px solid #A6C9E2; border-radius:5px;}
#product-life-slider td{height:100px;border:none;}
.partner{background: rgba(154,255,87,1);
background: -moz-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,255,87,1)), color-stop(100%, rgba(68,201,59,1)));
background: -webkit-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -o-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -ms-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: linear-gradient(to bottom, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9aff57', endColorstr='#44c93b', GradientType=0 );
border-right: 1px solid #000 !important;}
/* consumer */
.consumer{background: rgba(255,238,87,1);
background: -moz-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,238,87,1)), color-stop(100%, rgba(255,176,66,1)));
background: -webkit-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee57', endColorstr='#ffb042', GradientType=0 );
border-right: 1px solid #000 !important;}
/* UseBy */
.useby{background: rgba(255,160,87,1);
background: -moz-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,160,87,1)), color-stop(100%, rgba(255,88,66,1)));
background: -webkit-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa057', endColorstr='#ff5842', GradientType=0 );}
/* column anchors */
div.box1{ position: absolute;
margin-top:-55px;
margin-left:-36.8px;
width:70px;height:40px;
background:#e0effc;
border-radius:5px;
border:1px solid #c5dbef;
font-size:13px;
padding:5px;
text-align:center;
}
div.label1 {position: absolute;
margin-left:-9px;
width:0;height:0;
border-left:13px solid transparent;
border-right: 13px solid transparent;
border-top: 13px solid #e0effc;
cursor:e-resize;}
コードは少し面倒ですが、誰かがこの問題を解決するのを手伝ってください。前もって感謝します。
画像は次のとおりです。