javascript - CSS not working while checking preview -
1) have form , displaying preview of form in next tab. set css after click on preview button, css not reflecting on fields.
2) there other way display tab in new tab instated of opening window?
/*form preview*/ function printpreview() { var toprint = document.getelementbyid('from_privew'); var popupwin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px'); popupwin.document.open(); popupwin.document.write('<html><title>::print preview::</title><link rel="stylesheet" type="text/css" href="print.css" media="screen"/></head><body>') popupwin.document.write(toprint.innerhtml); popupwin.document.write('</div></body></html>'); popupwin.document.close(); }@media print{ input[type="text"], input[type="email"] { border: 1px solid #000; padding: 05px; border-radius: 05px; } input[type="submit"], { background: #0088cc; border: none; border-radius: 05px; padding: 08px 25px; color: #fff; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="from_privew"> <form> <input type="text" name="name"> <input type="email" name="email"> <input type="submit" name="submit"> <a href="#" onclick="printpreview()">preview</a> </form> </div>
put css in separated file print.css , remove @media print:
input[type="text"], input[type="email"] { border: 1px solid #000; padding: 05px; border-radius: 05px; } input[type="submit"], { background: #0088cc; border: none; border-radius: 05px; padding: 08px 25px; color: #fff; } then modify javascript include reference file:
function printpreview() { var toprint = document.getelementbyid('from_privew'); var popupwin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px'); popupwin.document.open(); popupwin.document.write('\ <html> \ <head> \ <title>::print preview::</title> \ <link rel="stylesheet" type="text/css" href="print.css" media="screen"/> \ <link rel="stylesheet" type="text/css" href="style.css" media="screen"> \ </head> \ <body> \ <div>') popupwin.document.write(toprint.innerhtml); popupwin.document.write('\ </div> \ </body> \ </html>'); popupwin.document.close(); } for second part, whether page open in new window or new tab depends on browser (or browser settings). think can not this.
Comments
Post a Comment