PDA

View Full Version : can you shrink the viewing size of a page in a frame?



canudiggit
05-02-2005, 04:50 PM
I have a site designed with an iFrame.

One of the pages targeted to open in the iFrame is too big and adds horizontal and verticle scrollbars so you can view the page. But I need it to fit the page without a horizontal scrollbar.

I have no editing control of the sizing of this page that opens in the iFrame. It's a guestbook from a third party.

Can I do anything on my end to make the page fit the viewing area of my iFrame?

Any help would be greatly appreciated.

jscheuer1
05-03-2005, 09:03 AM
With IE you can. You will have to figure out the math to suit your situation, and provide restorative code for all other links that can target this iframe when it is reduced. For an iframe named 'fred' with a width of 450 and height of 500 this link:


<a href="toobig.htm" target="fred" onclick="if(document.all){document.all['fred'].style.zoom='50%';
document.all['fred'].style.width='900px';
document.all['fred'].style.height='1000px'}">smaller version of too big page</a>results in 'toobig.htm' being displayed in the iframe at half size, notice that the width and height are doubled to compensate, otherwise the iframe would shrink. Restorative code would look like this:


<a href="regular.htm" target="fred" onclick="if(document.all){document.all['fred'].style.zoom='100%';
document.all['fred'].style.width='450px';
document.all['fred'].style.height='500px'}">regular page</a>It would be best to test for the opera browser too and eliminate it, as I believe it does do document.all.

jscheuer1
05-03-2005, 11:17 AM
I played around with this idea a bit more and came up with this script for the head of your iframe page:


<script type="text/javascript">
function resize(name,pcnt,wdth,hgt){
opr6=document.all&&navigator.userAgent.indexOf("Opera")!=-1
if (document.all&&!opr6){
var shobj=document.all[name].style
shobj.zoom=pcnt+'%'
shobj.width=Math.floor(wdth/(pcnt/100))+'px'
shobj.height=Math.floor(hgt/(pcnt/100))+'px'
}
}
</script>Now things are much simpler when it comes to resizing, you can use the declared width and height of the iframe. Say the iframe's name is mainFrame and the width is 350, height is 525. Do this:


<a href="toobig.htm" target="mainFrame"
onClick="resize('mainFrame',75,350,525)">Click for small version of toobig.htm</a>This will shrink the page to 75% of its original size while adjusting the iframe's size to compensate. And instead of using restorative code on the links for the other pages, you can put this onload event in their body tags:


<body onload="if(window.parent.resize){window.parent.resize('mainFrame',100,350,525)}">That way, even if a someone uses their back button, the iframe will still be restored.