View Full Version : Resizing iframes on click

12-01-2009, 08:39 PM
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 ;).


12-01-2009, 09:59 PM
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.

function changeIframeSize(){
var frame1 = document.getElementById('frame1');
var frame2 = document.getElementById('frame2');



<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>

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

function fireParentToggle(){

Thats as bout as simple as it gets. Im sure someone can help expand from there. :)