Link to home
Create AccountLog in
Avatar of trower
trowerFlag for United Kingdom of Great Britain and Northern Ireland

asked on

iframe width controls printed font size??

Hi all,

We have a site that uses an iframe to display content whilst leaving the top and left hand menus in place. This all works fine on the screen.

The problem we are having is when things are printed. So far I have established that the width of the iframe is part of the problem.

For example if I set the width of the iframe to 800 the text is printed out in what looks to be about 6pt whereas if I set the width of the iframe to 500 the text is printed out in what looks like about 9pt.

Does anyone know why this is happening and how I can fix it so that I can keep my iframe at 800 wide but print out displaying about 10pt text ?

Many thanks
Paul
Avatar of trower
trower
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

I am thinking about trying to create a print css statement for the pages loaded into the iframe. In the onload of the iframe I can call a function and I have managed to control the backgound color so I know it is working. But how can I tweak this to write a CSS statement to the page loaded into the Iframe ? Attached are a couple of code snippets that I have found.

Thanks
Paul
function populateIframe() {
//var ifrm = document.getElementById('mimihome');
//ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
//ifrm.document.open();
//ifrm.document.write('Hello World!');
//ifrm.document.close();
var oIframe = document.getElementById('mimihome');
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.body.style.backgroundColor = "#00f";
return true;
}

Open in new window

Avatar of trower

ASKER

A variation on a theme here but is it possible to set the width of the Iframe for printing purposes ? If I can set the Iframe width for printing them IE will automatically use a larger print size.

Thanks
Paul
Avatar of Michel Plungjan
You mean

<style media="print">
iframe { width:500px}
</style>
Avatar of trower

ASKER

mplungian

I have been on a course for a few days so apologies for not coming back to you sooner.

I agree that what you have written will work but the part that I am stuck on is how to get it 'into' the document that is in the Iframe from the main frame?

As you can see from my code above line 10 (oDoc.body.style.backgroundColor = "#00f";) changes the background colour. Where and how would I write your code so that the iframe printed out with a width of 500?

Does that make sense
<html>
<head>
<style media="print">
iframe { width:500px}
</style>
<script>
function populateIframe() {
//var ifrm = document.getElementById('mimihome');
//ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
//ifrm.document.open();
//ifrm.document.write('Hello World!');
//ifrm.document.close();
var oIframe = document.getElementById('mimihome');
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.body.style.backgroundColor = "#00f";
return true;
}
</script>
</head>
.
.
.
<iframe...
Avatar of trower

ASKER

Not quite .... a little background knowledge might help explain things.

We have a site with fixed top and l-h side navigation the main part of the page is an iframe that i load content into.

However when we print the iframe it comes out small becuase it's frame width is fixed to 800 for viewing purposes.

What i am trying to do is write a css statement to whatever page is called into the iframe.
So far I have found a way to affect the iframe (by calling the function populateIframe in the iframes onload event).

To demonstrate that I can affect the iframe I have placed the line of code oDoc.body.style.backgroundColor = "#00f"; into the agent and this works.

