Re Позиционирование iframes с помощью hide/show

Question

У меня есть текущий код, который скрывает/показывает iframe (внешние страницы, отображающие текстовые столбцы через cgi - отображаются слева направо) с помощью кнопок в верхней части страницы. В настоящий момент iframe позиционируются с использованием абсолютных значений, но я бы хотел, чтобы они «переупорядочивали» и меняли местоположение, в зависимости от того, какие скрыты или показаны. EX: если показаны только 2 фрейма, они уменьшат занятое левое пространство. Это важно, поскольку я буду добавлять больше контента, чем может поместиться на странице за раз. (Кроме того, я пытаюсь изменить Jscript, чтобы скрыть все по умолчанию, вместо того, чтобы показать на странице загрузки)

function myFunctionui() { 
 

 
     var x = document.getElementById('ui'); 
 

 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctiontic() { 
 
     var x = document.getElementById('tic'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctionlab() { 
 
     var x = document.getElementById('lab'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctionzone1_4() { 
 
     var x = document.getElementById('zone1_4'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctionzone5() { 
 
     var x = document.getElementById('zone5'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctionslas() { 
 
     var x = document.getElementById('slas'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctionhiks() { 
 
     var x = document.getElementById('hiks'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    }

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#tic { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 60px; 
 
} 
 
#lab { 
 
    position: absolute; 
 
    left: 220; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 60px; 
 
} 
 
#zone1_4 { 
 
    position: absolute; 
 
    left: 420; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 60px; 
 
} 
 
#zone5 { 
 
    position: absolute; 
 
    left: 630; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 60px; 
 
} 
 
#slas { 
 
    position: absolute; 
 
    left: 840; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 60px; 
 
} 
 
#hiks { 
 
    position: absolute; 
 
    left: 1050; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 60px; 
 
} 
 
iframe { 
 
    overflow: scroll; 
 
    height: 100%; 
 
    seamless; 
 
    border: 0; 
 
}

<button onclick="myFunctionui()">^</button> 
 

 
<div id="ui"> 
 
    <button onclick="myFunctiontic()">TICs</button> 
 
    <button onclick="myFunctionlab()">LABs</button> 
 
    <button onclick="myFunctionzone1_4()">ZONE 1-4</button> 
 
    <button onclick="myFunctionzone5()">ZONE 5</button> 
 
    <button onclick="myFunctionslas()">SLAS</button> 
 
    <button onclick="myFunctionhiks()">HIKS</button> 
 
</div> 
 

 

 
<div id="tic"> 
 
    <iframe src="https://itcrops.itap.purdue.edu/opstools/ticstatus/ticstatus.cgi" width="130" frameborder="0"></iframe> 
 
</div> 
 
<div id="lab"> 
 
    <iframe src="https://itcrops.itap.purdue.edu/opstools/labstatus/labstatus.cgi" width="130" frameborder="0"></iframe> 
 
</div> 
 
<div id="zone1_4"> 
 
    <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations1_4.cgi" width="250" frameborder="0"></iframe> 
 
</div> 
 
<div id="zone5"> 
 
    <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations5.cgi" width="250" frameborder="0"></iframe> 
 
</div> 
 
<div id="slas"> 
 
    <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/slastations.cgi" width="250" frameborder="0"></iframe> 
 
</div> 
 
<div id="hiks"> 
 

 
    <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/hiksstations.cgi" width="250" frameborder="0"></iframe> 
 

 
</div>

Answer 1

Я понял это.

Прежде всего, избавитесь от идеи position:absolute, потому что есть намного более простой способ исправить это.

Кроме того, не обертывайте фреймы в div. Divs являются блочными элементами, то есть они намеренно ломают строку, но iframe являются встроенными, что означает, что они прерывают строки только тогда, когда линия достигает конца экрана, как вы можете видеть в словах этого ответа. (Если вы хотите, однако, вы можете обернуть ВСЕ фреймы в div.)

Я рекомендую вам избавиться от overflow: hidden для html и body, чтобы маленькие экраны могли видеть, что вы хотите.

Единственный CSS, который вам нужен, это для iframe: white-space: nowrap так, чтобы линии никогда не ломались и #iframeContainer {display: none}, потому что вы хотели, чтобы все это было так же, как и для его дочерних iframes.

У вас возникла проблема с JavaScript, который можно легко устранить. Как я упоминал ранее, iframe являются встроенными. Однако в ваших функциях говорится, что они блокируются, если кнопка нажата, когда ее дисплей «нет». Чтобы исправить это, просто измените «block» на «inline». (Примечание: Я сохранил блок «ui», потому что вы просто хотели иметь iframe бок о бок.) Кроме того, чтобы исправить ошибку, с которой я столкнулся, сделайте оператор if на основе отображения «inline» вместо «нет». Например, напишите if (x.style.display === 'inline') {x.style.display = 'none';} else {x.style.display = 'inline'}; вместо if (x.style.display === 'none') {x.style.display = 'inline';} else {x.style.display = 'none';}. Кроме того, чтобы исправить ошибку с отсутствием отображения при загрузке, просто добавьте document.getElementById("iframeContainer").style.display = "block"; к каждой функции OUTSIDE в инструкции if else.

Посмотрите на фрагмент, чтобы четко видеть, что я имею в виду. (Это работает!)

var frameContainer = document.getElementById("iframeContainer"); 
 
function myFunctionui() { 
 

 
     var x = document.getElementById('ui'); 
 

 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 

 
    function myFunctiontic() { 
 
     var x = document.getElementById('tic'); 
 
     if (x.style.display === 'inline') { 
 
     x.style.display = 'none'; 
 
     } else { 
 
     x.style.display = 'inline'; 
 
     } 
 
     frameContainer.style.display = "block"; 
 
    } 
 

 
    function myFunctionlab() { 
 
     var x = document.getElementById('lab'); 
 
     if (x.style.display === 'inline') { 
 
     x.style.display = 'none'; 
 
     } else { 
 
     x.style.display = 'inline'; 
 
     } 
 
     frameContainer.style.display = "block"; 
 
    } 
 

 
    function myFunctionzone1_4() { 
 
     var x = document.getElementById('zone1_4'); 
 
     if (x.style.display === 'inline') { 
 
     x.style.display = 'none'; 
 
     } else { 
 
     x.style.display = 'inline'; 
 
     } 
 
     frameContainer.style.display = "block"; 
 
    } 
 

 
    function myFunctionzone5() { 
 
     var x = document.getElementById('zone5'); 
 
     if (x.style.display === 'inline') { 
 
     x.style.display = 'none'; 
 
     } else { 
 
     x.style.display = 'inline'; 
 
     } 
 
     frameContainer.style.display = "block"; 
 
    } 
 

 
    function myFunctionslas() { 
 
     var x = document.getElementById('slas'); 
 
     if (x.style.display === 'inline') { 
 
     x.style.display = 'none'; 
 
     } else { 
 
     x.style.display = 'inline'; 
 
     } 
 
     frameContainer.style.display = "block"; 
 
    } 
 

 
    function myFunctionhiks() { 
 
     var x = document.getElementById('hiks'); 
 
     if (x.style.display === 'inline') { 
 
     x.style.display = 'none'; 
 
     } else { 
 
     x.style.display = 'inline'; 
 
     } 
 
     frameContainer.style.display = "block"; 
 
    }

#iframeContainer {white-space: nowrap; display: none;} 
 
#iframeContainer iframe {display: none;}

<button onclick="myFunctionui()">^</button> 
 

 
<div id="ui"> 
 
    <button onclick="myFunctiontic()">TICs</button> 
 
    <button onclick="myFunctionlab()">LABs</button> 
 
    <button onclick="myFunctionzone1_4()">ZONE 1-4</button> 
 
    <button onclick="myFunctionzone5()">ZONE 5</button> 
 
    <button onclick="myFunctionslas()">SLAS</button> 
 
    <button onclick="myFunctionhiks()">HIKS</button> 
 
</div> 
 

 
<div id="iframeContainer"> 
 

 
    <iframe id="tic" src="https://itcrops.itap.purdue.edu/opstools/ticstatus/ticstatus.cgi" width="130" frameborder="0"></iframe> 
 
    <iframe id="lab" src="https://itcrops.itap.purdue.edu/opstools/labstatus/labstatus.cgi" width="130" frameborder="0"></iframe> 
 
    <iframe id="zone1_4" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations1_4.cgi" width="250" frameborder="0"></iframe> 
 
    <iframe id="zone5" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations5.cgi" width="250" frameborder="0"></iframe> 
 
    <iframe id="slas" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/slastations.cgi" width="250" frameborder="0"></iframe> 
 
    <iframe id="hiks" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/hiksstations.cgi" width="250" frameborder="0"></iframe> 
 

 
</div>