CODEWITHSUNDEEP
javascriptjquerycssprintingmedia-queries
Swapna
Swapna

Reputation: 11

Issue with Print in Media Queries

Code:

HTML

    <input type="button" onclick="functionPrint()"  value="Print"/>

Javascript

    function functionPrint()
    {    
    var dydiv = document.createElement('div');
    dydiv.id='printcontent';
    mydiv.innerHTML="HI";
     window.print();   
    }

CSS

    #printcontent{
          display: none;
    }

        @media print {
            body * {
               display: none;
            }
            #printcontent, #printcontent * {
               display: block !important;
            }
            #printcontent {
               position: absolute;
               left: 0;
               top: 0;
            }
        }

Update:

Demo:http://jsfiddle.net/Ryh3G/4/

I'm printing a dynamic div using the media queries. It is printing white page. Any help would be appreciated. Thanks.

Upvotes: 0

Views: 714

Answers (3)

Christina
Christina

Reputation: 34642

If body * as you have in your css reprinted is display:none, then the page will be printed empty. #printcontent is not outside of the body since the body encompasses all of the page. Instead be more specific with your print css. Look at Boilerplate's print media query for a good starting point. 

 @media print {
        body * {
           display: none; // THIS WILL HIDE ALL CONTENT BETWEEN THE BODY TAGS so your page will be empty.
        }
        #printcontent, #printcontent * {
           display: block !important;
        }
        #printcontent {
           position: absolute;
           left: 0;
           top: 0;
        }
    }

Upvotes: 0

Kamlesh
Kamlesh

Reputation: 529

Please change function as shown below

function functionPrint(){  
  var dydiv = document.createElement('div');
  dydiv.id='printcontent';
  dydiv.innerHTML="HI";
  window.print();   
}

Upvotes: 0

Maulik patel
Maulik patel

Reputation: 1601

Here, Undefined variable mydiv, use dydiv

Upvotes: 1

Related Questions