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
Solved

Resize iframe height dynamically

Posted on 2008-10-26
4
335 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
ID: 22806697
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
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?
0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22808581
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
ID: 22808674
I just placed image inside separate <tr> tag. Thanks for the solution.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

840 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