Question

I’m loading some picture from server by JS after whole page is loaded.
Means by user click i’m loading some image and insert it into DOM.

This image has unique ID, now i want to print out this image ONLY by JS help.
I did style file for printing purpose

* {
    display:none;
    visibility: none;
}
html, body, #out_image_1 {
    background: none;
    display: block !important;
    left: 0px;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 0px;
}

and calling print such

$("#print-button2").click(function() {
    window.print();
    return false;
})

but page is blank (empty) Where i’m wrong ?

Thanks

Answer 1

There are a couple reasons it might not be printing.

• Your image may be contained in another element, but according to your CSS, the parent element is still display:none

  Your CSS will work only if #out_image_1 is a direct child of body:
  http://jsfiddle.net/RXMx8/

  But not if #out_image_1 has any parent elements other than body and html:
  http://jsfiddle.net/RXMx8/1/

I’m betting that’s the issue, but other reasons could be:

• Your browser is not set to print images by default. Using window.print() may skip the “print preview” which could allow you to toggle this setting on.

• Your HTML is OK, but you’re targeting the wrong element.

• You’re out of ink ; )

Even though you’re adding the element with javascript, you should still be able to print it. For debugging, remove the * { display:none; } and see what happens.

^{* By the way, it should be visibility: hidden;; “none” is not a valid value, but it’s redundant with display:none anyways so you don’t need it at all.}