Resize iframe height dynamically

Posted on 2008-10-26
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.

Question by:shwekhaw
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2

Accepted Solution

bluV11t earned 500 total points
ID: 22806697
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(buttonname).src = 'plus.gif';
    document.getElementById(buttonname).name = 'big';
    //iframe open
    document.getElementById(buttonname).src = 'minus.gif';
    document.getElementById(buttonname).name = 'small';
//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


Author Comment

ID: 22807923
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?

Expert Comment

ID: 22808581
Shouldn't be a problem but if the tables are styled with somthing like overflow:hidden that could easily hide the gif.  

Author Comment

ID: 22808674
I just placed image inside separate <tr> tag. Thanks for the solution.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

689 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