Click here to Skip to main content
13,086,120 members (82,337 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 30 Dec 2007

Javascript Custom Parts Print Preview

, 30 Dec 2007
Rate this:
Please Sign up or sign in to vote.
a javascript module that grants developer to select variant parts or may be the whole page to make user can print preview it and print it.

Custom Parts Printer it’s a javascript module that grants developer to select variant parts or may be the whole page to make user can print preview it and print it.<o:p>

Html elements accept the custom attributes. Any part of page needed to print out, it surrounded by html element Div with custom attribute “Printable”.<o:p>

The print preview comes to user in popup window with print button if he/she likes to print it.<o:p>


The main Script function was <o:p>


Where wdth and hght are the width and height of the popup window respectively.<o:p>

Stylesheets is string which contains the style sheets files applied to the preview page separated by semicolons.<o:p>

Imgsdir is the image directory which contains images need in print preview process like replacement of radio button with image. <o:p>

Lets go in deep with main function and see how it’s working.<o:p>


function DoPrintableSections(wdth,hght,stylesheets,imgsdir)<o:p>


(*) CreateVirtualCarrier("ContentCarrier");<o:p>

(*)var e = document.getElementsByTagName("div");<o:p>

var content = "";<o:p>

for(var i=0;i<e.length;i++){<o:p>

   (*)  if(e[i].printable == "Print"){<o:p>

        var cc = document.getElementById("ContentCarrier");<o:p>

        cc.innerHTML = e[i].innerHTML;<o:p>

   (*)  ClearInputs(cc,"INPUT",imgsdir);<o:p>



   (*)  content = content + "<br/>" + cc.innerHTML ;  <o:p>

    }    <o:p>






(*)First thing this function process is creating Virtual Carrier, It’s just a div we added to the html document to can use the DOM of browser in handling each custom HTML part respectively and to get the new handled html as string using magic method innerHTML.<o:p>

function CreateVirtualCarrier(carriername){<o:p>

    var vc = document.createElement('<div id="'+ carriername +'" style="width:600; height:200"></div>');<o:p>

    document.body.appendChild(vc); <o:p>



(*)Then we get all html div elements using getElementsByTagName() which provides the most performant way to iterate over all the elements in the DOM.<o:p>


(*)After that make looping for the array of elements returned and check if it’s marked as printable or not. The Divs marked as printable we copy it’s html content to the virtual carrier and the start to handle it.<o:p>


The handing process comes from Clears functions which replace or remove elements by checking there types. We use two main steps to do that<o:p>

1-      Currentelement.parentNode.insertBefore  <o:p>

2-     Currentelement.removeNode(true)<o:p>



After all we put the collected generated HTML in new popup window that user will see it.<o:p>


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Team Leader
Saudi Arabia Saudi Arabia
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionWill it work in all browser... Pin
mygapula sudheer8-Oct-10 19:01
membermygapula sudheer8-Oct-10 19:01 
GeneralEverything works except external CSS Pin
Joel Mathias26-Nov-09 2:31
memberJoel Mathias26-Nov-09 2:31 
GeneralMy vote of 1 Pin
rybrns7-Jun-09 5:34
memberrybrns7-Jun-09 5:34 
GeneralNot working Pin
rybrns7-Jun-09 5:27
memberrybrns7-Jun-09 5:27 
GeneralRe example Pin
special_me_198120-Oct-08 1:01
memberspecial_me_198120-Oct-08 1:01 
GeneralExcellent!!! Pin
Pentium.Disel6-Apr-08 10:40
memberPentium.Disel6-Apr-08 10:40 
QuestionExample? Pin
crb90003-Jan-08 5:26
membercrb90003-Jan-08 5:26 
AnswerRe: Example? Pin
Kanedogg0811-Jun-08 21:29
memberKanedogg0811-Jun-08 21:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 30 Dec 2007
Article Copyright 2007 by emadmraghib
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid