html - Text align not working under div using javascript print button -
i have placed div on html page , text under center align. custom java script button placed printing under div content. when press button previews text left align. please guide how set or apply css or style div center align. complete html code following written in asp.net. in advance
<%@ page language="c#" autoeventwireup="true" codebehind="webform1.aspx.cs" inherits="margin_issue.webform1" %> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1"> <div id="divforprint" class="mydivtoprint" style="border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px"> <span style="font-size: 10pt; font-weight: bold; font-family: arial">hello, <br /> <span style="color: #0090cb">mudassar khan</span>.<br /> hoping enjoying articles!</span> </div> <br /> <input type="button" value="print" onclick="javascript: printdiv('divforprint')" style="width: 80px; height: 30px;" /> </form> </body> </html> <script type="text/javascript"> function printdiv(divid) { //get html of div var divelements = document.getelementbyid(divid).innerhtml; //get html of whole page var oldpage = document.body.innerhtml; //reset page's html div's html document.body.innerhtml = "<html><head><title></title></head><body>" + divelements + "</body>"; //print page window.print(); //restore orignal html document.body.innerhtml = oldpage; } </script> edit
your code working awesome according need. have little observations need understand. have copied 2 portions code, css , javascript. please see below.
<style> .page_size { border: 1px dotted black; text-align: left; width: 800px; height: 950px; } .instr_date { text-align: right; padding-right: 0px; padding-top: 40px;} .benef_name {text-align: left; padding-left: 50px; padding-top: 50px; } .leftdiv { border: 1px dotted black; text-align: left; padding-left: 0px; } </style> javascript
function printdiv(divid) { var div = document.getelementbyid(divid).outerhtml; var mywindow = window.open('', 'print contents'); mywindow.document.write('<html><head><title>print contents</title>'); mywindow.document.write('<style> .page_size {border: 1px dotted black; text-align: left; width: 800px; height: 950px; }</style>'); mywindow.document.write('<style> .instr_date {text-align: right; padding-right: 0px; padding-top: 40px; }</style>'); mywindow.document.write('<style> .benef_name { text-align: left; padding-left: 50px; padding-top: 50px; }</style>'); mywindow.document.write('<style> .leftdiv {border: 1px dotted black; text-align: left; padding-left: 0px; }</style>'); mywindow.document.write('</head><body>'); mywindow.document.write(div); mywindow.document.write('</body></html>'); mywindow.document.close(); // necessary ie >= 10 mywindow.focus(); // necessary ie >= 10 mywindow.print(); mywindow.close(); } </script> you can see above have written 2 css files, 1 normal under style tag , other injected java script and writing many lines css in java script. have 2 simple questions following:-
1- cannot write 1 css should effect everywhere?.
2- if answer of first question no: how can avoid writing multiple css lines in java script.
many thanks.
have @ following point in right direction. instead of changing entire page , reverting it, open new window print. stop potentially nasty bugs appearing when revert page. having 2 different class names non-print , print divs may useful. can put these in external css file , add css link new window aswell.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title> </title> <style> .mydiv { border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px; } </style> <script type="text/javascript"> function printdiv(divid) { var div = document.getelementbyid(divid).outerhtml; var mywindow = window.open('', 'print contents'); mywindow.document.write('<html><head><title>print contents</title>'); mywindow.document.write('<style>.mydiv {border: 1px dotted black; text-align: center; width: 100%;}</style>'); mywindow.document.write('</head><body>'); mywindow.document.write(div); mywindow.document.write('</body></html>'); mywindow.document.close(); // necessary ie >= 10 mywindow.focus(); // necessary ie >= 10 mywindow.print(); mywindow.close(); } </script> </head> <body> <form id="form1"> <div id="divforprint" class="mydiv"> <span style="font-size: 10pt; font-weight: bold; font-family: arial">hello, <br /> <span style="color: #0090cb">mudassar khan</span>.<br /> hoping enjoying articles!</span> </div> <br /> <input type="button" value="print" onclick="javascript: printdiv('divforprint')" style="width: 80px; height: 30px;" /> </form> </body> </html>
Comments
Post a Comment