Develop Reference

CSS not loading when I call a div to print

I have a div that I would like to print, but when I call it, the CSS doesn't apply. I got the JS from here. It's supposed to print just the table, which it does, but It doesn't apply the styles for the table, and it ends up unformatted.
Expected result
Actual result
My code
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#printableArea {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#printableArea {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
<div id="printableArea">
<h3 class="table-heading" contenteditable="true">My PC Setup</h3>
<table spellcheck="false">
<tr>
<!--https://pcbuilder.net/rigs/aK6rMH/-->
<th>Part</th>
<th>Name</th>
<th>Price</th>
<th>Notes</th>
</tr>
<tr>
<td>Processor</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">AMD Ryzen 9 7950X
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
747</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">
32-Thread<br>16-Core<br>4.5GHz</td>
</tr>
<tr>
<td>Motherboard</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">GIGABYTE X670E AORme Master
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
542.84</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Socket: AM5
<br>RAM Slots: 4<br>Chipset: AMD X670E</td>
</tr>
<tr>
<td>CPU Cooler</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Cooler Master Hyper 212 EVO V2</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
90</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Side Panel: Tempered Glass, Steel<br>Cabinet Type: ATX Full Tower</td>
</tr>
<tr>
<tr>
<td>Case</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">NZXT H510 - CA-H510B-B1
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
1,584.90</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Memory: 24GB
<br>Chipset: GeForce RTX 3090 Ti<br>Interface: PCIe 4.0 x16</td>
</tr>
<tr>
<td>Graphics card</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Nvidia RTX 3090 TI Founders Edition</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
51.44</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan Speed: 650RPM-1800RPM
<br>Noise Level: 8-27dBA</td>
</tr>
<tr>
<td>RAM</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">G.Skill Trident Z5 RGB Series 32GB 2 x 16GB (x2)</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
564.42</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">RAM Size: 64GB
<br>RAM Type: DDR5</td>
</tr>
<tr>
<td>Storage (SSD)</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Samsung EVO 970 1TB
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
167.99</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 1 TB
<br>Type: SSD<br>Cache Memory: 1024 MB</td>
</tr>
<tr>
<td>Storage (HDD)</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Seagate BarraCuda 2TB
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
53.49</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 2 TB
<br>Type: HDD<br>RPM: 7200 RPM<br>Interface: SATA 6 Gb/s<br>Cache Memory: 256 MB</td>
</tr>
<tr>
<td>Case Cooler</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">ARCTIC P12
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
5.73</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan RPM: 1800 RPM
<br>Airflow: 56.3 CFM<br>Noise Level: N/A</td>
</tr>
<tr>
<td>Power Supply</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Thermaltake Smart 430W
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
98.95</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Power: 430W
<br>Efficiency: 80+</td>
</tr>
<tr>
<td>Monitor</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Acer SB220Q Bi 21.5
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
170</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Screen Size: 21.5"
<br>Response Time: 4ms<br>Resolution: 1920 x 1080<br>Refresh Rate: 75 Hz</td>
</tr>
<tr>
<td class="total1"><b>Total</b></td>
<td class="total1"></td>
<td class="total1"></td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
<b>4,077</b>
</td>
</tr>
</table>
</div>
<br>
<input type="button" onclick="printDiv('printableArea')" value="Print your setup" />
How can I fix this? Thanks

I faced similar problem while printing table using similar javascript function. You have to provide all css to the print window as well. I am pasting my code here. You will have to modify that to suit your requirements.
function PrintElem(elem)
{
var orgPrint = document.getElementById(elem).innerHTML;
document.querySelectorAll(".no-print").forEach(el => el.remove()); // removes some elements from the table that are not to be pronted
var toPrint = document.getElementById(elem).innerHTML;
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>My Title</title>');
mywindow.document.write('<style>');
mywindow.document.write('* { font-family: Roboto, \'Segoe UI\', Tahoma, sans-serif; }');
mywindow.document.write('#invTable { border-collapse: collapse; width: 100%; }');
mywindow.document.write('#invTable td, #invTable th { border: 1px solid #ddd; padding: 8px; }');
mywindow.document.write('.text-end { text-align: right !important; }');
mywindow.document.write('.text-center {text-align: center !important; }');
mywindow.document.write('body { display: flex; flex-direction: column;}');
mywindow.document.write('.print-footer { margin-top: auto; position:fixed; bottom:0;text-align: center; width:100%; border-top: 1px solid #ddd; }');
mywindow.document.write('</style>');
mywindow.document.write('</head><body >');
mywindow.document.write('<br/><br/><br/>');
mywindow.document.write(toPrint);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
document.getElementById(elem).innerHTML = orgPrint; // restores the table as is
return true;
}

