Printing a specific iframe 2

Nate1749 · Feb 27, 2003

Is there way to print just a specific iframe that I have. I read something about creating a CSS file and hiding the other objects, but since I have a banner on top and a menu nagiviation bar on the left, I would think that this would make my iframe an extra inch in on the left and an extra inch down on top.

The navigation bar is like this

Security Policies
600
600.48
608.72

and once someone clicks on a security policy it's loaded into the main iframe. Sometimes they may want these printed and I don't want the whole webpage getting in the way. My only alternative I can currently think of is to have a small link next to the #s on the navigation bar that opens the link up in a new window if they want to print it; but that kinda defeats the purpose of having the tables with iframes, doesn't it?

-Nate

Nate1749 · Feb 27, 2003

I just found this ... Is it possible for me to modify this to direct it towards a specific iframe/window?

<script language = "JavaScript">
document.write("<a href = 'javascript: window.print()'>Click to print</a>&quot

;
//-->
</script>

4x4uk · Feb 27, 2003

It is done very easily with stylesheets you will find this link helpful it describes exactly how to achieve it

http://www.meyerweb.com/eric/articles/webrev/200001.html

regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

ok I did the css thing and it works great, but I found one flaw and I can't figure out how to fix it.

After someone clicks something in the menu (menu is also an iframe), if they directly go to print; it will print the menu. I opened up the html for the menu and added all the hide information to the menu html.

Now I select something from the menu, it appears in the other iframe (main.htm), and I directly go to print and it still prints the menu, except now it's just a blank page.

The only way to get the content printed in the other iframe (the main one where all the information is actually displayed), is to click in it first. Is there a way to automatically have that iframe selected when they go print no matter what?

-Nate

Nate1749 · Feb 28, 2003

an another thing, when I go to Print Preview, it shows up like it should, but it just doesn't print out that way, weird huh?

Even if I click in the main.htm area first and print it, it prints the content in there (which I want), but not the banner that is on top in the print preview (which is weird).... wonder what the explanation for this is.

4x4uk · Feb 28, 2003

1) the banner at the top of your page, is this set to display in your print stylesheet if yes then it should print.
2) with regard to the iframes and the pages within them and the page holding them are they all linked to your master stylesheets.

Can you post a link to your site or failing that the code. It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

Sure, it's actually not going to be published on the web (just cd), but I put it on the web for you. Sorry about the ugly code.

http://www.ukbeats.com/work/

4x4uk · Feb 28, 2003

I've been playing around in the meantime, I think the menu problem is related to the focus being set on the menu IFrame

I put the following in the iframe tag for the menu and it resolved the print problem

onmouseout="focus('nameofcontentsframe') It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

4x4uk · Feb 28, 2003

Just had a look at your page and providing I don't click on the menu or click elsewhere after I do when I print or print preview I get the brinkster logo + your main contents page (I assume that is what was intended)
If you wish to hide the logo in your printed document set up a new class in your print.css

.image{display:none} in the print stylsheet
include the class="image" in your image tag

Personal preference but I always prefer to use external stylesheets for both print and display
To prevent problems would always set
<style type="text/css" media="screen"> even when inlining the stylesheet
Regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

ok on my main page where the iframe is refrenced, I now have:

<iframe src="menu.htm" name="menu" scrolling="auto" width="100%" height="100%" frameborder="8" onmouseout="focus('main')">Type error message for Netscape 4 and older browsers here.</iframe>

The good side is it prints what it says is in Print Preview. The bad side is, it's only one page (kind of like a screen shot with the other stuff omitted). The main itable (called 'main') can have many pages worth of content (i.e. 7pages if you click on Security Policies -> 668.42), but it's only printing what seems like a screen shot. Anyway how can I tell it to entire itable?

I intend to hide the logo, but I kept it in there so I can figure out this printing thing. I'm willing to have that banner part completly omitted if the entire iframe (main) would print. I guess I just wanted to see if I could do it both ways (logo + all content in main iframe; and just all content in main iframe).

-Nate

4x4uk · Feb 28, 2003

you could try

defining the height and width of the main contents frame in your stylesheets

use height=100% width=100% in your screen stylesheet

in the print stylsheet don't set any height attribute it should then automatically stretch to the end of the document it contains It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

I had that design originally, but liked it better when the table with the border stayed the exact size the whole time; the stretching thing looks kinda bad. Thanks for all your help though. This is definitly going to be helpful in the future.

Perhaps javascript will allow me to just print a specific window (being the iframe 'main').

-Nate

4x4uk · Feb 28, 2003

It will only stretch in the printed version to the end of the document which will allow you to set scrolling="no" in the print stylesheet which will get rid of the printed scrollbar if you print

the screen version would stay as is ie width=100% height= 100% It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

I think that's exactly what I want. Unfortulately, it's a bit over my head right now. I'll keep trying though ..

I just started playing with css yesterday so... I don't have a print or screen stylesheet, but im working on it =)

Thanks, I wish I could award you more than 1 star!

-Nate

4x4uk · Feb 28, 2003

Don't worry about it I only started playing with stylesheets at the beginning of this year and although the site looks ok I made loads of errors but eventully worked out what to do and what not to do. I only looked into separate stylesheets for printing after someone else asked a similar question a couple of weeks ago.

The best way to think about using stylesheets is like this

1)They offer you excellent control over every element in your page ie color size position etc
2) They greatly simplify the layout of your page. ie you dont need tables to create smart looking layout which allows your page to load faster. You can if you want position anyything with pixel perfect accuracy ie iframes for example

