Solved

how to resize iframe in javascript function

Posted on 2001-07-05
6
169 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
[X]
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
  • 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
Technology Partners: 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!

 
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

Industry Leaders: 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

Suggested Solutions

Title # Comments Views Activity
Can't get javascript video player button to work 10 23
arrays and buttons with user input 2 34
Table doesn't show the lines! 3 24
Check input text, Number 6 31
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

749 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