?
Solved

Auto Resize IFRAME

Posted on 2009-02-23
15
Medium Priority
?
2,465 Views
Last Modified: 2012-05-06
I have searched around for the past hour, trying numerous different scripts but can't get any of them to work. I need to resize an iframe height automatically for the content that is shown in it.

What I have is a while statement which displays a number of iframes on a page under comments. This Iframe links to another page which runs a PHP query to get comments on comments (does that make sense?). This was easier (i thought) than implementing an ajax system which was a bit overboard for what i wanted. Anyway, I need the iframe to adjust its hight to show all of the comments on the Query page and currently it just cuts them off.




// page containing the iframe (snippet)
 
// Check if there are any rows in our table
if (mysql_num_rows($query) > 0) {
$qcnt=1;
// Print out the results (default 10 per pages)
while($row = mysql_fetch_array($query)) {
 
$FeedItem = $row['FeedItemID'];
 
echo '<p class="FeedText">'.$row['FeedbackText'].'</p>';
 
 
echo '<p class="UserDetails">'.$row['FeedItemID'].' | '.$row['StudentID'].' | '.$row['FeedbackDate'].' | <a id="displayText" onClick="toggle_visibility(\'Comments'. $qcnt .'\');return false;">'.$countC["CommCount"].' Comments</a> | <a onClick="showHideAddComment(this,\'CommentArea'. $qcnt .'\');return false;">+ Add New Comment</a></p>';
 
 
$query2 = mysql_query("SELECT Comment, StudentName, TimeSubmitted FROM FeedbackComment WHERE FeedItemID = {$row['FeedItemID']}");
 
 
$amount = mysql_query("SELECT COUNT(FeedItemID) AS CommCount FROM FeedbackComment WHERE FeedItemID = {$row['FeedItemID']}");
 
$countC = mysql_fetch_array($amount);
 
 
 
echo '<div id="Comments'. $qcnt .'" style="display:none;">';
echo '<div class="Comments">';
echo '<IFRAME SRC="CommentsIFrame.php?id='.$FeedItem.'" frameborder="0" scrolling="no"></IFRAME>';
echo '</div>';
echo '</div>';
 
 
 
$qcnt++;
echo '<p class="lineSpace"></p>';
}
 
 
// Iframe contents
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Feedback</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css" />
<link href="FeedResults.css" rel="stylesheet" type="text/css" />
 
 
 
</head>
<body style="width:520px">
<?php 
 
include ("admin/config.php");
 
$FeedID = $_GET['id'];
 
$query = mysql_query("SELECT Comment, StudentName, TimeSubmitted FROM FeedbackComment WHERE FeedItemID = '$FeedID'");
 
if (!$query) { 
  exit('<h1>Error retrieving FAQ<br />'. 
      'Error: ' . mysql_error() . '</p>'); 
} 
  
 
while($row = mysql_fetch_array($query)) {
 
echo '<p>'.$row['Comment'].' | '.$row['StudentName'].' | '.$row['TimeSubmitted'].'</p><br>';
}
 
echo '<div class="CommentArea" id="CommentArea">';
echo '<form action="newCommentProcess.php" method="post">';
echo '<textarea class="ResultTextArea" cols="30" rows="3" name="comment"></textarea><br>';
echo '<input name="feedID" type="hidden" value="'.$FeedID.'" />';
echo '<input name="pageNum" type="hidden" value="'.$page.'" />';
echo '<input name="surveyID" type="hidden" value="'.$surveyID.'" />';
echo '<input type="submit" value="Add comment" class="btnFeed" onclick="this.className=\'FeedbuttonClick\'" />';
echo '</form>';
echo '</div>';
 
 
?>
</body>
</html>

Open in new window

0
Comment
Question by:Chocula
  • 7
  • 6
  • 2
15 Comments
 
LVL 16

Expert Comment

by:hankknight
ID: 23714609
0
 
LVL 16

Expert Comment

by:hankknight
ID: 23714726
Or this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css" media="all">
</style>
 
<script type="text/javascript">
 
function growIfr(h) {
	var ifr = document.getElementById('ifr');
	if(ifr)ifr.style.height = ifr.offsetHeight+h+'px';
 
}
</script>
 
</head>
<body>
 
<h1>Demo</h1>
 
<iframe id="ifr" src="ifr.html" frameborder="0" scrolling="no" style="width: 500px; height: 100px; border: 1px solid red;"></iframe>
 
<h2>Footer</h2>
 
<a href="#" onclick="growIfr(15);return false">Expand Iframe 15px</a>
<a href="#" onclick="growIfr(55);return false">Expand Iframe 55px</a>
 
<script type="text/javascript">
<?php
 
while ($z++<10) {
i++;
}
 
echo 'growIfr('. $i .')';
?>
</script>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:Chocula
ID: 23714758
That works on the first one thank you. However there are more than one on the page. Is it possible to duplicate this to many iframes?
0
Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

 

Author Comment

by:Chocula
ID: 23714777
that was in response to the first answer. However it applies to the second suggestion too.
0
 
LVL 16

Accepted Solution

by:
hankknight earned 1500 total points
ID: 23714909
You can use either option with as many iframes as you wish.

Just make sure that each iframe has a different id.

For this option:
http://guymal.com/mycode/iframe_size/

Replace:
  'the_iframe'
with:
  'the_iframe1'

and then copy, paste the code all over again and change 'the_iframe1' to 'the_iframe2'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css" media="all">
</style>
 
<script type="text/javascript">
 
function growIfr(id,h) {
	var ifr = document.getElementById(id);
	if(ifr)ifr.style.height = ifr.offsetHeight+h+'px';
 
}
</script>
 
</head>
<body>
 
<h1>Demo</h1>
 
<iframe id="ifr1" src="" frameborder="0" scrolling="no" style="width: 500px; height: 100px; border: 1px solid red;"></iframe>
<br />
<iframe id="ifr2" src="" frameborder="0" scrolling="no" style="width: 500px; height: 100px; border: 1px solid red;"></iframe>
<br />
<iframe id="ifr3" src="" frameborder="0" scrolling="no" style="width: 500px; height: 100px; border: 1px solid red;"></iframe>
 
<h2>Footer</h2>
 
<a href="#" onclick="growIfr('ifr1',25);return false">Expand Iframe 1</a>
<a href="#" onclick="growIfr('ifr2',25);return false">Expand Iframe 2</a>
<a href="#" onclick="growIfr('ifr3',25);return false">Expand Iframe 3</a>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:Chocula
ID: 23714975
Sorry, what I mean is my iframe is generated in a PHP query (which loops). There is a function in PHP to add a count function next to an ID.

for example:

<iframe id="ifr'.Count.'">   // for the first would make ifr1, second ifr2 ect etc

I was just wondering if there was something similar which could be built into the first javascript.
0
 
LVL 16

Expert Comment

by:hankknight
ID: 23715087
echo '<IFRAME SRC="CommentsIFrame.php?id='.$FeedItem.'" id="ifr'.$ifr++.'" frameborder="0" scrolling="no"></IFRAME>';
0
 

Author Comment

by:Chocula
ID: 23715193
I can't get the code you posted to work so am having to use the other. Does anything need to be changed in here:

function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}

