I am facing a challenge involving running an iframe on two separate pages within the same website, each with distinct CSS properties. The dilemma arises from the limited space available on my index.php page, where I aim to confine text within the iframe to a narrow width. Conversely, on another page (samples/index.php), there are no limitations in terms of width, allowing for a larger iframe display. If I were to employ the same "large" width setting on both pages and adjust the iframe to be narrower on index.php, the text would extend beyond the edge and become obscured (without utilizing scrollbars).
In index.php, the declaration is as follows:
<iframe id="iframe_1" src="samples/data-iframe.html" width="850px" scrolling="no"></iframe>
On samples/index.php, the width is set to be narrower:
<iframe id="iframe_2" src="data-iframe.html" width="620px" scrolling="no"></iframe>
The linked data-iframe.html file outlines the following CSS styling:
<style type="text/css">
#gallery { position: relative; width:500px; height:340px; margin:0; padding:0; }
#gallery li { display: block; }
p.blocktext {
margin-left: auto;
margin-right: auto;
width: 800px;
font-size:11px;
color: black;
background-color: white;
}
#everything {
border-style:double;
border-width:3px;
margin-left: auto;
margin-right: auto;
width: 830px;
background-color: white;
}
#everything hr { width:600px; }
</style>
This CSS snippet encapsulates all elements within a div with a width of 830 pixels, enclosed by a double-lined border, and restricts the text content to an area of 800px.
The actual content displayed via the iframe is sourced from an external JavaScript file - immediately subsequent to the CSS declarations:
<script src="samples/test-iframe.js"></script>
Within test-iframe.js, we find examples such as:
document.write("<center>");
document.write("<div id=\"everything\">");
document.write("<ul id=\"gallery\">");
document.write("<li><img src=\"photo1.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo2.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo3.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo4.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo5.jpg\" alt=\"\" /></li>");
document.write("</ul>");
document.write("<p class=\"blocktext\">Dummy text.</p><hr><p class=\"blocktext\">More Dummy text (Note the hr to separate the two portions of text)</p></div>");
document.write("</center>");
All images have been resized to fit within the large iframe on index.php and the smaller one on samples/index.php. It is possible that the textual content may be extensive - the provided text serves as a placeholder and is confined within a smaller area.
My attempt involves using the code below to determine the parent window - if it contains "samples", then display the full width of the text, otherwise use a restricted width:
var str = parent.location.href;
var nt = str.indexOf("samples");
var a = document.getElementById("blocktext");
var b = document.getElementById("everything");
if (nt>0) // 'samples' found
{
a.style.width = "800px";
b.style.width = "830px";
b.style.hr = "600px";
}
else // 'samples' not found - utilize narrower dimensions
{
a.style.width = "500px";
b.style.width = "600px";
b.style.hr = "400px";
}
Despite properly determining the parent window through testing, the CSS adjustments do not seem to take effect. Upon experimenting with additional code within the if blocks, it appears that while the script correctly identifies the parent window, the widths and hr properties remain unchanged. Can someone deduce what might be causing this discrepancy?