Solved

Dynamically Resized IFrames  collapse expand javascript jquery

Posted on 2010-09-04
4
949 Views
Last Modified: 2012-05-10
i have page with 5 iframe when i click in the first page within the firts  iframe
it will open the 2nd frame butw with diferent data (file attached)

i don't want to scror the iframe to view the data i want java scrpt that can  expand the iframe hight to the current page hight (Dynamically Resized IFrames)

admin.zip
0
Comment
Question by:palserv
[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
4 Comments
 
LVL 6

Expert Comment

by:youssefomar
ID: 33603245
if you need the iframes to be resized according to the current page size, then you don't need a javascript to do so... just use the frameset, define height percentage for each frame, and list the frames inside it ... like this:

<html>
<frameset rows="20%,20%,20%,20%,20%">
  <frame id="leftFrame" src="f1.htm">
  <frame id="rightFrame" src="f2.htm">
  <frame id="rightFrame" src="f3.htm">
  <frame id="rightFrame" src="f4.htm">
  <frame id="rightFrame" src="f5.htm">
</frameset>
</html>

Open in new window

0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 33606145
Define this function in the admin.htm script section:

function setFrameSize(theFrame){
    var theDoc = top.frames[theFrame.name].document;
    theFrame.style.height = (Math.max(
        Math.max(theDoc.body.scrollHeight, theDoc.documentElement.scrollHeight),
        Math.max(theDoc.body.offsetHeight, theDoc.documentElement.offsetHeight),
        Math.max(theDoc.body.clientHeight, theDoc.documentElement.clientHeight)
    ))+'px';
}  

call that function like this for the IFRAMEs that you want to resize:
<IFRAME id=Cat1 style="WIDTH: 100%; HEIGHT: 300px" name=Cat1  onLoad="setFrameSize(this)" marginWidth=0
marginHeight=0 src="admin_files/addCat.htm" frameBorder=1></IFRAME>

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 33606162
The body height script I have taken from here:
http://james.padolsey.com/javascript/get-document-height-cross-browser/

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 33699242
You are welcome.
0

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

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…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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