Solved

Print content only inside specified area

Posted on 2009-04-03
18
462 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
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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

932 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