Hi,
I have a web page. In that there is a toggle button to show or hide advanced search options. Below that there is a "IFrame A"(Table).
IFrame A conatins "IFrame B" (Table Contents). Based on the toggle switch status, i want to update "IFrame A" size without refreshing the "IFrame B".
Is it possible to do so ? Can you give me some example or point to some tutorial .
Thanks
Jump to PostNest your frames using this format, this the same as with my last posted code:
document.getElementById("frameA").document.getElementById("frameB").document.getElementById("frameC").style.backgroundColor = "black";
Nest your frames using this format, this the same as with my last posted code:
document.getElementById("frameA").document.getElementById("frameB").document.getElementById("frameC").style.backgroundColor = "black";You can target specific frames or frame element's using frame ids. Just apply different method's ( window.frames['frameA'].document.all.yourElem ) in your script to make it cross-platform.
Here's a more complex Demo.
First you will need to nest 2 documents using iframes. test.html (iframe)-->frameA.html (iframe)-->frameB.html and apply this codes in the test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
<!--
div { border : none; margin : 0 auto; padding : 1em; }
iframe {
background-color: transparent;
border : 2px solid #000;
display : block;
margin : 0 auto;
height: auto;
text-align : left;
width : 98%; }
-->
</style>
<script type="text/javascript">
<!--
var resizeFrame, frameA;
resizeFrame = function() {
frameA = (( document.getElementById ) ? parent.document.getElementById("frameA").contentWindow.document.getElementById("frameB") : (( window.frames ) ? window.frames["frameA"].frames["frameB"] : document.all.frameA.document.all.frameB ));
try {
frameA.setAttribute( "style", "background-color : #365d95; width : 50%; height : 200px;" );
} catch( e ) {
frameA.style.width = "50%";
frameA.style.backgroundColor = "#365d95";
}
};
// -->
</script>
</head>
<body>
<!-- IFRAME -->
<div>main</div>
<div>
<iframe id="frameA" name="frameA" src="frameA.html" scrolling="no"></iframe>
</div>
<div><button id="btn" name="btn" onclick="resizeFrame();">Resize FrameA</button></div>
</body>
</html>Thanks for your help. I 'm able to sort out my problem after seeing your example.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.