Ok, So what I need is to create an iframe with a button, that when clicked will resize the iframe. From smaller to larger. The problem is that the iFrame is relative to specific location on a page. I have the code for the iFrame, and the code to resize the an iframe...But how can I get them to work together? (Code Below) Thanks!!!!! ----Code for iFrame---- <style type="text/css"> #outerdiv { width:470px; height:220px; overflow:hidden; position:relative; } #inneriframe { position:absolute; top:-381px; left:-611px; width:1280px; height:1200px; } </style> </head> <body> <div id='outerdiv'> <iframe src="http://www.google.com" id='inneriframe' scrolling=yes></iframe> </div> ----Code that will resize an iframe---- <head> <script language="JavaScript"> function resize() { document.getElementById("brad").style.width = "100px"; document.getElementById("brad").style.height = "100px"; } </script> </head> <body> This is the main window.<p> <iframe src="http://www.google.com" width="500px" height="200px" id="brad"></iframe><p> <a href="javascript:resize();">Click here to resize to 100px by 100px</a>
actually I solved it on my own...here is my completed code if anyone is interested: <html> <head> <script language="JavaScript"> function resize() { document.getElementById("outerdiv").style.width = "1280px"; document.getElementById("outerdiv").style.height = "1200px"; document.getElementById("inneriframe").style.top = "-0px"; document.getElementById("inneriframe").style.top= "-0px"; } </script> </head> <body> This is the main window.<p> <style type="text/css"> #outerdiv { width:470px; height:220px; overflow:hidden; position:relative; } #inneriframe { position:absolute; top:-381px; left:-611px; width:1280px; height:1200px; } </style> </head> <body> <div id='outerdiv'> <iframe src="http://google.com" id='inneriframe' scrolling=yes></iframe> </div> <a href="javascript:resize();">Click here to resize to 100px by 100px</a> </body> </html>