javascript - 无法使用 jquery-ui.js 通过鼠标调整分层 iframe 的大小

标签 javascript html css jquery-ui iframe

我一直在尝试升级调整 1 个 iframe 大小的代码示例，但它是针对一组分层的 iframe 进行的。基本上我有 3 行 div 表/表单元格，其中第 2 行和第 3 行有两个或多个单元格，每个单元格中有 2 个 iframe(标题和内容)。请参阅下面的 html 代码和样式表。

问题是我正在尝试调整行的大小，但 iframe 比 div 表和 div 单元格 block 大。我不确定为什么会这样。我无法在一个 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:
}

向下拉伸(stretch)第二行后，iframe 现在比 div block 长。那我做错了什么？

Picture of page after resizing bottom row

最佳答案

嗯.. 您是否尝试将 Iframe 设置为 position: relative 以便它们始终位于父维度内？

关于javascript - 无法使用 jquery-ui.js 通过鼠标调整分层 iframe 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34444349/

上一篇：html - 让页面上的 div 元素 'float'

下一篇：html - 为什么显示:table put a gap between absolutely positioned div tags and can it be fixed?

相关文章：

javascript - 想设计与值相关联的滚动条

javascript - 将变量传递到回调函数中，但结果为 'undefined'

javascript - Navigator 和 AsyncStorage react native

html - 无法更改选项卡的高度，Angular 6 中的颜色

html - 使用悬停 div 缩放错误

javascript - 按下 Tab 键时可编辑表格内容

javascript - 在 JavaScript 中使用父容器包装多个元素的最简单方法

javascript - 使用其 url 生成 youtube 视频的嵌入代码

php - 如何在wordpress中搜索和打印数据库？

javascript - .slideDown() 下面的内容跳转(不流畅)

©2024 IT工具网  联系我们