View Full Version : Resize/Repos iFrame onClick

06-24-2009, 02:40 AM
I have an iframe on my page which begins at 300x250. Onclick from an outside control (button), I have it resizing to 720x405. What I need it to do on that same click is change position on the page as well as resize (top, left.) Any way I can do this? Here's my resize script and the accoutrements with it...

<!---Begin head section here--->

<!---Begin Style Section Here--->
.fauxButton {
background: buttonface;
font: menu;
border: 1px outset white;
cursor: default;
padding-left: 6;
padding-right: 6;
padding-top: 2;
padding-bottom: 1;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-right: 1px solid buttonshadow;
border-bottom: 1px solid buttonshadow;
height: 20px;
<!---End Style Section Here--->

<script language="JavaScript">
function resizeIframe(iframeId, iframeHeight, iframeWidth)
if (iframeWidth>0)
if (iframeHeight>0)

<!---End head section here--->

<iframe name=video_iframe id=video_iframe frameborder="0" src="player.asp" scrolling=no allowtransparency="true" style="position:absolute; width:300px; height:250px; top:361px; left:720px;align:top; align:left; border:0px solid #FF0000; background-color:#FFFFFF; padding:0px 0 0; z-index:3;">

<a id="widenButton" class=fauxButton onclick="resizeIframe('video_iframe', 420, 720);document.getElementById('widenButton').style.display='none';document.getElementById('narrowButt on').style.display='inline';" style="display:inline;">Wide -></a>

<a id="narrowButton" class=fauxButton onclick="resizeIframe('video_iframe', 250, 300);document.getElementById('narrowButton').style.display='none';document.getElementById('widenButt on').style.display='inline';" style="display:none;"><- Narrow</a>


Thanks in advance, Miz Parker

06-24-2009, 05:56 AM
Never mind, got it.

01-24-2012, 02:48 AM
How did you resolve this? I'm trying to do almost the exact same thing