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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Resizing iframes on click

    Hi everyone,

    I run a streaming site and am looking to have the option on a chat room next to the stream. Not everyone likes having the chat facility so I'd like to make it optional.

    As the page loads I'd like the content to look like the diagram below with the stream (iframe1) taking up 95% of the page and the other 5% being taken up by an image which will say "open chat". The chat (iframe2) would have a width of 0%.


    Then when the "open chat" image is clicked I'd like the chat (iframe2) to become 35% and the stream (iframe1) to become 60%. If someone could make a nice sliding effect when the image is clicked that'd be even better. Here's a diagram to show what it'd look like with the resized iframes.


    If anyone can help me out and get this working to a good standard there will be a small paypal gift on offer .

    Cheers,
    Ben

  • #2
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well basically, you need a parent window that these frames are running in. In this parent you need the functions to make the (2) frame resize. The frames will always have access to the parent, so in essence it is the parent that is doing the resize.

    I will provide a basic example. As far as sliding and all, you can add that later.

    Code:
    <html>
    <head>
    <title>Untitled</title>
    <script>
    function changeIframeSize(){
         var frame1 = document.getElementById('frame1');
    		 var frame2 = document.getElementById('frame2');
    		 
    		 if(frame1.style.width>frame2.style.width){
    		 frame1.style.width="10%";
    		 frame2.style.width="90%";
    		 }else{
    		  frame1.style.width="90%";
    		 frame2.style.width="10%";
    		 }
    }
    
    
    
    </script>
    </head>
    <body>
    
    <iframe id="frame1" style="position:relative;float:left;top:0px;left:0px;width:90%;height:90%;border:solid red 1px;" src="blank" onclick="alert('hello')";></iframe>
    <iframe id="frame2" style="position:relative;float:left;top:0px;left:0px;width:10%;height:90%;border:solid blue 1px;" src="blank" onclick="alert('hello')"></iframe>
    <a href="#" onclick="javascript:changeIframeSize(); ">change sizes</a>
    </body>
    </html>

    Now, in order to fire this from inside the iframe content you will need to use a pointer to the parent windows function:

    Code:
    function fireParentToggle(){
    window.parent.parent.changeIframeSize();
    }
    Thats as bout as simple as it gets. Im sure someone can help expand from there.


  •  

    Posting Permissions

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