[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 476
  • Last Modified:

Print content only inside specified area

Hey. I have a page where you should be able to print some text from it's multiple iframes.
Right now I am doing the <div=printable> and <div=unprintable> on everything, but there is a problem with that. Because my banner and login-area etc takes alot of space at the top of the site, when I print the page there is a huge blank area at the top of the paper where the banner used to be.
I can't use a popup and print from that, because what will be printed inside the iframes is rather random and when the page is reloaded, it will have taken new random items.
So I am thinking the best way to solve all this, would be to only print the things inside an area. Fx place this in the middle of my index.php
<print only this>everything printed here</print only this>

But I couldn't find something that answered this by googling or searching, so I hope you guys can help me!
0
MisterHamper
Asked:
MisterHamper
  • 8
  • 5
  • 5
1 Solution
 
MisterHamperAuthor Commented:
If it is not possible to print like that with Ctlr+P, it is more than fine if it will only be possible from a button on my page too :-)
0
 
OnthraxCommented:
Sure it's possible.. You can use a specific style sheet for this.

Lunch is serverd now, but i'll get back to you when I'm done eating :)
0
 
GawaiCommented:
try
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test pringing</title>
<style type="text/css" media="screen">
html, body {
margin:0;
padding:0;
}
div {
border:1px solid #000000;
margin:10px;
padding:3px;
}
</style>
<style type="text/css" media="print">
html, body {
margin:0;
padding:0;
}
div {
border:0;
margin:10px 0;
padding:0;
}
.noprint {
display:none;
}
</style>
</head>
 
<body>
<div class="noprint">This is content that will not print if the user tries to print this page</div>
<div>This will print because it does not have the class="noprint". Simple CSS is all it takes to setup something like this</div>
<div>This will also print</div>
<div class="noprint">This will not print</div>
</body>
</html>

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
MisterHamperAuthor Commented:
Hey thank you for your answer. But I am already doing it like this. The problem is, that when I set something to "noprint" and then print, instead of that item being there there is just a blank space. And that ruins the layout of the paper, when there is a huge empty space at the top of the paper fx. So I was wondering if there was a way to only print the content inside an area, like this <print from here>dsfojsdfj</print from here> :)
0
 
GawaiCommented:
why dont u creat a dynamic page for print ? which will print based on query string, id or page name

<a href="print.php?page=page.htm">Print</a>
0
 
GawaiCommented:
0
 
MisterHamperAuthor Commented:
I would do that, but I can't sadly. The things that has to be printed is generated pretty much randomly, so if the page is reloaded it won't be the same things again and then you won't be able to print what you want to print..
0
 
OnthraxCommented:
Using display none would remove the item and move everything below to the top. UNLESS you are using absolute positioning, which is never a good idea.
0
 
GawaiCommented:
post your complete  code pls
0
 
MisterHamperAuthor Commented:
Oh i see. My script looks like this, in the <head>

<style type="text/css">

      @media screen {

            .unprintable {
                  display: block;
            }
            .printable {
                  display: block;
            }

      }

      @media print {

            .unprintable {
                  display: none;
            }
            .printable {
                  display: block;
            }

      }

</style>

How do I make the position relative for that script? Because then my problem would be solved, I think :-)
0
 
OnthraxCommented:
We need to see the code (css) of your HTML :)
0
 
MisterHamperAuthor Commented:
Everything? Here goes :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<script language="javascript">
<!--
function changesize()
{
        document.getElementById('meal4').height = 300;
}
// -->
</script>
 
 
 
<style type="text/css">
 
      @media screen {
 
            .unprintable {
                  display: block;
            }
            .printable {
                  display: block;
            }
 
      }
 
      @media print {
 
            .unprintable {
                  display: none;
            }
            .printable {
                  display: block;
            }
 
      }
 
</style>
 
 
<script type="text/javascript">
function submitForm(theForm) {
  var kcal = theForm.kcal.value;
  window.frames["meal1"].location='meal1.php?kcal='+kcal+'&x=1&y=1';
  window.frames["meal2"].location='meal2.php?kcal='+kcal+'&x=1&y=1';
  window.frames["meal3"].location='meal3.php?kcal='+kcal+'&x=1&y=1';
  window.frames["meal4"].location='meal4.php?kcal='+kcal+'&x=1&y=1';
  window.frames["meal5"].location='meal5.php?kcal='+kcal+'&x=1&y=1';
  return false;
}
</script>
 
 
<SCRIPT LANGUAGE="JavaScript">
 
if (window.print) {
document.write('');
}
</script>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Automated Diet</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
  <div class="unprintable"><h1 class="logo"><a href="./"><img src=" alt="Logo" width="400" height="90" border="0" align="left" /></a></span></h1></div>
</div>
<div class="navigation">
 <div class="navigation-left"></div>
  <ul>
<div class="unprintable">
    <li><a href="index.php">Standard</a> </li>
    <li><a href="dex.php">Members Area</a> </li>
    <li><a href=""></a></li>
</div>
  </ul>
 <div class="navigation-right"></div>
  </div>
