Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resize/Repos iFrame onClick

    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

  • #2
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind, got it.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How did you resolve this? I'm trying to do almost the exact same thing


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •