Solved

Print content only inside specified area

Posted on 2009-04-03
18
468 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 5
18 Comments
 

Author Comment

by:MisterHamper
ID: 24057708
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
ID: 24058230
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
ID: 24058240
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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

Author Comment

by:MisterHamper
ID: 24058295
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
ID: 24058312
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
ID: 24058337
0
 

Author Comment

by:MisterHamper
ID: 24058381
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
ID: 24058382
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
ID: 24058387
post your complete  code pls
0
 

Author Comment

by:MisterHamper
ID: 24058389
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
ID: 24058399
We need to see the code (css) of your HTML :)
0
 

Author Comment

by:MisterHamper
ID: 24058410
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
ID: 24058420
Contents of main.css also please :)
0
 
LVL 20

Expert Comment

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

Author Comment

by:MisterHamper
ID: 24058428
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
ID: 24058660
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
ID: 24060727
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
ID: 24067122
Thanks for that! It is working now :D
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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