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

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

javascript - Solution fails to pass one test with large inputs? -

function birthdaycakecandles(n, ar) { // complete function ar.sort(); var biggestno = ar[(ar.length - 1)]; var total = 0; (var = 0; < ar.length; i++) { if (ar[i] === biggestno) total++; } return total; } here's problem - https://www.hackerrank.com/challenges/birthday-cake-candles/problem there no need sort array, can problem in o(n) times function birthdaycakecandles(arr, n) { var total = 0; var len = arr.length; (var = 0; < len; i++) { if (ar[i] === n) total++; } return total;
Read more