i am doing a project for my school, why is it my logo doesn't included in my print layout?. I am populating my <div class="cliniclogo" style="background-image: url()">
through ajax. and now i want to include it in my printing layout. How can i include this?
i tried my code below, but this doesn't include my printing logo.
Here is my code:
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p class="printingdate">Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12 justifypar">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label>
was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label>
with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for
<label id="cert_physician"></label> days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->
</div><!-- border -->
Now as you can see in my javascript printing, i put a css there which is to display my logo like this:
'.cliniclogo { ' +
'display: block;' +
'}' +
now, here is my css in printing using javascript (full code):
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'@page {' +
'size: landscape;' +
'}' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'border-style: double;' +
'}' +
'.header-cert{' +
'text-align: center;' +
'margin-top: 28px; ' +
'padding: 0px; ' +
'}' +
'.certheader { ' +
'font-size:20px;' +
'margin:0px;' +
'padding:0px;' +
'}' +
'.medcert { ' +
'font-size:38px;' +
'font-weight: bold;' +
'text-align: center;' +
'margin: 58px 58px;' +
'word-spacing: 12px;' +
'}' +
'.printingdate { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-bottom: 53px;' +
'}' +
'.certmarg { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'}' +
'.startindent { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-right: 14px;' +
'}' +
'#cert_physician_signatory { ' +
'font-size:21px;' +
'font-weight: bold;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-top: 95px;' +
'}' +
'.justifypar { ' +
'text-align: justify;' +
'text-justify: inter-word;' +
'}' +
'.cliniclogo { ' +
'display: block;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}