Solved

Resize iframe height dynamically

Posted on 2008-10-26
4
328 Views
Last Modified: 2013-11-19
My website currently uses two iframes in the left menu navigation bar. Their heights are too large so I cannot fit anything else there but those two. I want them started out collapsed at a defined height (~ 250 px) when the page is loaded. Then I want to give user option to expand (by clicking on + sign). When + sign is clicked, iframe should expand. Then, + sign should change to - sign and use can click on it to collapse back to previous height. I have looked all the previous questions but did not find exact solution I need. Could you help? Suggested solution should work in IE, Netscape and Firefox browsers.

0
Comment
Question by:shwekhaw
  • 2
  • 2
4 Comments
 
LVL 7

Accepted Solution

by:
bluV11t earned 500 total points
Comment Utility
Hi!
I used to gif's for plus and minus but if you want to use links and + - link text let me know.
Try this:
//I the head tag:

<script language=javascript>

function fnToggle(framename, buttonname){

    if (document.getElementById(buttonname).name=='small'){

    //iframe closed

    document.getElementById(framename).style.height=400;

    document.getElementById(buttonname).src = 'plus.gif';

    document.getElementById(buttonname).name = 'big';

    }

    else{

    //iframe open

    document.getElementById(framename).style.height=250;

    document.getElementById(buttonname).src = 'minus.gif';

    document.getElementById(buttonname).name = 'small';

    }

}

</script>
 
 

//Iframes and buttons:
 

<IMG src="plus.gif" id="expButton" name="small" onclick="fnToggle('firstframe', 'expButton');"><br />

<iframe id="firstframe" height=250 width=200></iframe>
 

<IMG src="plus.gif" id="expButton2" name="small" onclick="fnToggle('secondframe', 'expButton2');"><br />

<iframe id="secondframe" height=250 width=200></iframe>

Open in new window

0
 

Author Comment

by:shwekhaw
Comment Utility
It is great. Just one thing. I tried to put the plus and minus sign image below iframe tage so they would appear at the bottom corner of the table box. Like this
<iframe id="secondframe" height=250 width=200></iframe>
<IMG src="plus.gif" id="expButton2" name="small" onclick="fnToggle('secondframe', 'expButton2');"><br />
 
 However, image does not appear. I think image is hidden behind the iframe. Is it possible to position image in such location?
0
 
LVL 7

Expert Comment

by:bluV11t
Comment Utility
Shouldn't be a problem but if the tables are styled with somthing like overflow:hidden that could easily hide the gif.  
0
 

Author Comment

by:shwekhaw
Comment Utility
I just placed image inside separate <tr> tag. Thanks for the solution.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to count occurrences of each item in an array.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now