View Full Version : Printing selected area with templates

05-23-2009, 01:44 PM
HI Im using vbulletin and have a page that I want the user to be able to print the number of images that they want. I now have it where it FINALLY :rolleyes: prints the number that they want but now it prints everything on the page. Since it is essentially the content of a page within several templates, header,footer etc is there a way that I can tell it JUST to print the area and ignore everything else? Im completely new to all of this and know just enough to be dangerous.:o Thanks for any help you can provide
you can see the page at


<script language="JavaScript" type="text/javascript">

function Init(zxccid,zxcpid){
var zxcc=document.getElementById(zxccid);
var zxcimgs=zxcc.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){

function zxcAddCoupon(){
var zxcpage=this.parentNode;
var zxcprint=zxcpage.print;
var zxcnu=prompt('Enter the number of coupons','1');
if (!zxcnu) return;
for (var zxc0=0;zxc0<parseInt(zxcnu);zxc0++){
zxcmore=confirm('OK for more.\nCancel to Print');
if (!zxcmore){
if (zxcprint.getElementsByTagName('IMG').length<1) return;
while (zxcprint.firstChild) zxcprint.removeChild(zxcprint.firstChild);

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }

function zxcAddEvt(zxcobj,zxcfun,zxcevt){
if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;


<body onLoad="Init('coupons','print')">
<div id="coupons">
<img src="http://www.thedealcafe.com/target/1.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/2.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/3.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/4.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/5.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/6.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/7.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/8.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/9.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/10.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/11.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/12.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/13.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/14.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/15.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/16.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/17.jpg" width="476" height="196" />
<img src="http://www.thedealcafe.com/target/18.jpg" width="476" height="196" />
<div id="print" style="position:absolute;display:none;left:0px;top:0px;" ></div>

Old Pedant
05-23-2009, 09:25 PM
Create two different "regions" in your <style>:

@media SCREEN {
.screenonly { }
@media PRINT {
.screenonly { display: none }

Now, for any part of the page you do *NOT* want to print, add the class "screenonly" to it.

Example (from your page):

<div id="topbar screenonly">
<table class="tborder screenonly" ...>
<ul id="qm0" class="qmmc screenonly">

The alternative is to create a special print-these-coupons page, which many sites do.