Displaying a table n times according to user input then having function to show/hide table according to row clicked

I want a table (table1) to be displayed n times according the number entered by the user in the input form. Then for each instance of this table the user should be able to click on each row and another relevant table should be displayed.
So far I can produce table1 n times according to user input. But then the function myFunction_disease is only applying to the first iteration of table1. I want each copy of table1 to controlled independently depending on what the user clicks.
Here is jsfiddle: https://jsfiddle.net/k0x4y6d2/1/
<div class="user_input_outer" id="num_of_conditions">
<div class= "content_text"> Number of conditions:</div>
<div class="user_input">
<input type="number" id="numb_conditions" onchange="myFunction_num_conditions();" min="2" max="1"> </div>
</div>
<div id=condition_detail>
</div>
function myFunction_num_conditions(x) {
container = document.getElementById('numb_conditions')
var number = container.value
for (var i = 0; i < number; i++) {
count = i+1
document.getElementById("condition_detail").innerHTML += 'Condition' + (i + 1);
let newdiv = document.createElement('div');
newdiv.innerHTML = "<table id=table1 class=table> <tr onclick='myFunction_disease(this)'><td>cardiac </td></tr> <tr onclick='myFunction_disease(this)'><td> respiratory </td></tr> <tr onclick='myFunction_disease(this)'><td>infection</td></tr></table><table id=table2 class=table> <tr onclick='myFunction_cardiac(this)'><td>MI </td></tr> <tr onclick='myFunction_cardiac(this)'> <td> valve disease </td></tr> <tr 'myFunction_cardiac(this)'><td>CCF</td></tr></table> <table id=table3 class=table> <tr onclick='myFunction_respiratory(this)'><td>COPD </td></tr> <tr onclick='myFunction_respiratory(this)'><td> asthma </td></tr> <tr onclick='myFunction_respiratory(this)'><td>bronchiectasis</td></tr></table><table id=table4 class=table> <tr onclick='myFunction_infectious(this)'><td>TB </td></tr> <tr onclick='myFunction_infectious(this)'><td> pneumonia </td></tr> <tr onclick='myFunction_infectious(this)'><td>cellulitis</td></tr></table>"
document.getElementById('condition_detail').appendChild(newdiv);
}
}
function myFunction_disease(x) {
const disease = document.querySelector("#table1");
const cardiac = document.querySelector("#table2");
const respiratory = document.querySelector("#table3");
const infectious = document.querySelector("#table4");
if (x.rowIndex== 0){
cardiac.style.display= "table"
respiratory.style.display= "none"
infectious.style.display = "none"
}
else if (x.rowIndex== 1){
cardiac.style.display= "none"
respiratory.style.display= "table"
infectious.style.display = "none"
}
else if (x.rowIndex== 2){
cardiac.style.display= "none"
respiratory.style.display= "none"
infectious.style.display = "table"
}
}
div.user_input {
display: table-cell;
width: 150px;
font-family: sans-serif;
font-size: 12;
line-height: 10px;
}
div.user_input > input {
width: 140px;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 14;
line-height: 19px;
}
.user_input:focus {
outline: 0 !important;
}
.table {
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
.table td{
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
#table2 {
display: none;
}
#table3 {
display: none;
}
#table4 {
display: none;
}

