Solved

how to resize iframe in javascript function

Posted on 2001-07-05
6
166 Views
Last Modified: 2012-05-04
Hallo guys, i have something problem. i have a webpage that have hypperlink and iframe.
i want each time i klik the hyperlink then the information show in iframe and i had already done this but i have some problem. each hyperlink has a diffrenet data include the size. i want each time the data changes then the iframe size is changes depent on data that show. can you help me?  
0
Comment
Question by:turboplus
  • 3
  • 2
6 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 6258685
Add the following to the pages being loaded in the iframe

right after the <body>:
<div id='p'>

and right before the </body>:
</div>

Now add the following scripting to the page being loadeD:

function document_onload()
{
   h = document.all["p"].offsetHeight;
   top.document.all["iframename"].height = h;
}
window.onload=document_onload;

regards,
CJ
0
 

Author Comment

by:turboplus
ID: 6258802
soory its doesn't work. i want to make clear this problem. i want to resize iframe in the "window" without reload / refresh that page. is it possible?  
0
 
LVL 3

Accepted Solution

by:
davlun20080 earned 50 total points
ID: 6260050
If you know the size you want the iframe to be, then yes you can resize the frame through script from the main page like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
     function resizeIframe(w, h)
     {
          document.all("bob").style.width = w
          document.all("bob").style.height = h
     }
</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<iframe id="bob" style="position:absolute;top:140; left:100; width:100; height:100"></iframe>
<input type="button" value="click to resize" onclick="resizeIframe(250, 250)">
</BODY>
</HTML>

If that data is contained in the page that is being loaded, you can use this script placed in each page you load into the iframe:
<script language="javascript">
    var width = 350
    var height = 350

    function resize()
    {
       top.resizeIframe(width, height)
    }
    window.onload = resize()
</script>
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 3

Expert Comment

by:davlun20080
ID: 6260078
Change the second script to:
<script language="javascript">
   var width = 350
   var height = 350

   function resizeit()
   {
      top.resizeIframe(width, height)
   }
   document.onload = resizeit()
</script>

Bad form to use words that have other meanings for function names (and i needed to correct that darn window.onload to document.onload)

davlun
0
 

Author Comment

by:turboplus
ID: 6263573
Thanks so much. You have give me so detail.
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 6266241
no problem, glad to help.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

773 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