0
我一直在試圖調整調整大小爲1的iframe的代碼示例，但是這樣做是爲了一組分層的iframe。基本上我有3行的div表格/表格單元格，其中第二行和第三行有兩個或更多個單元格，每個單元格中有兩個iframe（標題和內容）。請參閱下面的html代碼和樣式表。無法通過使用jquery-ui.js通過鼠標調整分層iframe的大小
問題是我想調整行的大小，但iframe然後更大，然後div表格和div單元格塊。我不知道爲什麼會發生這種情況。我一直無法找到一個div中有多個iframe的示例。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
Page: Generate the Pass Coverage Tool Layout
Description:
This page is going to dynamically create the Pass Plan web page. The user is selecting
what panels they want to see on the page (timeline, missions contacts, and Non - Contact Times GMT.
The missions that are displayed on the missions panel are also selected by the user so there can be one or
more missions selected.
Finally the contact filter is passed down to the Missions columns in the mission panel.
Inputs:
panels - What panels are to be displayed, i.e. timeline, mission contact ranges, and/or Non - Contact Times GMT.
tl- Timeline
ct- Contact Times<br
nct - Non - Contact Times GMT
mission - List of missions to display.
Aura, Aqua, Terra, etc.
Filter - List of TRDS and ground stations to filter out.
SGS, AGS, SKS, TDS, 275, etc.
Author: John kerich
Revision: 12/22/2015
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pass Coverage Tool V2.0</title>
<link rel="stylesheet" href="scripts/jquery-ui-1.11.4/jquery-ui.css" />
<script src="scripts/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script src="scripts/jquery-ui-1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/poller.js"></script>
<link rel="stylesheet" type="text/css" href="pp_style_v2.css">
</head>
<script>
$(function() {
$('#resizable1').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
$(function() {
$('#resizable2').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
<body>
<iframe id="TLB" src="pp_TimeLine.php" scrolling="auto" width="100%" style="border:none"></iframe>
<div id="resizable1" class="Row">
<div class="Column">
<iframe id="TerraMT" src="pp_TerraTitle.html" scrolling="no"></iframe><br>
<iframe id="TerraMB" src="pp_ContactRangesPanel.php?sc=terra&path=/var/www/html/java_clocks/terra/terra_aos_times&filter=N;#target"
data-path=/java_clocks/terra/terra_aos_times scrolling="auto"></iframe><br>
</div>
<div class="Column">
<iframe id="AuraMT" src="pp_AuraTitle.html" scrolling="no"></iframe><br>
<iframe id="AuraMB" src="pp_ContactRangesPanel.php?sc=aura&path=/var/www/html/java_clocks/aura/aura_aos_times&filter=N;#target"
data-path=/java_clocks/aura/aura_aos_times scrolling="auto"></iframe><br>
</div>
<div class="Column">
<iframe id="AquaMT" src="pp_AquaTitle.html" scrolling="no"></iframe><br>
<iframe id="AquaMB" src="pp_ContactRangesPanel.php?sc=aqua&path=/var/www/html/java_clocks/aqua/aqua_aos_times&filter=N;#target"
data-path=/java_clocks/aqua/aqua_aos_times scrolling="auto"></iframe><br>
</div>
</div>
<div id="resizable2">
<div class="Column2">
<iframe id="BT" src="pp_BreakTitle.html" scrolling="no"></iframe>
<iframe id="BB" src="pp_BreakTimePanel.php?type=breaktimes_non" scrolling="auto"></iframe>
</div>
<div class="Column2">
<iframe id="BNT" src="pp_BreakNonTitle.html" scrolling="no"></iframe>
<iframe id="BNB" src="pp_BreakTimePanel.php?type=breaktimes" scrolling="auto"></iframe>
</div>
</div>
</body>
</html>
pp_style_v2.css
.Row
{
display: table; /* Let the element behave like a <table> element */
width: 100%; /* expand as far was you then table */
table-layout: fixed; /* The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells */
border-spacing: 5px; /* padding around the table */
border: 1px solid #000;
}
.Column
{
display: table-cell; /* this is a table-cell */
table-layout: auto; /* let the browser do it */
width: 100%; /* expand the cell to maximum size */
}
#TerraMT {
width: 100%;
height: 26;
border: none;
z-index: 1;
}
#TerraMB {
width: 100%;
height: 100%;
border: none;
z-index: 1;
}
#AuraMT {
width: 100%;
height: 26;
border: none;
z-index: 1;
}
#AuraMB {
width: 100%;
height: 100%;
border: none;
z-index: 1;
}
#AquaMT {
width: 100%;
height: 26;
border: none;
z-index: 1;
}
#AquaMB {
width: 100%;
height: 100%;
border: none;
z-index: 1;
}
#resizable2
{
display: table; /* Let the element behave like a <table> element */
width: 100%; /* expand as far was you then table */
table-layout: fixed; /* The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells */
border-spacing: 5px; /* padding around the table */
border: 1px solid #000;
}
.Column2
{
display: table-cell; /* this is a table-cell */
table-layout: auto; /* let the browser do it */
width: 100%; /* expand the cell to maximum size */
}
#BT {
width: 100%;
height: 35;
border: 1px solid #000;
z-index: 1;
}
#BB {
width: 100%;
height: 100%;
border: 1px solid #000;
z-index: 1;
}
#BNT {
width: 100%;
height: 35;
border: 1px solid #000;
z-index: 1;
}
#BNB {
width: 100%;
height: 100%;
border: 1px solid #000;
z-index: 1;
}
span.CRMissionTitle
{
font-family: arial,helvetica,verdana;
font-size: 16pt;
color: #ffffff;
background-color: #999999;
font-weight: bold;
text-align:center
}
span.ENCTTitle
{
font-family:arial,helvetica,verdana;
font-size:12pt;
color:#ffffff;
font-weight=bold;
text-align:center
}
span.ENCTGTitle
{
font-family:arial,helvetica,verdana;
font-size:12pt;
color:#ffffff;
font-weight=bold;
text-align:center
}
span.today
{
font-family: arial,helvetica,verdana;
font-size: 12pt;
color: #000000;
font-weight: bold;
}
span.tomorrow
{
font-family: arial,helvetica,verdana;
font-size: 12pt;
color: #808080;
font-weight: bold;
}
span.clocklabel
{
font-family: arial,helvetica,verdana;
font-size: 12pt;
color: #33ffff;
font-weight: bold;
}
span.illegal
{
font-family: arial,helvetica,verdana;
font-size: 12pt;
color: #ffffff;
font-weight: bold;
}
.generic
{
font-family: arial,helvetica,verdana;
}
a
{
text-decoration: none;
}
a:hover
{
color: #990000;
text-decoration: none:
}
拉伸第二排下來的iframe後，現在不再那麼DIV塊。那麼我做錯了什麼？
Picture of page after resizing bottom row
爲什麼你有兩個DOCTYPE？此外，您在那裏的特定文檔類型會觸發怪癖模式，這是不推薦的;不同的瀏覽器有不同的怪癖。 –
因爲它在腳本中有一個複製過去的錯誤，所以我刪除了它。 – user3416126