</div>
<div class="middle-left">
<div class="unprintable">
<table width="300" border="0" align="left" cellpadding="0" cellspacing="1">
<tr>
<FORM METHOD="POST" ACTION="redirect.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td colspan="3"><strong>Members Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><INPUT TYPE="text" NAME="username" SIZE=25 MAXLENGTH=25>
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><INPUT TYPE="password" NAME="password" SIZE=25 MAXLENGTH=25></td>
</tr>
<tr>
<td><input type="checkbox" name="remember" value="Yes"><font size="1">Remember  me on this PC</font></td>
<td>&nbsp;</td>
<td><input type="image" src="submit.jpg" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<br><br><br><br><br><br><br><br><br>
<font color="White"><a href="emailpass.html">Forgot your password?</a></font>   |   <font color="White"><a href="register.html">Register here!</a></font>
</div>
</div>
<div class="middle-right"><div class="unprintable">
<img src="images/logoet.jpg" alt="Automated Diet"/></div>
</div>
 
<div class="main"><div class="unprintable">
<img src="images/main-top.gif" alt="main top" /></div>
<div class="main-left"><div class="unprintable">
  <h1>Automated Diet</h1></div>
   <p>
 
<div class="printable"><form onSubmit="return submitForm(this)"><input type="Text" value="Daily kcal" maxlength="4" name="kcal" />  <INPUT TYPE="image" src="submit.jpg"></form></div>
<div class="unprintable"><font face="verdana" size="1">Default value of the program is 2000 kcal</font></div>
 
<br><br><br>
 
 
<br>
 
<div class="printable"><font face="verdana" size="2"><INPUT TYPE="image" src="refresh.jpg" onClick="meal1.location.reload(true)">  <b>Breakfast:</b><br><br></font>
<iframe  src="meal1.php" name="meal1" id="meal1" frameborder="0" width="370" height="112" scrolling="no">Your browser doesn't support iFrames. Please update your browser.</iframe>
 
 
<br><input type="image" src="submit.jpg" name="print" value="Print diet" onClick="javascript:window.print()" />  <b>Click here to print the diet!<br></b></div>
 
    </p>
</div>
 
<div class="main-right">
 <div class="main-right-top"></div>
  <h3>The Automated Diet</h3>
  <p>
 <h3><b>Automated Diet</b></h3>
 
</p>
  <div class="main-right-bottom"></div>
  </div>
  <img src="images/main-bottom.gif" alt="main bottom" /></div>
<div class="seperater"><!-- LEAVE DIV EMPTY --></div>
<div class="footer">
<div class="footer-left">
  <p> All Rights Reserved  - (C) 2009 </p>
  <p class="small"><a href="http://www.sjlwebdesign.co.uk">Web Design</a>: SJL <a href="http://www.firebubble.co.uk">Web Design Leicester</a></p>
</div>
<div class="footer-right">
  <ul>
    <li><a href="index.php">Standard</a> | </li>
    <li><a href="dex.php">Members Area</a> | </li>
  </ul>
  </div>
</div>
</div>
<div style="text-align: center; font-size: 0.60em;"><a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>

Open in new window

0
 
OnthraxCommented:
Contents of main.css also please :)
0
 
GawaiCommented:
why it is defined there ?
<SCRIPT LANGUAGE="JavaScript">
 
if (window.print) {
document.write('');
}
</script>
0
 
MisterHamperAuthor Commented:
I haven't really touched that one yet. So I haven't done anything that has to do with <printable> in main.css
@charset "UTF-8";
body {
	background-color: #eeeeee;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    color: #666;
	font-size: 13px;
	margin: 0px;
}
 
.wrapper{
	position: relative;
	width: 975px;
	margin-left: auto;
	margin-right: auto;
}
 
.header{
	width: 975px;
	height: 134px;
}
 
.logo{
	width: 370px;
	height: 63px;
	float: left;
	padding-top:40px;
	padding-left: 10px;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-weight: normal;
    font-size: 44px;
	letter-spacing: -1px;
	font-weight: bold;
	color: #0064a3;
 
}
 
.logo-light{
	color: #666;
}
 
h1.logo{
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	float: left;
}
 
.navigation{
	position: relative;
	float: right;
	height: 44px;
	margin-top: 50px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-weight: normal;
    font-size: 14px;
	letter-spacing: 1px;
	background-image: url(images/nav-bg.gif);
	background-repeat:repeat-x;
}
 
.navigation-left{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 19px;
	height: 64px;
	background-image: url(images/nav-left.gif);
}
 
.navigation-right{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 9px;
	height: 64px;
	background-image: url(images/nav-right.gif);
}
 
.navigation ul{
	padding: 0px;
	margin: 0px;
	font-size: 14px;
}
 
.navigation li{
	display: inline;
}
 
.navigation a{
	color: #28292d;
	text-decoration: none;
	margin-left: 8px;
	margin-right: 8px;
}
 
.navigation a:hover{
	color: #666;
	text-decoration: none;
	margin-left: 8px;
	margin-right: 8px;
}
 