I tried adding what you suggested:

'<IFRAME width="500px" id="the_iframe'.$ifr++.'"
      onLoad="calcHeight();" SRC="CommentsIFrame.php?id='.$FeedItem.'" frameborder="0" scrolling="no" height="1"></IFRAME>';

This does increment so in the HTML i end up with id='the_iframe' id='the_iframe2' id='the_iframe3'
etc etc.

0
 

Author Comment

by:Chocula
ID: 23715229
**and the first solution fits my needs better as I just want the size auto increased
0
 

Author Comment

by:Chocula
ID: 23715330
edit: something does need to be changed as its not working. Is there an auto increment sort of function that can be added to the javascript? like the ++ code
0
 
LVL 16

Expert Comment

by:hankknight
ID: 23715445
I have not tested it but the code below should work (as long as there are less than 199 iframes).  Let me know if there is an error.
function calcHeight()
{
var ifr=-1;
 while (ifr++<199) {
  //find the height of the internal page
  var iframe = the_height=document.getElementById('the_iframe'+ifr);
  if (iframe) {
	iframe.the_height=document.getElementById('the_iframe'+ifr).contentWindow.document.body.scrollHeight;
	iframe.height=the_height;
	}
 }
}

Open in new window

0
 

Author Comment

by:Chocula
ID: 23715908
The height doesn't change anymore sadly.
not sure whats stopping it..


