?
Solved

Print content only inside specified area

Posted on 2009-04-03
18
Medium Priority
?
471 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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

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 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

765 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