That's what you need. For adding more buttons and tables you can just simply add a new table and give a new class table$ (where $ is number, example: table4) and add a new button with data-table-show=$ attribute. That's all😉.
// Creating conditions
const numInput = document.getElementById('num'),
conditionForm = document.getElementById('condition-form'),
tablesContainer = document.getElementById('tables'),
conditionText = tablesContainer.innerHTML;
conditionForm.onsubmit = async function(e) {
e.preventDefault();
const numValue = Number(numInput.value);
await (tablesContainer.innerHTML += conditionText.repeat(numValue));
addEventListenersToButtons();
}
// Working with table filtering
function addEventListenersToButtons() {
let buttons = document.querySelectorAll('#tables tr.btn');
buttons.forEach(function(button, i) {
button.onclick = function() {
const tables = button.parentNode.parentNode.parentNode.querySelectorAll('.data-table');
tables.forEach(table => {
if (table.classList.contains(`table${button.dataset.tableShow}`)) {
table.classList.remove('hide')
} else {
table.classList.add('hide')
}
});
}
})
}
addEventListenersToButtons();
.tables-group table {
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
.tables-group table td {
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
.data-table.hide {
display: none;
}
<div class="container">
<form id="condition-form">
<label for="num">Number of conditions</label>
<input type="number" name="conditions" id="num" min="0">
<button type="submit" name="conditions">Submit</button>
</form>
<hr>
<div id="tables">
<div class="condition">
<div class="tables-group">
<table>
<tr class="btn cardiac" data-table-show="1">
<td>cardiac</td>
</tr>
<tr class="btn respiratory" data-table-show="2">
<td>respiratory</td>
</tr>
<tr class="btn infection" data-table-show="3">
<td>infection</td>
</tr>
</table>
<table class="data-table table1 hide">
<tr>
<td>MI</td>
</tr>
<tr>
<td>valve disease</td>
</tr>
<tr 'myFunction_cardiac(this)'>
<td>CCF</td>
</tr>
</table>
<table class="data-table table2 hide">
<tr>
<td>COPD</td>
</tr>
<tr>
<td>asthma</td>
</tr>
<tr>
<td>bronchiectasis</td>
</tr>
</table>
<table class="data-table table3 hide">
<tr>
<td>TB</td>
</tr>
<tr>
<td>pneumonia</td>
</tr>
<tr>
<td>cellulitis</td>
</tr>
</table>
</div>
</div>
</div>
</div>

Multiplying user input using html and JavaScript

I am noob posting for the first time. I am creating an opioid calculator that converts doses of different opioid to a standard. I am familiar with html and have been studying OOP with C#. Working with Javascript for first time. I have tried many ways and cannot get the "calculate(x)" function to return the value to the specified element. The function should be called when text associated with ID="r2" is changed (onchange event) by the user. The value should be displayed in the element with Id="MED-bup-tab". The conversion factor is given in the onchange="calculate(30)" event. Any suggestions are appreciated.
Here is what I have:
function calculate(x) {
var my1 = x;
var my2 = document.getElementById('r2').value;
document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 7px;
padding: 5px 2.5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 7px;
font- weight: normal;
padding: 5px 2.5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg .tg-yw4l {
vertical-align: top
}
<SCRIPT language="javascript" src="date.js"></SCRIPT>
<form>
<table>
<tr>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
</tr>
<tr>
<td><input class="tg-yw41" type=”text” name=”buprenorphine-tablet-film” value=Burpenorphine id="med” disabled></td>
<td>'TEXT" </td>
<td><input class="tg-yw41" type=”text” name=”dose” value="" placeholder="0" Id="r2" onchange="calculate('30')"></td>
<td><input Id="MED-bup-tab" type=”text” name=”zero” value=""></td>
</tr>
</table>
</form>

Issue is at below line:
document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);
Instead of .innerTHTML use .value. It will work.
Below is working example:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="javascript" src="date.js"></SCRIPT>
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:7px;padding:5px 2.5px;border- style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:7px;font- weight:normal;padding:5px 2.5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-yw4l{vertical-align:top}
</style>
</head>
<body>
<form>
<table>
<tr>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
</tr>
<tr>
<td><input class="tg-yw41" type=”text” name=”buprenorphine-tablet-film” value=Burpenorphine id="med” disabled></td>
<td>'TEXT"</td><td><input class ="tg-yw41" type=”text” name=”dose” value="" placeholder="0" Id="r2" onchange="calculate('30')"></td>
<td ><input Id="MED-bup-tab" type=”text” name=”zero” value="" ></td>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate(x)
{
var my1 = x;
var my2 = document.getElementById('r2').value;
document.getElementById('MED-bup-tab').value = parseInt(my1) * parseInt(my2);
}
</script>
</body>
</html>

iFrame not loading in Chrome unless window is resized

I have a web page as below which has Invoice numbers on the left side and when a user clicks on it, its details are loaded in iframe(id='invoiceFrame') which works fine in IE but in Chrome iframe is not loaded unless the window is resized
Google Chrome Version 42.0.2311.90 (Official Build) m (32-bit)
<script type="text/javascript">
function getUrlParameter(URL, param){
var paramTokens = URL.slice(URL.indexOf('?') + 1).split('&');
for (var i = 0; i < paramTokens.length; i++) {
var urlParams = paramTokens[i].split('=');
if (urlParams[0].endsWith(param)) {
return urlParams[1];
}
}
}
String.prototype.endsWith = function(pattern) {
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
};
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
jQuery(document).ready(function () {
jQuery("#mainFrame").hide();
jQuery('#invoiceList tr:not(:first-child)').click(function(e){
jQuery(".message").hide();
e.preventDefault();
var invoiceNumber = jQuery(this).find("td").eq(0).text();
var url = window.location.href;
var lipId = getUrlParameter(url, 'lipId')
var invURL = '/CP/Invoice/InvoiceLineErrors.do?lipId='+lipId+'&invNum='+invoiceNumber;
console.log('invoiceNumber '+invURL);
jQuery("#mainFrame").show();
document.getElementById("mainFrame").src =invURL;
});
});
</script>
<style>
h2.message{text-align: center; color: #FDFDFD; font-size: 1.1em; background: #708fc3; }
#invoiceList{ float: left; width: 15%; overflow-x:auto; }
#invoiceFrame{float: right; width: 83.5%; margin-bottom: 0em !important; }
td error { color: red; font-size: 100%;}
tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;}
table#lines th { background-color : grey; color: white; width:100%}
table {margin-bottom: 2em; border-bottom: 2px solid #ebebeb; empty-cells: show; border-collapse: collapse; }
table#lines td { text-align: center; width:100%}
iframe { float: left; width: 100%; height =300px;
}
</style>
</head>
<body id='foo'>
<div class="ui-widget">
<center><h1> Invoice Error Details For ePacket P00000080235</h1></center>
<div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-size: 1.1em; "><span>Invoices</span></h2>
<table cellspacing='0' id='header' class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Invoice Total</th>
</tr>
<tr class = 'errortrue'>
<td>2015.04.08.001</td>
<td>59.97</td>
</tr>
</table>
</div>
<!-- <div class='panel ui-widget-content' id="invoiceDetails">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Select the Invoice Number on the left to view the error details</span></h2>-->
<h2 class='message'><span>Select the Invoice Number on the left to view the error details</span></h2>
<div class='panel ui-widget-content' id="invoiceFrame"><iframe src="" id="mainFrame" name="mainFrame" scrolling="no" class='panel ui-widget-content' onload='javascript:resizeIframe(this);'></iframe>
</div>
</div>
</body>
Below is the content of the iframe
<script type="text/javascript">
jQuery('table#lines tr').each(function(){
if (jQuery(this).html() == '') {
jQuery(this).hide();
}
});
</script>
<style>
#invoice {padding: 0;}
#invoiceErrors {overflow-x: auto; overflow-y: auto;}
tbody td{ border-top: 2px solid #efefef; border-bottom: 0px !important ;}
td.error { text-align: left; color: #c33; font-size: 100%; background-image: none !important; padding-left : 0; border-bottom: 2px solid #0891F4; white-space: nowrap;}
tr.errortrue { color: #c33; font-size: 100%; font-weight: bold; white-space: nowrap;}
table {empty-cells: show; border-collapse: collapse; }
table#lines td { text-align: left;}
</style>
</head>
<body id='invoice'>
<div id="invoiceErrors">
<div class='panel ui-widget-content' id="invoiceHeaders">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: Tahoma,Arial,sans-serif; font-size: 1.2em;"><span>Header Details</span></h2>
<table class="ui-widget" id="headers">
<tr>
<th>Invoice Number</th>
<th>Matter Number</th>
<th>Invoice Total</th>
<th>Invoice Tax Total</th>
<th>Invoice Net Total</th>
</tr>
<tr class='errortrue'>
<td>2015.04.08.001</td>
<td>MAT-2</td>
<td>59.97</td>
<td>59.97</td>
<td>59.97</td>
</tr>
<tr ><td class = 'error' style="padding-bottom: 4%;">
Line : 1 Invoice tax total does not foot Reported = (0.0) Calculated = (1.0)<br/>
Line : 1 Invoice Taxable Amount does not foot Reported = (59.97) Calculated = (58.97)<br/>
</td></tr>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceLines">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: Tahoma,Arial,sans-serif; font-size: 1.2em;"><span>Invoice Line Items</span></h2>
<table class="ui-widget" id="lines">
<tr>
<th>Line Item Number</th>
<th>Line Item Date</th>
<th>Unit Cost</th>
<th>Number of Units</th>
<th>Line Item Total</th>
</tr>
<tr class='errortrue'>
<td>1</td>
<td>20150402</td>
<td>19.99</td>
<td>3</td>
<td>59.97</td>
</tr>
<tr>
<td colspan="9" class='error' style="padding-bottom: 6%;">
Line : 1 MATH ERROR: ((19.99*3.0) - (0.0)) * (1.0) != 1.0 variance = 58.97<br/>
Line : 1 MATH ERROR: (19.99*3.0) - (0.0) + (1.0) != 59.97 variance = 1.0<br/>
</td>
</tr>
</table>
</div>
</div>
</body>
Can someone please help me with the iframe issue?

Try adding position to iframe
iframe { float: left; width: 100%; height :300px; position:relative}

I used this workaround to make it work:
var iframe = $('<iframe>', {
src: url,
frameborder: 0,
load: function () {
// fixes Chrome not painting iframe until window resizes
// https://bugs.chromium.org/p/chromium/issues/detail?id=481922
iframe.contents().find('body').hide(0).show(0);
// end repaint fix
}
});

adding this to the css customizer fixed our issue:
iframe {width:100%!important;}

add auto-increment or timestamp - javascript, jstorage

I'm trying to implement jstorage on my website. I'm new to JavaScript and thus need some help here.
jstorage requires Key and Value to be given for each saved row.
I would like Key to be filled in automatically with either with auto-increment value or timestamp, whichever is easier - values need to be unique.
Here is the whole code:
<!DOCTYPE html>
<html>
<head>
<title>jStorage - simple JavaScript plugin to store data locally</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{
font-family: Sans-serif;
font-size: 13px;
color: #333;
background: blue;
}
a {
color: red;
}
table{
border: 1px solid white;
;
}
h1{
padding-top: 50px;
font-size: 26px;
font-weight: bold;
border-bottom: 3px solid #CDEB8B;
}
h2{
font-size: 18px;
font-weight: bold;
border-top: 1px solid #EEE;
border-bottom: 3px solid #CDEB8B;
margin-top: 20px;
padding-top: 20px;
}
h3{
font-size: 14px;
font-weight: bold;
color: red;
}
td{
padding: 3px;
border-right: 1px solid #CDEB8B;
border-bottom: 1px solid #CDEB8B;
}
thead{
background: url(img/gradientform.png) repeat-x; ;
color: white;
}
.container{
width: 190px;
margin: 10px auto;
}
.delimg {
background: url(img/details_close.png) no-repeat;
width: 20px;
height: 20px;
}
.addimg {
background: url(img/details_open.png) no-repeat;
width: 20px;
height: 20px;
}
</style>
<script src="js/jquery.js"></script>
<script src="static/jquery.json-2.3.js"></script>
<script src="static/jstorage.js"></script>
<script>
function insert_value(){
var row = document.createElement("tr"),
key = document.getElementById('key').value,
val = document.getElementById('val').value;
if(!key){
alert("KEY NEEDS TO BE SET!");
document.getElementById('key').focus();
return;
}
$.jStorage.set(key, val);
document.getElementById('key').value = "";
document.getElementById('val').value = "";
reDraw();
}
function get_value(){
var value = $.jStorage.get(document.getElementById("key2").value);
alert(value);
document.getElementById('key2').value = "";
}
function reDraw(){
var row, del, index;
var rows = document.getElementsByTagName("tr");
for(var i=rows.length-1; i>=0; i--){
if(rows[i].className == "rida"){
rows[i].parentNode.removeChild(rows[i]);
}
}
index = $.jStorage.index();
for(var i=0; i<index.length;i++){
row = document.createElement("tr");
row.className = "rida";
var t = document.createElement("td");
t.innerHTML = index[i];
row.appendChild(t);
t = document.createElement("td");
t.innerHTML = $.jStorage.get(index[i]);
row.appendChild(t);
del = document.createElement("a");
del.href = "javascript:void(0)";
del.innerHTML = "<div class='delimg'></div>";
(function(i){
del.onclick = function(){
$.jStorage.deleteKey(i);
reDraw();
};
})(index[i])
t = document.createElement("td");
t.appendChild(del)
row.appendChild(t);
document.getElementById("tulemused").appendChild(row);
}
}
</script>
<!-- Exception Hub start -->
<script type="text/javascript">
var ehHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + ehHost + "js.exceptionhub.com/javascripts/eh.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
ExceptionHub.setup("b83fb652800fa143596deb6600fd9a2d", 116, 'production');
</script>
<!-- Exception Hub end -->
</head>
<body>
<div class="container">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<thead>
<tr><td width="120">KEY</td><td>VALUE</td><td width="50"> </td></tr>
</thead>
<tbody id="tulemused"></tbody>
<tfoot>
<tr>
<td><input type="text" id="key" name="key" value="" style="width: 110px;" /></td>
<td><input type="text" id="val" name="val" value="" style="width: 98%" /></td>
<td><div class="addimg"></div></td>
</tr>
<tr>
<td><input type="text" id="key2" name="key2" value="" style="width: 110px;" /></td>
<td>Clicking "GET" alerts the value for provided key with the method <em>$.jStorage.get(key)</em></td>
<td>GET</td>
</tr>
</tfoot>
</table>
<script>reDraw()</script>
</body>
</html>

JavaScript:
function uniqid()
{
var newDate = new Date;
return newDate.getTime();
}