<iframe id="menu" name="menu" style="position:absolute; left:10px; top:20px;width:130px; z-index:1" framespacing=0 marginwidth=0 marginheight=0 scrolling="no" frameborder=0 src="menu.html" onmouseout="focus('main')"></iframe>

3) using separate stylesheets for screen and print is effectively allowing you to design 2 distinctly different pages (including how the elements are positioned their color etc) in one page. It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

What program do you use to do css/html in? Currently I'm doing everything in notepad and it's starting to get to me. Time for me to switch to a GUI.

4x4uk · Feb 28, 2003

I use 1stpage 2000, it supports css a provides help and info but basically you have to hand code the css it will insert the basic tags ie
<div></div>, 

it allows previews in external browsers etc and color codes the scripting etc
probably not ht e best but it's free

http://www.eversoft.com/

I'm going to have a look at this one when In get a chance but haven't got round to it yet

http://bradsoft.com/

Regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Feb 28, 2003

::sigh:: im having 0 success rate, if anything i've done more damage than good!

Could you point me in the direction a little bit more. I guess elaborate on what you originally told me to do.

From my understanding there should be 3 stylesheets, a hide.css (for hiding content), a print.css, and a screen.css

In the screen stylesheet set height and width to 100%

In print.css set scrolling="no" to get rid of scrollbar (i like this idea)

In the main itable where all the content is loaded into(called 'main'), have this in the header

<link rel="stylesheet" href="general/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="general/print.css" type="text/css" media="print">

If my understanding is correct, then I must be doing my stylesheets wrong (or probably both are wrong); here's my print & screen stylesheet(used it based off my hide.css that I got from spoono.com).

my print.css

.print {
scrolling: no;
}

and my screen.css

.screen {
height: 100%;
width: 100%;
}

4x4uk · Feb 28, 2003

You only need 2 stylesheets, one for the screen and one for print

Screen Stylesheet

Body {background-color: #ffffff; background-image: none}
#menu{scrolling="auto"}
#cont{width:100%;height:100%;scrolling="auto"}

Print Stylesheet
Body {background-color: #ffffff; background-image: none}
#menu{display:none}
#cont{width:100%;scrolling="no"}

Main Document
<head><title>Your Title</title></head>
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<body>

<iframe id="menu" name="menu" framespacing=0 marginwidth=0 marginheight=0 width="120px" hehight="100%" frameborder=0 src="menu.html" onmouseout="focus('cont')"></iframe>

<iframe id="cont" name="cont" framespacing=0 marginwidth=0 marginheight=0 frameborder=0 src="contents.html"></iframe>
</body>
</html>

I only put the frame info in the mainpage to keep the posting shorter and you can add other style attributes as desired

regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

|

http://www.ne4x4.org.uk/Ian/

|

http://www.ne4x4.fsnet.co.uk/beck/

Nate1749 · Mar 3, 2003

After extensivly trying to get the above code to work this weekend, I gave up and decided to just what you entered alone (rather than trying to enter it in mine). I am still having the same trouble, I have posted the files at

http://www.ukbeats.com/tektips/

The name of the 5 files are
contents.htm
index.htm
menu.htm
print.css
screen.css

and they are all in that directory. If you to go Print Preview... Well I have no idea why it looks the way it does. I started with something small like trying to get the scrollbar to go away under print, but couldn't get that either.

I read up on CSS and saw that I was calling styles in two different ways, so I simply deleted all those styles just to make sure there were no conflicts.

index.htm is just a simple 1row, 2 cell table; first cell is menu.htm & 2nd cell is contents.htm

I referenced both CSS lines in all 3 htm files right after the HEAD.

This is what I've reduced the code down to:
screen.css
Body {background-color: #ffffff; background-image: none}
#menu{scrolling="auto"}
#cont{width:100%;height:100%;scrolling="auto"}

print.css
Body {background-color: #ffffff; background-image: none}
#menu{display:none}
#cont{width:100%;scrolling="no"}

index.htm
<head><title>Test</title></head>
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<body>
<table width=100% height=100%>
<tr>
<td>

<iframe id="menu" name="menu" framespacing=0 marginwidth=0 marginheight=0 width="120px" height="100%" frameborder=0 src="menu.htm" onmouseout="focus('cont')"></iframe>

</td><td>

<iframe id="cont" name="cont" framespacing=0 marginwidth=0 marginheight=0 frameborder=0 src="contents.htm"></iframe>

</td></tr>

</table>
</body>
</html>

menu.htm
<HTML>
<HEAD>

</HEAD>

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">

<BODY>
 
<A HREF="

http://www.ifap.ed.gov"

TARGET="main">668.41</a>
 5 lines
 10 lines
 15 lines
 20 lines
</BODY>
</HTML>

contents.htm
<HTML>

<HEAD>
</HEAD>

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">

<BODY>

<TABLE WIDTH="100%" HEIGHT="40" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR HEIGHT="20">
<TD bgcolor="000000" nowrap></TD>
<TD bgcolor="000000" nowrap></TD>
</TR>

<TR HEIGHT="20">
<TD WIDTH=350 ALIGN=LEFTT>
<A HREF="main.htm">Main</A> |
<A HREF="contact.htm">Contact Us</A> |
<A HREF="about.htm">About</A> |
<A HREF="help.htm">Help</A>
</TD>

<TD bgcolor="000000" width=500><IMG SRC="images/curve.gif" align="left" border="0" hspace="0 width="50" height="20" nowrap></TD>
</TR>

</TABLE>

 

Contents.htm

test scrolling BR 
test scrolling BR 
test scrolling BR 
test scrolling BR 
test scrolling BR 
</BODY>
</HTML>

That's it; I know it's long & sloppy (tried to clean it up).
-Nate

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Printing a specific iframe 2

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor