Need help with iframe resizing

[321steven123]

I was wondering if anyone had java script to resize iframes (the physical size) dynamically by detecting the the browser size.Any help will be much appreciated, thank you

[Nakor]

Get the frame size with this

// This for non-IEmyWidth = window.innerWidth;myHeight = window.innerHeight;// This for IE6myWidth = document.documentElement.clientWidth;myHeight = document.documentElement.clientHeight;// This for IE4myWidth = document.body.clientWidth;myHeight = document.body.clientHeight;

And then you can use those variables to resize the iframe. Resize it with something like this.

document.getElementById('iframe').height=myHeight-400;document.getElementById('iframe').width=myWidth-400;

[321steven123]

Thank you for the fast reply,Do you know if there is any property that occurs when the client changes the browser size, so I can update the iframe size? Or should I use a loop to keep refreshing to get the browser size data to update the iframe size?(sorry i am new at this)Thank you so much for the help!-Steven

[321steven123]

I've been also thinking,if there is a property (or shall i say function) that i can use (like when the user maximizes the screen, or change the size)then i can just define the frame size again with percentages with<iframe width=40% height=%60> </iframe>What is your suggestion?

[Nakor]

I would not recommend continuous looping it over and over again, as it may cause slowdown on some systems. You could it re-execute the script every so often, however this may cause some ruccus on your site if someone is browsing, resizes their browser window, and then seemingly randomly has the iframe they are looking at resize. I don't know if there is currently any way to detect a browser resize, but some of the threads I have read on other forums make it seem as if there isn't. Another option would be to add code to keep the page certain dimensions, however most people don't like this, and so I don't recommend that either.

[Nakor]

If you use percentages it will change the size based off the size of the browser window. This is actually on quite a bit of sites, and you can see objects changing size and trying to move to stay in the browser. Give it a try but if you do you may have to expect that at some point your content will become distorted because it has been resized.

[321steven123]

ah!thank you for the information,so if i use percentages, the frames resize automatically when the browser size changes?if so, couldnt we make the iframe size (height for example) change passively by <iframe width=400 height=%100-150> </iframe>%100-150 (saying my menu bar is 150 pixles tall)

[Nakor]

I'm not sure if I'm completely understanding you however when you are setting percentages you can't also specify a pixel amount. You would position it and then set the height to something like 75% and it would resize the height when you changed the height of the page, but you can't ever make it look exactly how you want because the size will be unique based off of how big each person sets their browser window. If you want them to enter your site and have it look a certain way you can change the size of their browser window and then they can resize it if they want and the percentages will take over.

[raimo]

I'm not sure if I'm completely understanding you however when you are setting percentages you can't also specify a pixel amount. You would position it and then set the height to something like 75% and it would resize the height when you changed the height of the page, but you can't ever make it look exactly how you want because the size will be unique based off of how big each person sets their browser window. If you want them to enter your site and have it look a certain way you can change the size of their browser window and then they can resize it if they want and the percentages will take over.

<{POST_SNAPBACK}>

Look CSS max-width, min-width, max-height and min-height.I'd just tested those yesterday with Opera 9 (and Firefox 1.5.0.2) .. works fine with both.edit:

<style type="text/css">#ifr1{width: 100%;height: 50%;max-width: 800px;min-width: 500px;min-height: 150px;}</style><iframe id="ifr1"></iframe>

iframe is "scaling" to 100% only if width of it is between 500px and 800px.And height will stay in 50% until 150px height limit comes, that point it will stop scaling. Cool, I think? (but quessing here .. it won't work with MSIE?)

[321steven123]

can you use a variable for percentage value?for example,we want the height to be the height of the browser minus the 150pixles (for menu)for height, can we call the browser height, subtract 150 pixles then divide that number by the browser height and multiply by 100.after all that, we can declare the height of the iframe = (%+VariableThatNumber)is this something that is possible?

[321steven123]

ttt

[Nakor]

<script type="text/javascript">function getDocHeight(doc) {  var docHt = 0, sh, oh;  if (doc.height) docHt = doc.height;  else if (doc.body) {    if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;    if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;    if (sh && oh) docHt = Math.max(sh, oh);  }  return docHt;}function setIframeHeight(iframeName) {  var iframeWin = window.frames[iframeName];  var iframeEl = document.getElementById?   document.getElementById(iframeName): document.all? document.all[iframeName]: null;  if ( iframeEl && iframeWin ) {    // helps resize (for some) if new doc shorter than previous    iframeEl.style.height = "auto";     var docHt = getDocHeight(iframeWin.document);    // need to add to height to be sure it will all show    if (docHt) iframeEl.style.height = docHt - 150 + "px";  }}function loadIframe(iframeName, url) {  if ( window.frames[iframeName] ) {    window.frames[iframeName].location = url;    return false;  }  else return true;}</script>

That goes in the head of the doc, then this is put in every link, like this example:

<a href="doc.html" onclick="return loadIframe('main', this.href)">

The onclick reloads the document and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:

<script type="text/javascript">function goSetHeight() {  if (parent == window) return;  // arg: id of iframe element this doc is to be loaded into  else parent.setIframeHeight('main');}</script>

That's inside the head of the document then this is added to the body like this:

<body onload="goSetHeight()">

[321steven123]

Cant get it to workI found out percentages wont work because they try to overlap and one gets pushed to the bottom,any other ideas?i need the iframes to be resized by the open window size (not the content size)pelase help me outthank you!