CSS not loading when I call a div to print - javascript
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;
}
Related
CSS messed up in mobile view
I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}
If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}
Adjust Border Radius on button when div is collapsed/hidden/not active
I am using the Collapsible divs code from here: https://www.w3schools.com/howto/howto_js_collapsible.asp
And I had asked here how to make the divs visible by default & that was answered here: Make Collapsible Divs NOT hidden by default
But, now I have a problem with my CSS because, I have added border-radius to mine. So when it's open, it works fine - it has a rounded border around the whole .collapsible/.inside pair, but when it's closed I don't know how to have the rounded border on the .container button (because how I have the code makes the bottom of the collapsible not rounded) - how to I give "not active" CSS code, I guess?
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (!content.style.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #007784;
color: white;
cursor: pointer;
width: 97%;
border:2px solid #000000;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
text-align: center;
outline: none;
font-size: 16px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:3px;
padding:2px;
}
.collapsible:hover {
background-color: #0066FF;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
margin-top:3px;
}
.active {
background-color: #007784;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
margin-top:3px;
}
.inside {
padding: 0;
width: 97%;
display: block;
overflow: hidden;
border-top:0px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #FFFFFF;
border-radius:0px 0px 15px 15px;
}
/*unrelated coding*/
table.trials {border:0; border-collapse:collapse; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; background-color:#000000; border-radius:15px; }
table.trials tr td {border: 1px solid #000000;}
table.trials tr td:first-child {border-left:0;}
table.trials tr td:last-child {border-right:0;}
table.trials tr:last-child td {border-bottom:0;}
.trials tr:last-child td:first-child {border-radius:0px 0px 0px 13px;}
.trials tr:last-child td:last-child {border-radius:0px 0px 13px 0px;}
td {background-color:#FFFFFF;}
td.NA {background-color:#CCCCCC;}
.divider td {height:3px; padding:0px; background-color:#000000;}
<button type="button" class="collapsible">CH — Conformation Champion <span style="font-size:14px; font-weight:normal; font-style:italic;">total: 15 pts / 3 Majors</span></button>
<div class="inside" style="padding:0;"><!------------CH - Conformation Champion------------------------------------------------------>
<table class="trials" cellspacing="0" cellpadding="2px" style="width:100%; margin:0; border-radius:0;">
<tr><!------DATE: Weekday — Month ##, YYYY------->
<td width="25%">Saturday – August 20, 2016</td>
<td width="25%">Sunday – September 11, 2016</td>
<td width="25%">Sunday – January 22, 2017</td>
<td width="25%">Sunday – May 7, 2017</td>
</tr>
<tr><!------HOST CLUB---------------------------------->
<td width="25%">Olympic Kennel Club</td>
<td width="25%">Eugene Kennel Club</td>
<td width="25%">Tualatin Kennel Club</td>
<td width="25%">Olympia Dog Fanciers Association</td>
</tr>
<tr><!------LOCATION: Venue — City, State-------->
<td width="25%">Enumclaw, WA</td>
<td width="25%">Brownsville, OR</td>
<td width="25%">Portland, OR</td>
<td width="25%">Elma, WA</td>
</tr>
<tr><!------JUDGE-------------------------------------->
<td width="25%">Judge: Adrian Woodfork</td>
<td width="25%">Judge: Nancy Simmons</td>
<td width="25%">Judge: John Ronald</td>
<td width="25%">Judge: Roger Pritchard</td>
</tr>
<tr class="award"><!------SCORE/PLACE/POINT------------>
<td width="25%"><i class="W">WB</i> — 1 pt</td>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> — 2 pts</td>
<td width="25%"><i class="W">WB</i> — 1 pt</td>
<td width="25%"><i class="W">WB</i> — 3 pt Major</td>
</tr>
<tr class="divider"><td colspan="4"></td></tr><!--------------------------------DIVIDER-------------------------------->
<tr><!------DATE: Weekday — Month ##, YYYY------->
<td width="25%">Monday – May 29, 2017</td>
<td width="25%">Sunday – June 25, 2017</td>
<td width="25%">Monday – July 10, 2017</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------HOST CLUB---------------------------------->
<td width="25%">Kennel Club of the California Sierra</td>
<td width="25%">Clackamas Kennel Club</td>
<td width="25%">Puyallyp Valley Dog Fanciers</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------LOCATION: Venue — City, State-------->
<td width="25%">Placerville, CA</td>
<td width="25%">Canby, OR</td>
<td width="25%">Puyallup, WA</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------JUDGE-------------------------------------->
<td width="25%">Judge: Pat Hastings</td>
<td width="25%">Judge: Minna-Liisa Koltes</td>
<td width="25%">Judge: Sheila DiNardo</td>
<td width="25%" class="NA"> </td>
</tr>
<tr class="award"><!------SCORE/PLACE/POINT------------>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> — 3 pt Major</td>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> — 1 pt</td>
<td width="25%"><i class="BOB">BOB</i> — 4 pt Major</td>
<td width="25%" class="NA"> </td>
</tr>
</table>
</div>
You can add a CSS rule
button.collapsible.active {
border-radius: 15px;
}
This says when the button has both the collapsible and the active classes the border radius should be 15px all around.
Additionally I would avoid directly manipulating content.style.display and make the display block or none also based on classes.
Syntax error from copy to clipboard command = unable to copy Text and template
Good day.
I've been trying top figure out why the copy to clipboard not working despite of putting the correct form name, please advise what would be the best command, i've been trying so hard couldn't seem to make it work.
here is the sample of the form or template im working on
I was hoping to use the copy to clipboard function so i can copy the title and content of each line
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
<script>
<script> }
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
}
</SCRIPT>
<head>
<body>
<!--Special comment-->
<!--Style-->
<style type="text/css">
/* Some Generic styles */
H1 {
Color: #9c33ff;
font-size: 20px;
isplay: inline-block;
}
H2 {
font-size: 15px;
Color: #751aff;
font-size: 13px;
}
Body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 580px;
height: 800px;
border: none;
font: normal 12px/1 "Trebuchet MS", Helvetica, sans-serif;
color: rgba(2,2,2,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-45deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: -moz-linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: Left;
}
input {
display: inline-block;
float: center;
}
TBODY {
font-size: 14px;
Color: #313133;
font-size: 13px;
}
#tickettemplate {
font-size: 15px;
Color: #313133;
font-size: 13px;
}
</style>
<!--Html starting point-->
<h1>i</h1>
<h2>i</h2>
<P align=center><IMG
src="" alt="" width="80" height="83"></P>
<FORM name=tickettemplate id=tickettemplate>
<!-- Table to contain page title and buttons -->
<TABLE>
<TBODY>
<TR>
<TD align=center colSpan=4>
<DIV></DIV></TD></TR>
<TR>
<TD><INPUT name=Reset onclick="resetForm();return false;" type=reset value="Clear All Fields">
</TD>
<TD><INPUT name=copyform onclick="val1();return false;" type=button value="Copy to Clipboard">
</TD></TR></TBODY></TABLE><!-- Table for General information --><BR>
<!--This is where i started-->
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>General Info</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Name:</TD>
<TD><INPUT name=cname_singleuser id=cname_singleuser size=50>
</TD>
<TR>
<TD vAlign=middle>User ID:</TD>
<TD><INPUT name=userid_singleuser0 id=userid_singleuser0 size=50> </TD></TR>
<TR>
<TD vAlign=top>Callback no.: </TD>
<TD><INPUT name="callback no" id=callbackno0 size=50></TD></TR>
<TR>
<TD vAlign=middle>Email Address:</TD>
<TD><INPUT name=emailaddy_singleuser id=emailaddy_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Office Location</TD>
<TD><INPUT name=oloc_singleuser id=oloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Current Location:</TD>
<TD><INPUT name=cloc_singleuser id=cloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Exisitng/Related:</TD>
<TD><INPUT name=exrelated_singleuser id=exrelated_singleuser
size=50></TD></TR>
<TD vAlign=top>Business Unit/Client:</TD>
<TD><INPUT name=client1 id=client1 size=50> </TD></TR></TBODY></TABLE><BR>
<TABLE width=750 cellSpacing=0 cellPadding=0>
<TBODY>
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>Brief Description</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Issue: </TD>
<TD><INPUT name=Issue id=issue0 size=50></TD></TR>
<TR>
<TD vAlign=top>Number of Users Affected: </TD>
<TD><INPUT name="Number of users Affected" id=numberofusers0
size=50></TD></TR>
<TR>
<TD vAlign=top>Business Impact:</TD>
<TD><SELECT name="Business Impact" id=businessimpact0 size=1 type="text">
<OPTION value="" selected></OPTION> <OPTION value=Minor>P4
Minor</OPTION> <OPTION value=Medium>P3 Medium</OPTION> <OPTION
value=High>P2 High</OPTION> <OPTION value=Major>P1
Major</OPTION></SELECT> </TD></TR>
<TR>
<TD width=400 vAlign=top><p>Additional information/
Incident Description:</p></TD>
<TD><TEXTAREA name=Description id=Description1 rows=8 cols=60 wrap=virtual></TEXTAREA></TD></TR></TBODY></TABLE>
<TABLE width=750>
<TBODY>
<TR><BR><STRONG>Choose the Category:</STRONG></TR></TBODY></TABLE>
Not sure where you got that code from, but seems to be wrong. If you are copying the text from an input it is pretty straight forward. Focus, select, and copy from a click action.
function copy(event) {
var selector = event.target.getAttribute('data-copy')
var elem = document.querySelector(selector)
elem.focus()
elem.select()
document.execCommand('copy')
}
document.querySelectorAll('[data-copy]').forEach( function () {
this.addEventListener('click', copy)
})
<textarea id="foo">Hello world</textarea>
<button type="button" id="btnCopy1" data-copy="#foo">copy</button>
<hr/>
<textarea id="bar">Hello world</textarea>
<button type="button" id="btnCopy2" data-copy="#bar">copy</button>
Apply dynamic styling to datatables rows
I need to highlight a row in a DataTables.js data table whenever it is inactive. I have some code set up in my Razor to label the <tr> with an id of "Inactive" and in my CSS I have the background color set accordingly. However, I can't get anything but the orignal styling to appear.
CSS
/*
* Table styles
*/
table.pretty {
width: 100%;
clear: both;
}
table.pretty td#Inactive {
padding: 5px;
border: 1px solid #fff;
background-color: #FB9090;
}
table.pretty td,
table.pretty th {
padding: 5px;
border: 1px solid #fff;
}
/* Header cells */
table.pretty thead th {
background: #6699FF; /* #66a9bd; */
color: white;
}
/* Body cells */
table.pretty tbody th {
text-align: left;
background: black; /*#91c5d4; */
color: white;
}
table.pretty tbody td {
background: white; /* #d5eaf0; */
}
table.pretty tbody tr.odd td {
background: #e8eef4; /*#bcd9e1; */
}
/* Footer cells */
table.pretty tfoot th {
background: #b0cc7f;
text-align: left;
}
table.pretty tfoot td {
background: #d7e1c5;
text-align: center;
font-weight: bold;
}
tr#Inactive
{
background-color: #FB9090;
}
HTML (Rendered)
<tr id=Inactive style="vertical-align:top;">
<td style="width:200px;">
Name
</td>
<td>
Fixed
</td>
<td style="width:50px;">
test
who's testing
I am
who's that eh?
me
</td>
<td style="width:50px;">
109161
</td>
<td style="text-align:center">
<img src="/Content/Images/attachment.png" height="20px;" width="20px;"/>
</td>
<td nowrap>
</td>
<td nowrap>
</td>
<td style="text-align:center; max-width: 50px;">
</td>
<td>
<img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/>
</td>
</tr>
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});
If only one row is inactive at a time, I think you're looking for:
tr#Inactive td
{
background-color: #FB9090;
}
Iframe can't display HTML while a browser can
I am having hard time to make my Iframe display my html string which happens to be :
var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0">
<SCRIPT language=JavaScript>
var Caller_User_Type = 'ESS';
var Locale_Date_Order = '2';
var User_Browser_Type = '';
var Page_ID = '266';
</SCRIPT>
<SCRIPT language=javascript>
var wlocationxx = '';
wlocationxx = String(window.location);
if (wlocationxx.substring(0,7) == 'http://'){
window.location = 'https://' + wlocationxx.substring(7)
}
</SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../System/CONFIG/Common_Functions.js"></SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../scripts/modeling_script.js"></SCRIPT>
<TABLE id=PageStart_1 border=0 cellSpacing=0 cellPadding=0 width="100%" height="100%">
<TBODY>
<TR>
<TD height="100%" vAlign=top>
<TABLE id=PageStart_2 border=0 cellSpacing=0 cellPadding=0 width="100%" height="100%" valign="top">
<TBODY>
<TR>
<TD height="1%" width="100%">
<SCRIPT language=javascript src="../../../System/EXB/EXB_Includes/logout.js"></SCRIPT>
<SCRIPT language=javaScript src="../../../System/EXB/EXB_Includes/EXB_cookie_factory.js"></SCRIPT>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#000063>
<TBODY>
<TR bgColor=#000066>
<TD bgColor=#000066 height=60 vAlign=center colSpan=2><IMG src="../../../System/EXB/EXB_Images/exb_login/mckinseyLogo.gif" width=212 height=23> </TD>
<TD bgColor=#000066 vAlign=center align=right><FONT color=white size=2 face="Arial Rounded MT Bold">myaccount.mckinsey.com</FONT> </TD></TR>
<TR>
<TD><IMG src="../../../System/EXB/EXB_Images/mck_racing_stripe.gif" width=309 height=3></TD>
<TD width="100%"><IMG src="../../../System/EXB/EXB_Images/mck_racing_stripe.gif" width="100%" height=3></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!-- begin exb_global.asp --><!-- end exb_global.asp -->
<SCRIPT type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_Config_Common.js"></SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_mnu_functions.js"></SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_dummy_functions.js"></SCRIPT>
<SCRIPT type=text/javascript>var sHMConfigContent = "SetUpdateDefaults('300375');HM_TopLevelMenuId=\"hmExbDCPart\";nMenuItems=0;sHM_f_SetItems=\"\";sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Home\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Home.asp\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Select Plan\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Part_Plan_Select.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Account Menu\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Home.asp\",false,\"hmExbDCPart_AccountMenu\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Withdrawals\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Distribution_Security.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Annual Decisions\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Rebalance_Elections_View.asp\",false,\"hmExbDCPart_AnnualDecisions\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Administration\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Personal_Profile.asp\",false,\"hmExbDCPart_Administration\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Contact Us\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Contact_us.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Log Off\",\"\",\"65\",\"24\",\"\",\"\",\"javascript:User_Log_Off()\",false,\"\");if(sHM_f_SetItems!=\"\"){var sTopMenuY=\"HM_f_GetElementXY('hm_m_dc_part_placer','y')+\";sTopMenuY+=\"(HM_f_GetElementXY('horizontal_ruler','y')-\";sTopMenuY+=\"(HM_f_GetElementXY('hm_m_dc_part_placer','y')+HM_f_GetMenuDimension(HM_TopLevelMenuId, false)))\";HM_f_SetMenus({TopMenuX:\"HM_window_right_edge-HM_f_GetMenuDimension(HM_TopLevelMenuId,true)-10\",TopMenuY:sTopMenuY,TopKeepInWindowX:0,TopKeepInWindowY:0,IsPermanent:1,IsHorizontal:1,PositionChild:\"below\",MilliSecondsVisible:0,CreateOnLoad:true,MenuID:HM_TopLevelMenuId});eval(\"HM_f_SetItems(\"+sHM_f_SetItems+\");\");HM_f_SetMenuTemplate({SeparatorColor:\"white\",BorderColor:\"#000000\", BGColorOver:\"#FF9900\",BGColor:\"#DB5500\",BorderWidth:1,FontColor:((cssStyleObj!=null)?cssStyleObj.color:\"#ffffff\"),FontColorOver:((cssStyleObj!=null)?cssStyleObj.color:\"#ffffff\"),FontColorSelected:((cssStyleObj!=null)?cssStyleObj.color:\"#ffffff\"),MoreImagesVisible:true,ImageSrc:HM_imgsrc+\"/HM_More_white_right.gif\",HM_OnVisibilityToggle:HM_fc_HideControls});sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Balances\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Balances.asp?f=byfund-true&f=byaccount-true&f=webchart-true\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Account Summary\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Account_Summary.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Beneficiaries\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Beneficiary.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Contributions With Growth\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Cost_Basis.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Instant Statement\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Instant_Statement.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Loans\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Loan_Inquiry.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Pending Requests\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Pending_Request.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Plan Information and Forms\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Request_Documents.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Roth Conversion/Rollover\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_IPRC_Security.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Statement\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Individual_Statements.asp\",false,\"\");if(sHM_f_SetItems!=\"\"){HM_f_SetMenus({MenuID:\"hmExbDCPart_AccountMenu\"});eval(\"HM_f_SetItems(\"+ sHM_f_SetItems+\");\");}sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AnnualDecisions\",\"Asset Allocation\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Rebalance_Elections_View.asp\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AnnualDecisions\",\"Exchange Rates\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Exchange_Rate_Inquiry.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AnnualDecisions\",\"Historical Performance\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Historical_Investment_Performance.asp\",false,\"\");if(sHM_f_SetItems!=\"\"){HM_f_SetMenus({MenuID:\"hmExbDCPart_AnnualDecisions\"});eval(\"HM_f_SetItems(\"+ sHM_f_SetItems+\");\");}sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_Administration\",\"Personal Profile\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Personal_Profile.asp\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_Administration\",\"Password Changes\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Pin_Change.asp\",false,\"\");if(sHM_f_SetItems!=\"\"){HM_f_SetMenus({MenuID:\"hmExbDCPart_Administration\"});eval(\"HM_f_SetItems(\"+ sHM_f_SetItems+\");\");}}";if(window.event + "" == "undefined") event = null;function HM_f_PopUp(){return false};function HM_f_PopDown(){return false};HM_ConfigFiles="HM_Config_Menu.js";</SCRIPT>
<!--EXB_DC_Infobar.asp-->
<TABLE id=Table1 border=0 cellSpacing=0 cellPadding=0 width="100%"><!--begin infobar table-->
<TBODY>
<TR>
<TD bgColor=#db5500 width="100%"><IMG id=hm_m_dc_part_placer alt="" src="../../../System/EXB/EXB_Images/t.gif" width=1 height=21> </TD></TR>
<TR>
<TD colSpan=14><IMG id=horizontal_ruler src="../../../System/EXB/EXB_Images/horizontal_rule.gif" width="100%" height=3></TD></TR></TBODY></TABLE><!-- end of infobar -->
<SCRIPT language=JavaScript1.2 type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_Loader.js"></SCRIPT>
<SCRIPT type=text/javascript src="../../../../System/EXB/EXB_Includes/Menu/HM_ScriptDOM.js">
</SCRIPT>
<SCRIPT type=text/javascript src="../../../../System/EXB/EXB_Includes/Menu/HM_Config_Menu.js">
</SCRIPT>
</TD></TR>
<TR>
<TD height="100%" vAlign=top width="100%">
<TABLE id=PageStart_5 border=0 cellSpacing=0 cellPadding=0 height="100%" valign="top">
<TBODY>
<TR>
<TD height="100%" vAlign=top>
<TABLE id=PageStart_6 border=0 cellSpacing=0 cellPadding=0 width="100%" height="100%" valign="top">
<TBODY>
<TR>
<TD class=Body_Title9pt height="100%" vAlign=top><!-- begin exb_global.asp --><!-- end exb_global.asp -->
<SCRIPT language=javaScript type=text/javascript>
<!-- Begin
var contentEcomp = "";
var contentInfoLinx = "";
function winOpen(url)
{
if (url.substr(11, 5) == "ecomp")
{
contentEcomp = window.open(url,"contentEcomp","resizable=yes,toolbar=yes,location=yes,width=800," +
"height=500,directories=no,status=no,scroll=yes,scrollbars=yes,menubar=yes,left=200,top=100");
contentEcomp.focus();
}
if (url.substr(7, 5) == "infol")
alert('To log in, use the following (case sensitive) credentials - Username: Consulting2005, Password: clientinfolinx') ;
{
contentInfoLinx = window.open(url,"contentInfoLinx","resizable=yes,toolbar=yes,location=yes,width=800," +
"height=500,directories=no,status=no,scroll=yes,scrollbars=yes,menubar=yes,left=200,top=100");
contentInfoLinx.focus();
}
}
//-->
</SCRIPT>
<TABLE border=0 cellSpacing=0 cellPadding=3 width="100%" height="100%" valign="top">
<TBODY>
<TR>
<TD> </TD>
<TD rowSpan=20><IMG src="../../../system/exb/exb_images/vert_black_bar.gif" width=1 height="100%"> </TD></TR>
<TR>
<TD class=Body_Title8pt><B>Welcome</B><BR></TD></TR>
<TR>
<TD class=Body_Value9pt>Rahul Raina<BR><BR></TD></TR>
<TR>
<TD class=Body_Title8pt><B>Plan Sponsor:</B><BR></TD></TR>
<TR>
<TD class=Body_Value8pt>McKinsey & Company<BR></TD></TR>
<TR>
<TD class=Body_Title8pt><B>Plan Name:</B><BR></TD></TR>
<TR>
<TD class=Body_Value8pt>Retirement Program (Profit-Sharing Retirement Plan (PSRP) and Money Purchase Pension Plan (MPPP), where applicable)<BR><BR></TD></TR>
<TR>
<TD height="100%"></TD></TR></TBODY></TABLE><IMG border=0 src="images/clear_px.gif" width=160 height=1> </TD></TR></TBODY></TABLE></TD>
<TD class=Body_Title9pt height="100%"> </TD>
<TD height="100%" vAlign=top width="100%"><!-- begin exb_global.asp --><!-- end exb_global.asp -->
<FORM id=frmHome method=post name=frmHome><INPUT id=postAction type=hidden name=postAction> <BR>
<TABLE id=Table1 border=0 cellSpacing=0 cellPadding=0 width="100%" valign="top">
<TBODY>
<TR>
<TD class=Body_Value16pt>Home</TD></TR>
<TR>
<TD class=Body_Value9pt> </TD></TR><!-- 0011 S, 0013, 0014 --><!--<tr>
<td class="Body_Value9pt">Submit your annual Asset Allocation form between September 15 and October 6, 2008. </td>
</tr>
<tr>
<td class="Body_Value9pt"> </td>
</tr> --><!-- 0011 E --><!-- 0009 S --><!-- <tr>
<td class="Body_Value10pt">
<a href="EXB_RSQ_Rebalance_Elections_View.asp">
<font color="#db5500"><b>Click here to complete your Asset Allocation form</b></font></a>
</td>
</tr> --><!-- 0009 E--></TBODY></TABLE><BR><INPUT id=sMassAnouncementXML value='<?xml version="1.0"?><anouncement_text><rows>0</rows></anouncement_text>' type=hidden name=sMassAnouncementXML> <INPUT id=isMessageViewed value=True type=hidden name=isMessageViewed> <INPUT id=sSubGroup value=D218354ECFF824224F45F173EC46FFED type=hidden name=sSubGroup>
<TABLE id=Table3 border=1 rules=none cellSpacing=0 cellPadding=0 width="80%">
<TBODY>
<TR class=Table_Header>
<TD width=5></TD>
<TD><B>Special Message from McKinsey & Company</B></TD>
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Body_Value8pt>
<TD width=5></TD>
<TD><B>Do we have your current e-mail address?</B><BR>To confirm or update your e-mail address, go to Administration Menu>Personal Profile.
<P></P><B>The 2013 Annual Decisions Period is over.</B><BR>Your next opportunity to change your allocation will be in the fall of 2014.
<P></P></TD><!-- 0026: removed <b> tags -->
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Table_Header>
<TD width=5></TD>
<TD><B>Participant Information</B></TD>
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Rahul Raina</TD>
<TD></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Bangalore</TD>
<TD></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Karanataka,<SPACE> <SPACE><SPACE>560001</TD>
<TD></TD></TR>
<TR class=Body_Value8pt height=20 vAlign=bottom>
<TD></TD>
<TD>Email Address: <B>mail#raina7.com</B> </TD>
<TD></TD></TR>
<TR class=Body_Value8pt height=20 vAlign=bottom>
<TD></TD>
<TD>Plan Status: Term & Awaiting Payment</TD>
<TD></TD></TR>
<TR height=5></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Table_Header>
<TD width=5></TD>
<TD><B>Balance Information</B></TD>
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD height=20 vAlign=top>Account balances are current as of October 31, 2013.</TD>
<TD></TD>
<TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Value $98,390.82</TD>
<TD></TD></TR>
<TR height=5></TR>
<TR>
<TD height=8 colSpan=3></TD></TR></TBODY></TABLE><BR><BR>
<P><FONT size=2 face="verdana, helvetica, arial"><B>Click here for an Instant Web Statement</B></FONT></P><BR></FORM>
<SCRIPT language=Javascript>
//0023
function fn_getReport(siteURL)
{
document.frmHome.postAction.value = "report";
document.frmHome.submit();
}
function winOpen(siteURL)
{
window.open(siteURL, "","resizable=yes,toolbar=no,location=no,width=640," +
"height=480,directories=no,status=no,scroll=yes,scrollbars=yes,menubar=no,left=100,top=20");
}
//0005 -S
function OpenAnouncement(PlanID,GroupID,PartID)
{
var url = "../../../System/Exb/Exb_Includes/RSQ_Mass_Anouncement.asp?read=" +
document.getElementById("isMessageViewed").value +
"&groupid=" + GroupID +
"&subgroupid=" + document.getElementById("sSubGroup").value ;
if(document.getElementById("imgNew") != null)
{
document.getElementById("imgNew").style.display = "none";
}
var popupwindow = "";
popupwindow = window.open(url,"Mass_Announcement","resizable=yes,toolbar=no,location=no,width=500," +
"height=500,directories=no,status=no,scrollbars=yes,menubar=no,left=200,top=100");
popupwindow.focus();
}
//0005 -E
</SCRIPT>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD align=middle>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD class=StatusBar2 height=20 width="50%">Copyright 2003 Aon Consulting</TD>
<TD class=StatusBar2 height=20 width="50%" align=right>Security and Privacy Statement</TD></TR>
<TR>
<TD class=StatusBar1 height=20 colSpan=2 align=middle>Contact Us | Print Screen | Log Off</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--
Start: 12/8/2013 10:46:06 AM
End : 12/8/2013 10:46:07 AM
Host : 192.168.11.106
-->
<DIV style="Z-INDEX: 5000; BORDER-BOTTOM: transparent 0px solid; POSITION: absolute; BORDER-LEFT: transparent 0px solid; WIDTH: 686px; HEIGHT: 22px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-TOP: transparent 0px solid; TOP: 66px; CURSOR: default; BORDER-RIGHT: transparent 0px solid; LEFT: 292px" id=hmExbDCPart title="" sp="null">
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 47px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 0px" id=hmExbDCPart_I1 title="" hh="46">Home</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 83px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 47px" id=hmExbDCPart_I2 title="" hh="82">Select Plan</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 100px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 130px" id=hmExbDCPart_I3 title="" hh="99">Account Menu</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 93px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 230px" id=hmExbDCPart_I4 title="" hh="92">Withdrawals</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 121px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 323px" id=hmExbDCPart_I5 title="" hh="120">Annual Decisions</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 105px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 444px" id=hmExbDCPart_I6 title="" hh="104">Administration</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 80px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 549px" id=hmExbDCPart_I7 title="" hh="79">Contact Us</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 57px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; PADDING-TOP: 4px; LEFT: 629px" id=hmExbDCPart_I8 title="" hh="57">Log Off</DIV></DIV></BODY>'
Please ignore the complex html page code. I just want to say that when I copy this in a notepad and save it as a .html page It renders the page properly which should have been.
But when I am trying to display this in an iframe using this it doesn't display anything:
var textBody = $(printstr);
var iframeBody = $('#test').contents().find('body');
iframeBody.append(textBody.html());
Here printstr is the string that contains the html string. Any help would be appreciated.
A good way to store large blobs of page content that you want to use from JavaScript (where by "good" I mean, at least, "much better than as a gigantic JavaScript string constant") is to use a <script> element with a non-executable "type" attribute:
<script id=frameContent type=text/content>
<BODY class=whatever>
<!-- ... -->
</BODY>
</script>
Then you can fetch the contents of the script by accessing the .innerHTML property of the DOM element. (That's why the example gives the element an "id" value — it makes it easy to find.)
Now, in your case, this approach will run into a problem because you're trying to include all those <script> elements inside the frame content. That could be worked around by using some alternative marker instead of the </script> closing tags:
<script id=frameContent type=text/content>
<BODY class=whatever>
<!-- ... -->
<script src=some/script.js><#script>
</BODY>
</script>
Then when you fetch the content you'd replace "#script" with "/script":
var frameContent = document.getElementById("frameContent")
.innerHTML
.replace(/#script/ig, "/" + "script");
A completely different approach would be to drop the idea of including your frame content like that, and simply host that page on your server and let the browser fetch it separately. It'd be much less messy, at the cost of an added HTTP transaction.