Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Printer-Friendly PopUp Window

Posted on 2006-05-09
9
Medium Priority
?
886 Views
Last Modified: 2009-01-05
I have a page that displays a table with a lot of stats.  I want to create a print button which will let the user print the stats without having to print the rest of the page.

It seems the best thing to do would be to create a pop-up window which generates a more printer-friendly version of the stats, and then calls the window.print() function.

Creating a popup window is somewhat problematic however.  When I write to the new window using document.write(), the pop-up window appears but starts loading endlessly on Firefox.  On IE this doesn't happen.  Secondly, trying to print the new window doesn't work at all on IE, but works on FF.

Here's the code:

function printWindow() {
      newwindow=window.open(url,'name','height=200,width=150');
      if (window.focus) {newwindow.focus()}
      newwindow.document.write("<h1>Test</h1>");
      newwindow.print();
}

Is there a way to get consistent cross-browser behavior here?
0
Comment
Question by:chsalvia
  • 6
  • 3
9 Comments
 
LVL 10

Expert Comment

by:Nushi
ID: 16645790
u need to use CSS to accomplish that.
I will paste a sample in few minutes.
you open a pop up and set the CSS using medai and create CSS for printing.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 16645934
0
 
LVL 10

Assisted Solution

by:Nushi
Nushi earned 500 total points
ID: 16645944
That the JS u need to to id (link is inside the document)

/*

This script was created by Ian Lloyd (http://lloydi.com/). I'd appreciate it
if you could keep this comment in the script if you choose to use it (albeit
in an amended form.

The original blog entry relating to this can be found here: http://tinyurl.com/p9tqb.

The addEvent function comes courtesy of Scott Andrew: http://tinyurl.com/qcmrd

*/
function addEvent(elm, evType, fn, useCapture)
{
            if(elm.addEventListener)
            {
                  elm.addEventListener(evType, fn, useCapture);
                  return true;
            }
            else if (elm.attachEvent)
            {
                  var r = elm.attachEvent('on' + evType, fn);
                  return r;
            }
            else
            {
                  elm['on' + evType] = fn;
            }
}

function addPrintLinks()
{
var el = document.getElementsByTagName("div");
for (i=0;i<el.length;i++)
      {
      if (el[i].className=="print_section")
            {
            var newLink = document.createElement("a");
            var newLink2 = document.createElement("a");
            var newLinkText = document.createTextNode("print this section only");
            var newLinkText2 = document.createTextNode("print the whole page");

            var newLinkPara = document.createElement("p");
            newLinkPara.setAttribute("class","printbutton");
            
            //set up the 'print this section' link
            newLink.setAttribute("href","#");
            var btId = "printbut_" + el[i].id;
            newLink.setAttribute("id",btId);
            newLink.appendChild(newLinkText);
            newLink.setAttribute("href","#");
            newLinkPara.appendChild(newLink);
            
            //set up the print all link
            newLink2.setAttribute("href","#");
            var bt2Id = "printall_" + el[i].id;
            newLink2.setAttribute("id",bt2Id);
            newLink2.appendChild(newLinkText2);
            newLink2.setAttribute("href","#");
            newLinkPara.appendChild(newLink2);

            //add the behaviours for the new links
            newLink.onclick = togglePrintDisplay;
            newLink.onkeypress = togglePrintDisplay;
            newLink2.onclick = printAll;
            newLink2.onkeypress = printAll;

            //insert the para and the two links into the DOM
            el[i].appendChild(newLinkPara);
            
            }
      }
}

function togglePrintDisplay(e)
{
var whatSection = this.id.split("_");
whatSection = whatSection[1];
var el = document.getElementsByTagName("div");
for (i=0;i<el.length;i++)
      {
      if (el[i].className.indexOf("section")!=-1)
            {
            el[i].removeAttribute("className");
            if (el[i].id==whatSection)
                  {
                  //show only this section for print
                  el[i].setAttribute("className","print_section print");
                  el[i].setAttribute("class","print_section print");
                  }
            else
                  {
                  //hide the sections from print-out
                  el[i].setAttribute("className","print_section noprint");
                  el[i].setAttribute("class","print_section noprint");
                  }
            }
      }

if (window.event)
      {
      window.event.returnValue = false;
      window.event.cancelBubble = true;
      }
else if (e)
      {
      e.stopPropagation();
      e.preventDefault();
      }

window.print();
}

function printAll(e)
{
var el = document.getElementsByTagName("div");
for (i=0;i<el.length;i++)
      {
      if (el[i].className.indexOf("print_section")!=-1)
            {
            el[i].setAttribute("className","print_section print");
            el[i].setAttribute("class","print_section print");
            }
      }
if (window.event)
      {
      window.event.returnValue = false;
      window.event.cancelBubble = true;
      }
else if (e)
      {
      e.stopPropagation();
      e.preventDefault();
      }
window.print();
}
addEvent(window, 'load', addPrintLinks, false);
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 16648038
And here it is without the massive overhead:
<script>
function printWindow(divId) {
     newwindow=window.open('','newwin','height=200,width=150');
     newwindow.document.write('<bo'+'dy onLoad="window.focus(); window.print()">'+document.getElementById(divId).innerHTML+'</body>');
     newwindow.document.close(); // you DEFINITELY missed this one
}
</script>

<div id="div1">This will be printed</div>
<a href="#" onClick="printWindow('div1'); return false">Print this</a>
<hr>
<div id="div2">This will be printed too</div>
<a href="#" onClick="printWindow('div2'); return false">Print this</a>
0
 
LVL 10

Expert Comment

by:Nushi
ID: 16648235
it should be:

newwindow.close();

Nushi
0
 
LVL 10

Expert Comment

by:Nushi
ID: 16648242
and be aware that on IE:
window.print()"  - calling ActiveX so if user has blocked activeX it will not work.

Nushi.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16648508
No it should NOT be newwindow.close()
it MUST be
 newwindow.document.close();
to FINALISE the newwindow.document.write()

It is mandatory on many browsers to do this to tell the browser you finished your document.writes

Michel
0
 
LVL 10

Expert Comment

by:Nushi
ID: 16648522
so it should be:

newwindow.document.close();
newwindow.close();


Nushi.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16649033
Nonono... You cannot close the window until after the print dialog has been shown

You can change to
 newwindow.document.write('<bo'+'dy onLoad="window.focus(); window.print()">'+
'<style media="print">.noPrint { display:none }</style>'+
document.getElementById(divId).innerHTML+
'<hr class="noPrint"><a class="noPrint" href="#" onClick="window.close(); return false">Close</a>'+
'</body>');
 





0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 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