.middle-left{
	width: 389px;
	height: 230px;
	float: left;
	background-image: url(images/middle-left-bg.jpg);
	background-repeat: no-repeat;
	padding-left: 30px;
	padding-top: 30px;
	padding-right: 80px;
	color: #28292d;
	font-size: 14px;
	margin-bottom: 7px;
}
 
.middle-left h1, .middle-left h2, .middle-left h3, .middle-left h4{
	font-weight: normal;
	color: #28292d;
}
 
.middle-right{
	width: 467px;
	height: 258px;
	float: left;
	padding-left: 7px;
}
 
.main{
	width: 975px;
	clear: both;
	background-image: url(images/main-bg.gif);
	background-repeat: repeat-y;
	}
 
.main-left{
	width: 515px;
	float: left;
	padding-left: 30px;
	padding-top: 10px;
	padding-right: 60px;
	padding-bottom: 20px;
}
 
.main-right{
	position: relative;
	width: 292px;
	margin-right: 7px;
	float: left;
	background-color: #bbbbbb;
	color: #333;
	padding-left: 20px;
	padding-right: 40px;
	padding-bottom: 20px;
	padding-top: 20px;
}
 
.main-right-top{
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(images/main-right-top.gif);
	background-repeat: no-repeat;
	width: 352px;
	height: 13px;
}
 
.main-right-bottom{
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-image: url(images/main-right-bottom.gif);
	background-repeat: no-repeat;
	width: 352px;
	height: 13px;
}
 
.main-right h1, .main-right h2, .main-right h3, .main-right h4{
	color: #28292d;
}
 
.seperater{
	height: 20px;
	clear: both;
}
 
.footer{
	width: 995px;
	height: 80px;
	color: #666;
	font-weight: normal;
    font-size: 13px;
	letter-spacing: 1px;
}
 
.footer-left{
	width: 270px;
	float: left;
	padding-left: 12px;
}
 
.footer-right{
	width: 695px;
	float: left;
	text-align: right;
	padding-right: 10px;
}
 
.footer a{
	color: #666;
	text-decoration: none;
}
 
.footer a:hover{
	color: #999999;
	text-decoration: none;
}
 
.footer-right a{
	margin-left: 5px;
	margin-right: 5px;
}
 
.footer ul{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	font-size: 13px;
}
 
.footer li{
	display: inline;
}
 
.footer p{
	padding: 0px;
	margin: 0px;
}
 
h1{
	font-size: 24px;
	font-weight: normal;
	color: #3a3a3b;
	letter-spacing: -1px;
	padding-top: 0px;
	margin-top: 0px;
	font-weight: normal;
}
 
h2{
	font-size: 20px;
	font-weight: normal;
	color: #3a3a3b;
	letter-spacing: -1px;
	padding-top: 0px;
	margin-top: 0px; 
	font-weight: normal;
}
 
h3{
	font-size: 18px;
	font-weight: normal;
	color: #3a3a3b;
	letter-spacing: -1px;
	padding-top: 0px;
	margin-top: 0px; 
	font-weight: normal;
}
 
h4{
	font-size: 16px;
	font-weight: normal;
	color: #3a3a3b;
	letter-spacing: -1px;
	padding-top: 0px;
	margin-top: 0px; 
	font-weight: normal;
}
 
p{
	line-height: 18px;
}
 
ul{
	font-size: 12px;
	line-height: 24px;
}
 
a{
	color: #666666;
	text-decoration: underline;
}
 
a:hover{
	color: #157992;
	text-decoration: none;
}
 
.small{
	font-size: 10px;
	letter-spacing: 0px;
	
	}

Open in new window

0
 
MisterHamperAuthor Commented:
gawai:
"why it is defined there ?
<SCRIPT LANGUAGE="JavaScript">
 
if (window.print) {
document.write('');
}
</script>"

Hey! That's a button I have on my site, to print the items. Works like pressing Ctrl+P
0
 
OnthraxCommented:
I see the problem...

From your source:
<div class="logo">
  <div class="unprintable"><h1 class="logo"><a href="./"><img src=" alt="Logo" width="400" height="90" border="0" align="left" /></a></span></h1></div>
</div>

From your CSS:
.logo{
      width: 370px;
      height: 63px;
      float: left;
      padding-top:40px;
      padding-left: 10px;
      font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
      font-weight: normal;
    font-size: 44px;
      letter-spacing: -1px;
      font-weight: bold;
      color: #0064a3;
 }

So let's break this down
<div class="logo"> DIV with class LOGO begins here
      <div class="unprintable"><h1 class="logo"><a href="./"><img src=" alt="Logo" width="400" height="90" border="0" align="left" /></a></span></h1></div> CLASS unprintable
</div> DIV with class LOGO ends here.

So this translates to when printing:
<div class="logo">
  nothing
</div>

So the DIV using the logo class which has height 63px will still be displayed even if you hide the contents in it.

Easy solution would be to add this to your print css file:
.logo {
   display:none;
}

Hope this is clear...


0
 
MisterHamperAuthor Commented:
Thanks for that! It is working now :D
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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