Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Printing selected area with templates

    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 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. Thanks for any help you can provide
    you can see the page at

    "http://www.thedealcafe.com/cmps_index.php?coupon=coupons"
    Code:
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Init(zxccid,zxcpid){
     var zxcc=document.getElementById(zxccid);
     zxcc.print=document.getElementById(zxcpid);
     var zxcimgs=zxcc.getElementsByTagName('IMG');
     for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
      zxcAddEvt(zxcimgs[zxc0],'zxcAddCoupon','click');
      zxcES(zxcimgs[zxc0],{cursor:'pointer'});
     }
    }
    
    function zxcAddCoupon(){
     var zxcpage=this.parentNode;
     var zxcprint=zxcpage.print;
     var zxcnu=prompt('Enter the number of coupons','1');
     zxcnu=zxcnu.replace(/\D/g,'');
     if (!zxcnu) return;
     for (var zxc0=0;zxc0<parseInt(zxcnu);zxc0++){
      zxcES(this.cloneNode(false),{},zxcprint);
     }
     zxcmore=confirm('OK for more.\nCancel to Print');
     if (!zxcmore){
      if (zxcprint.getElementsByTagName('IMG').length<1) return;
      zxcES(zxcpage,{display:'none'});
      zxcES(zxcprint,{display:'block'});
      window.print();
      zxcES(zxcpage,{display:'block'});
      zxcES(zxcprint,{display:'none'});
      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;
     zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
     zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt);
    }
    
    </script>
    
    <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>
    <div id="print" style="position:absolute;display:none;left:0px;top:0px;" ></div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,435 Times in 4,400 Posts
    Create two different "regions" in your <style>:
    Code:
    @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):
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •