Solved

Print content only inside specified area

Posted on 2009-04-03
18
459 Views
Last Modified: 2012-06-21
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
Comment
Question by:MisterHamper
  • 8
  • 5
  • 5
18 Comments
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:Onthrax
Comment Utility
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
 
LVL 20

Expert Comment

by:Gawai
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 20

Expert Comment

by:Gawai
Comment Utility
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
 
LVL 20

Expert Comment

by:Gawai
Comment Utility
0
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:Onthrax
Comment Utility
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
 
LVL 20

Expert Comment

by:Gawai
Comment Utility
post your complete  code pls
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:Onthrax
Comment Utility
We need to see the code (css) of your HTML :)
0
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:Onthrax
Comment Utility
Contents of main.css also please :)
0
 
LVL 20

Expert Comment

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

Author Comment

by:MisterHamper
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Accepted Solution

by:
Onthrax earned 500 total points
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
Thanks for that! It is working now :D
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logiā€¦
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now