Home/ Questions/Q 9133547
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:30:26+00:00

I have a JS function which prints the contents of a particular div called

  • 0

I have a JS function which prints the contents of a particular div called divDisplay of my html page ( the half bottom part of the page ), when someone clicks a button. The contents of this div are received dynamically ( ajax ) when the user interacts with the page. Printing works perfectly in FF,OPERA,IE but the data is scrambled, without color and out of the correct position ( as if there is no css formatting ) in chrome and safari in the pop up window to be printed.

function jsPrintDiv(m) {

    glblPopupWindow = window.open("", "PrintWindow", "width=1024,height=768,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
    glblPopupWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body><div name="divDisplay" id="divDisplay">' + document.getElementById(m).innerHTML + '</div></body></html>');
    glblPopupWindow.document.close();
    glblPopupWindow.document.getElementById("divDisplay").style.top = "0px";

    glblPopupWindow.focus();
    glblPopupWindow.print();
    glblPopupWindow.close();

}

styles.css is the same css file that the original html page where the printing is taking place has. the same goes for the doctype.

the css of divDisplay:

#divDisplay {
    position: absolute;
    left: 0.2%;
    top: 305px;
    width: 99.6%;
    bottom: 0.5%;
    /* height: expression(document.body.offsetHeight - 314 + "px"); */
    overflow: auto;
    background-color: #AACCFF;
    font-family: palatino linotype;
    font: palatino linotype;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Any ideas what i may be doing wrong? thanks in advance!

EDIT:

correct data in pop window to be printed ( firefox ):
http://img208.imageshack.us/img208/8195/ffprint.jpg

scrambled data in pop window to be printed ( chrome ):
http://img152.imageshack.us/img152/6108/chprint.jpg

EDIT2:
if i comment out the

glblPopupWindow.print();

line, chrome displays it correctly. dunno if that helps.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The firefox window that you show, isn’t the print preview from firefox. The screen shot is the actual pop-up window, that’s why it looks correct. If you were to open the page in firefox, and go to ‘file’-> ‘print preview’ I bet it would look very similar to what you are seeing in Chrome.

    When you print a web page it won’t always look the same as it does when you view it. You can add a print style sheet for the page that should be printed, or you can add the print styling to an existing sheet. In your CSS specify styles for printing:

    @media print {
    /* Your Styles Here */
}

    Also, browsers can interpret printing web pages differently. Defining good css for printing a site is a real pain. Good luck.

    • 0