• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4682
  • Last Modified:

iframe auto sizing to browser window size

i have a web page with 2 iframes in it side by side

the right iframe must be a specidied width

the left iframe i want it to take up the rest of the window width no matter what they resize it to or what resolution that they run

how do i do this please ?
0
sanctify
Asked:
sanctify
1 Solution
 
Lee W, MVPTechnology and Business Process AdvisorCommented:
I'd put them in tables and specify the table column and row widths and heights.

<table>
<tr height=640>
    <td width=300><iframe></iframe></td>
    <td width=*><iframe></iframe></td>
</tr>
</table>

I haven't tried it, but I think it will work.
0
 
sanctifyAuthor Commented:
doestn work

the iframe needs to be individually variably sized as well as the table dimensions

using the wilcard variable in conjunction with specified iframe width doesnt work for me inside or outside of tables

again .. the right iframe needs to be a specified width and the left iframe needs to be the res of the space in the browser

thank you for trying though
0
 
nurbekCommented:
try

<table width="100%" border="1">
<tr>
    <td width="100%"><iframe width="100%" src="file1.asp"></iframe></td>
    <td width="200px"><iframe width="200px" src="file2.asp"></iframe></td>
</tr>
</table>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
dakydCommented:
How about using a bit of javascript to resize your iframes?  It gives you more flexibility than using tables, and should make your maintenance a bit easier.  I assumed the right frame was 200px, but you can change the values accordingly.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#container iframe {
  float: left;
  padding: 0;
  margin: 0;
}

#right {
  width: 200px;
}
</style>
<script type="text/javascript">
window.onload = myResize;
window.onresize = myResize;

function myResize()
{
  var totalWidth;
  if (document.documentElement && document.documentElement.clientWidth)
    totalWidth = document.documentElement.clientWidth;
  else if (document.body)
    totalWidth = document.body.clientWidth;

  // subtract a bit more than 200 to account for borders and padding
  document.getElementById("left").style.width = (totalWidth - 225) + "px";
}
</script>
</head>

<body>
  <div id="container">
    <iframe src="left.html" id="left"></iframe>
    <iframe src="right.html" id="right"></iframe>
  </div>
</body>
</html>
0
 
Wayne BarronCommented:
sanctify:

  If you have a demo code made up of what you are trying to do.
i might be able to assist you with it.
Or a page that shows what it is that you are trying to accomplish.

Do you want the "IFrame" to take up the Entire IE Window?
Is that what you are trying to accomplish?

Carrzkiss
0
 
sanctifyAuthor Commented:
nurbek and daykid,

will try your suggestions out tonight ..thanks for your efforts, they are greatly appreciated


carrzkiss,

as previously stated, 2 frames side by side on a web page .. the RIGHT FRAME must be a SPECIFIED WIDTH in pixels (graphic skin for an embedded object file)

LEFT FRAME msut take up the rest of the page width

2 side by side iframes
0
 
sanctifyAuthor Commented:
dakyd

simply put ... YOU ROCK !

thanks alot !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

what can i change or add here to set 100% height on each frame ?
0
 
sanctifyAuthor Commented:
oh wait .. i get a script error

Line:    23
Char:   3
Error:  Invalid Arguement
Code:  0

thanks !
0
 
sanctifyAuthor Commented:
ok it was a copy and paste error ... forget the error
0
 
sanctifyAuthor Commented:
so sorry, nurbek, yours does work, but dakyd's script allows me to do so much more with my layout and formatting .

nice works and thank you all
0
 
dakydCommented:
>> what can i change or add here to set 100% height on each frame ?
You have to add a little more scripting in order to do this, a style of height=100% doesn't mean much.  Give this a shot.  Hope it helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#container iframe {
  float: left;
  padding: 0;
  margin: 0;
}

#right {
  width: 200px;
}
</style>
<script type="text/javascript">
window.onload = myResize;
window.onresize = myResize;

function myResize()
{
  var totalWidth;
  if (document.documentElement && document.documentElement.clientWidth)
    totalWidth = document.documentElement.clientWidth;
  else if (document.body)
    totalWidth = document.body.clientWidth;

  var totalHeight;
  if (self.innerHeight)
    totalHeight = self.innerHeight;
  else if (document.documentElement && document.documentElement.clientHeight)
    totalHeight = document.documentElement.clientHeight;
  else if (document.body)
    totalHeight = document.body.clientHeight;

  // subtract a bit more than 200 to account for borders and padding
  var leftFrame = document.getElementById("left");
  var rightFrame = document.getElementById("right");
  leftFrame.style.width = (totalWidth - 225) + "px";
  leftFrame.style.height = totalHeight + "px";
  rightFrame.style.height = totalHeight + "px";
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
  <div id="container">
    <iframe src="left.html" id="left"></iframe>
    <iframe src="right.html" id="right"></iframe>
  </div>
</body>
</html>
0
 
sanctifyAuthor Commented:
yea this rocks thanks alot !
0
 
dakydCommented:
You're welcome, glad to hear you got what you wanted.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Tackle projects and never again get stuck behind a technical roadblock.
Join Now