mizparker
06-24-2009, 01: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--->
<head>
<!---Begin Style Section Here--->
<style>
.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;
}
</style>
<!---End Style Section Here--->
<script language="JavaScript">
function resizeIframe(iframeId, iframeHeight, iframeWidth)
{
if (iframeWidth>0)
{
document.getElementById(iframeId).style.width=iframeWidth;
}
if (iframeHeight>0)
{
document.getElementById(iframeId).style.height=iframeHeight;
}
}
</script>
</head>
<!---End head section here--->
<body>
<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;">
</iframe>
<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>
</body>
Thanks in advance, Miz Parker
<!---Begin head section here--->
<head>
<!---Begin Style Section Here--->
<style>
.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;
}
</style>
<!---End Style Section Here--->
<script language="JavaScript">
function resizeIframe(iframeId, iframeHeight, iframeWidth)
{
if (iframeWidth>0)
{
document.getElementById(iframeId).style.width=iframeWidth;
}
if (iframeHeight>0)
{
document.getElementById(iframeId).style.height=iframeHeight;
}
}
</script>
</head>
<!---End head section here--->
<body>
<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;">
</iframe>
<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>
</body>
Thanks in advance, Miz Parker