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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.