What I want to be able to do though is write your css statement to the right place (the head section I guess but I don't know) in the iframes document so that when it is printed it will use the 'print' css to control how it prints.

I hope this has helped to clarify things.

Cheers
Paul

tells the code to replace the background color of the iframes document because at that point it is writing to the ifrmae documents
Sounds a bit strange.

If the iframe content prints at 800, and it is not the parent page that gives that restriction, then you need to tell me what is.

Is it perhaps a table or div in the html in the iframe?

then try this code (not tested) from
http://www.webdeveloper.com/forum/archive/index.php/t-130717.html



function populateIframe() {
var oIframe = document.getElementById('mimihome');
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.body.style.backgroundColor = "#00f";
var str = '#containerID { width:800px }'; // ID of the container you want to change
var pa= oDoc.getElementsByTagName('head')[0] ;
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'print';
if(el.styleSheet) el.styleSheet.cssText= str;// IE method
else el.appendChild(document.createTextNode(str));// others
pa.appendChild(el);
}

Open in new window

Avatar of trower

ASKER

that looks perfect - i will try it out over the weekend

thanks
paul
Avatar of trower

ASKER

mplungian,

thanks again but I am not quite there!! perhaps I need to explain some more.

it is the onload event of the iframe that sets it's width to 800 and this is fine for viewing on the screen.

however when it is printed from IE it the text comes out very small. (note I only need to develop this for IE)

to combat this I played with the width of the iframe and found that if i set the width to 500 the text printed out readable.

my overall aim is to get the text to print out bigger when the pages are printed. quite how i don't mind :-)

i have taken your code and tried to tweak it for my situation but I can'y get it to work, you might notice some lines in there to do with background color's - these are just so that I can see if it is working or not.

any more help is gratefully recieved.
thanks
paul
function iframeCSS() {
top.frames[0].document.body.style.backgroundColor = "#000";
var str= "#mimihome{width: 500px; background-color: #000;}"
var pa= top.frames[0].document.getElementsByTagName('head')[0];
var el= top.frames[0].document.createElement('style');
el.type= 'text/css';
el.media= 'print';
if(el.styleSheet) el.styleSheet.cssText= str;                               // IE method
else el.appendChild(document.createTextNode(str));           // others
pa.appendChild(el);
}

Open in new window

Works for me in IE6
content:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <style>
#mimihome  { width:700px; border:4px solid red }
  </style>
  </head>
  <body>
<div id="mimihome" >Hello</div>
  </body>
</html>
 
 
parent:
 
<script>
function iframeCSS() {
top.frames[0].document.body.style.backgroundColor = "#FFF";
var str= "#mimihome{ width:50px; background-color: #000;}"
var pa= top.frames[0].document.getElementsByTagName('head')[0];
var el= top.frames[0].document.createElement('style');
el.type= 'text/css';
el.media= 'print';
if(el.styleSheet) el.styleSheet.cssText= str;                               // IE method
else el.appendChild(document.createTextNode(str));           // others
pa.appendChild(el);
}
</script>
<iframe width="700" onLoad="iframeCSS()" src="testiframecontent.html"></iframe>

Open in new window

testiframe-screen.jpg
testiframe-print.jpg
Hmm, I'll try to upload again
testiframe-print.jpg
Avatar of trower

ASKER

thanks for the quick response.

in order for the 'parent' code to work does it rely on any of the 'content' code ? I am thinking about the style section in particular as that isn't there for me.

also I am on IE7 could that be significant ?

my iframe is created using this code:
<IFRAME onLoad="iFrameHeight('mimihome')"; ID="mimihome" NAME="mimihome" SRC="/mimihome.nsf/Finline?OpenForm" marginHeight=10 marginWidth=10 vSpace=0 hSpace=0 frameBorder=no scrolling=auto></IFRAME>

here's hoping you can spot what is wrong

thanks once again
paul

yes.

I am resizing a DIV in the iframe, not the iframe itself.

You are accessing the document of the iframe, hence you are trying to resize some element id'd mimihome in the iframe.
I will try resizing the iframe instead
Here - however that is plain silly since it is the same as having

<style media="print">
#mimihome{ width:50px; background-color: #000;}
</style>

in the parent window


<script>
function iframeCSS() {
var str= "#mimihome{ width:50px; background-color: #000;}"
var pa= document.getElementsByTagName('head')[0];
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'print';
if(el.styleSheet) el.styleSheet.cssText= str;                               // IE method
else el.appendChild(document.createTextNode(str));           // others
pa.appendChild(el);
}
</script>
<iframe id="mimihome" width="700" onLoad="iframeCSS()" src="testiframecontent.html"></iframe>

Open in new window

Avatar of trower

ASKER

it still doens't work I'm afraid.

is there a way I can create a div tag that will contain all the content of the iframe and then set the width of that on print ?

cheers
paul
I do not understand "It still doesn't work"


<script>
function iframeCSS() {
var str= "#mimihome{ width:50px; background-color: #000;}"
var pa= document.getElementsByTagName('head')[0];
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'print';
if(el.styleSheet) el.styleSheet.cssText= str;                               // IE method
else el.appendChild(document.createTextNode(str));           // others
pa.appendChild(el);
}
</script>
<iframe id="mimihome" width="700" onLoad="iframeCSS()" src="testiframecontent1.html"></iframe>

Open in new window

testiframe-screen1.jpg
testiframe-print1.jpg
Avatar of trower

ASKER

i have attached some screenshots

the first is the code in my designer client
the second is the page as viewed in the browser
the third is the print preview - as you can see the third page doesn't have an iframe width of 50px

hope this helps explain

thanks
paul
csscode1.jpg
csscode2.jpg
csscode3.jpg
I am sorry. All bets are off when you use some wysinotatallwyg editor.

If your generate HTML looks like mine, and there are nothing overriding the code after the load of the page, then it will work

I have no clue as to what lotus designer does to your code...
Avatar of trower

ASKER

ok thanks for your help anyway

cheers
paul
Avatar of trower

ASKER

mplungian
one last plea for help!!
i have inserted some style code on my parent page and it is having an effect, which is good

in the code below #mimihone refers to my iframe and #mimihomeInlineFrame refers to a pair of div tags that are set around the iframe

with this code in place i can adjust the width of the div section, which is good,

but annoyingly the iframe won't then 're-size' itself in the new space allocated, and it won't react to a change in width either.

when I look back at your posting (03.26.2008 at 04:09PM GMT, ID: 21213152) i can see that when you resized your div tag the text 'hello' was going to wrap and hence it wouldn't have been printed. if you could use the test 'hello hello hello' and set the width to 50 can you get the iframes content to be visible and therefore printable.

any more thoughts ? if you still think that Lotus is to blame then tell me to go away!
cheers
paul
<style media=\"print\">
#mimihome {width:500px; overflow:auto; border:green solid};
#mimihomeInlineFrame {width:500px; overflow:hidden; border:red solid};
</style>

Open in new window

csscode4.jpg
Your code asks the browser not to reflow the content with the overflow.

One gives scroll bars the other gives nothing...

I would expect if you take away the overflow, the content should reflow unless you have other css that stops this..

I am not THAT into css that I could tell what that could be off the top of my head

If the iframe content comes from the same server as the parent, you could replace the div wrapping the iframe with the iframe content, by the way
Avatar of trower

ASKER

i am intrigued by this sentence as they are from the same server

>>If the iframe content comes from the same server as the parent, you could
>>replace the div wrapping the iframe with the iframe content, by the way

what exactly do you mean ?

i know that my code 'overflow:hidden' tells the div tags to not 'stretch' themsleves to fit the content of the iframe. but that doesn't really help as the right hand side of the iframe just becomes hidden.

what I really need to do is set the width of the iframe to 500 but strangely the browser doesn't want to accept this instruction - and that has been the problem all along. were you able to resize the frame in IE6 ? can you show me a screen dump of an iframe width of 100 and div tags of width 150 ??

cheers
paul
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of trower

ASKER

mplungian

i have found a solution - i think

i will test it tomorrow and then let you know if it goes well ... thanks for sticking with me here.

paul
Avatar of trower

ASKER

mplungian (and anyone else who comes across this in the future...)

solved !!

this code will re-size the iframe before printing it and then re-re-size it back after printing.

You need to add a hidden, text, editable field called 'iframePrintWidth' and this code in the JSheader. Doesn't seem like much but took me ages to figure out so I wanted to save someone else the time by posting.

window.onbeforeprint = function ()
{
frm.iframePrintWidth.value = document.getElementById('iframeName').style.width;
document.getElementById('iframeName').style.width = "560px";
document.getElementById("iframeName").scrolling = "no";
document.getElementById('iframeContainingDivTags').style.width = "560px";
}
window.onafterprint = function ()
{
document.getElementById('iframeName').style.width = frm.iframePrintWidth.value;
document.getElementById("iframeName").scrolling = "auto";
document.getElementById('iframeContainingDivTags').style.width = frm.iframePrintWidth.value;
}

thanks for everyone (especially mplungian's) help in solving this.
paul
Avatar of trower

ASKER

thanks
Or just save it as a js var


var saveWidth;
window.onbeforeprint = function ()
{
saveWidth = document.getElementById('iframeName').style.width;
document.getElementById('iframeName').style.width = "560px";
document.getElementById("iframeName").scrolling = "no";
document.getElementById('iframeContainingDivTags').style.width = "560px";
}
window.onafterprint = function ()
{
document.getElementById('iframeName').style.width = saveWidth;
document.getElementById("iframeName").scrolling = "auto";
document.getElementById('iframeContainingDivTags').style.width = frm.iframePrintWidth.value;
}