echo '<IFRAME width="500px" id="the_iframe'.$ifr++.'" 
	onLoad="calcHeight();" SRC="CommentsIFrame.php?id='.$FeedItem.'" frameborder="0" scrolling="no" height="1"></IFRAME>';

Open in new window

0
 
LVL 16

Expert Comment

by:hankknight
ID: 23719780
Change your JavaScript to this:

  function calcHeight(ifr)
  {
    var the_height=document.getElementById(ifr).contentWindow.document.body.scrollHeight;
    document.getElementById(ifr).height=the_height;
  }

And change your iframe code to this:

  $ifr++;
  echo '<IFRAME width="500px" id="ifr'.$ifr.'" onLoad="calcHeight(\'ifr'.$ifr.'\');"
      SRC="'. $_SERVER['PHP_SELF'] .'?ifr=1" frameborder="0" scrolling="no" height="1"></IFRAME>';

<?php
//// Tested and working!
if(!empty($_GET['ifr'])) {?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Item</title>
</head>
<body>
<h1>Item <?php echo rand(100,999); ?></h1><hr />
<p><?php while ($i++<rand(3,300)) echo 'Lorum adf das dad adsjk dash jkdash dkas hfdasjk hdkjs.  ';?></p>
</body>
</html>
<?php exit;}
else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feedback</title>
 
<script language="JavaScript">
<!--
function calcHeight(ifr)
{
  var the_height=document.getElementById(ifr).contentWindow.document.body.scrollHeight;
  document.getElementById(ifr).height=the_height;
}
//-->
</script>
 
</head>
 
<body style="width:520px">
 
<?php 
 
while($i++<10) {
  $ifr++;
  echo '<IFRAME width="500px" id="ifr'.$ifr.'" onLoad="calcHeight(\'ifr'.$ifr.'\');" 
	SRC="'. $_SERVER['PHP_SELF'] .'?ifr=1" frameborder="0" scrolling="no" height="1"></IFRAME>';
}
 
?>
 
</body>
</html>
<?php
}
?>

Open in new window

0
 
LVL 1

Expert Comment

by:FatzStallone
ID: 23766937
I find this one quite useful, rather than finding src height make iframe fit window and autoscroll.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="JavaScript">
<!--
 
function resize_iframe()
{
	document.getElementById("info").innerHTML='iframe offsetTop: <b> '+document.getElementById("glu").offsetTop+"</b><br>body.offsetHeight:<b>"+document.body.offsetHeight+"</b>";//display some information on the screen
 
	var height=window.innerWidth;//Firefox
	if (document.body.clientHeight)
	{
		height=document.body.clientHeight;//IE
	}
 
	document.getElementById("glu").style.height=parseInt(height-document.getElementById("glu").offsetTop-16)+"px";//resize the iframe according to the size of the window
}
window.onresize=resize_iframe; 
//-->
</script>
</HEAD>
<BODY>
<span id=info>
</span>
<iframe src="http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24169256.html?sfQueryTermInfo=1+10+ifram+resiz" scroll="auto" id='glu' width=100% onload='resize_iframe()'></iframe>
</BODY>
</HTML>

Open in new window

0
 
LVL 1

Expert Comment

by:FatzStallone
ID: 23767694
Actually can apply styling to iframe to achieve the same as above, I will explain more if you like. I know it's not what you want but useful none the less. IMO iframes ought to support layer inheritance or something of that nature.
0

Featured Post

NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

Question has a verified solution.

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

By, Vadim Tkachenko. In this article we’ll look at ClickHouse on its one year anniversary.
In this blog post, we’ll look at how using thread_statistics can cause high memory usage.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…
Suggested Courses
Course of the Month16 days, 1 hour left to enroll

850 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