how to switch between two tables - javascript

I have created one HTML page. I have done it in just french language now I am trying to add an option at the top of my website to translate language between French and English (there are 2 language flags in the link in paragraph below).
My idea is to have a table which contains a button of flag of France and England (French and English) in first row (something like this: http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using HTML and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one displayed at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
See this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have my HTML code below (it doesn't contain code for English table but it is assumed that the table have same HTML code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
After Wrick7 suggestion
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
The output is:
http://prntscr.com/6zdj0r


You can set one table with visibility hidden and another with visible and then when a button is pressed you just change it in js....
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}
.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }
<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>

Related

Import HTML file in Node.JS and pass variable into it

I am creating an email system and I send an activation code to the users. To define the msg object to be sent to the user it has to follow this structure:
const msg = {
to: req.body.email,
from: "anakin#empire.net",
subject: "Welcome to the Empire!",
text: `Here is your access code! Shh, don't tell anyone - ${randomNum}`,
html: CodeActivation <---
};
For the CodeActivation HTML file I would like to pass randomNum into it which means I would need to actually import this file into Javascript to accept a variable then return the HTML (I've included the HTML file below).
This presents another obstacle, I have a length HTML file that I can't simply just wrap into a string.
Any suggestions would be awesome! Thank you for your time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&display=swap" rel="stylesheet" />
<!--<![endif]-->
<title>Email Template</title>
<!--[if gte mso 9]>
<style type="text/css" media="all">
sup { font-size: 100% !important; }
</style>
<![endif]-->
<!-- body, html, table, thead, tbody, tr, td, div, a, span { font-family: Arial, sans-serif !important; } -->
<style type="text/css" media="screen">
body { padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none }
a { color:#0047ab; text-decoration:none }
p { padding:0 !important; margin:0 !important }
img { margin: 0 !important; -ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */ }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.btn-16 a { display: block; padding: 15px 35px; text-decoration: none; }
.btn-20 a { display: block; padding: 15px 35px; text-decoration: none; }
.l-white a { color: #ffffff; }
.l-black a { color: #282828; }
.l-pink a { color: #0047ab; }
.l-grey a { color: #6e6e6e; }
.l-purple a { color: #9128df; }
.gradient { background: linear-gradient(to right, #388BFF 0%,#0047ab 100%); }
.btn-secondary { border-radius: 10px; background: linear-gradient(to right, #9028df 0%,#0047ab 100%); }
.cke_editable,
.cke_editable a,
.cke_editable span,
.cke_editable a span { color: #282828 !important; }
.tpl-content { padding: 0 !important; }
.mcnPreviewText { display: none !important; }
/* Mobile styles */
#media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
.mpx-10 { padding-left: 10px !important; padding-right: 10px !important; }
.mpx-15 { padding-left: 15px !important; padding-right: 15px !important; }
u + .body .gwfw { width:100% !important; width:100vw !important; }
.td,
.m-shell { width: 100% !important; min-width: 100% !important; }
.mt-left { text-align: left !important; }
.mt-center { text-align: center !important; }
.mt-right { text-align: right !important; }
.me-left { margin-right: auto !important; }
.me-center { margin: 0 auto !important; }
.me-right { margin-left: auto !important; }
.mh-auto { height: auto !important; }
.mw-auto { width: auto !important; }
.fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; }
.column,
.column-top,
.column-dir-top { float: left !important; width: 100% !important; display: block !important; }
.m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }
.m-block { display: block !important; }
.mw-15 { width: 15px !important; }
.mw-2p { width: 2% !important; }
.mw-32p { width: 32% !important; }
.mw-49p { width: 49% !important; }
.mw-50p { width: 50% !important; }
.mw-100p { width: 100% !important; }
.mmt-0 { margin-top: 0 !important; }
}
/**
* #tab Page
* #section Body Background
* #tip Set the styling for email background.
* #style Body Background
*/
.background-body {
/*#editable*/ background-color: #f2f5f7;
}
/**
* #tab Page
* #section Footer Background
* #tip Set the styling for Footer background.
* #style Footer Background
*/
.background-footer {
/*#editable*/ background-color: #0047ab;
}
/**
* #tab Page
* #section Link Color
* #tip Set the styling for link color.
* #style Link Color
*/
a {
/*#editable*/ color: #0047ab;
}
/**
* #tab Page
* #section Button Background
* #tip Set the styling for Buttons background.
* #style Button Background
*/
.btn-16 {
/*#editable*/ background-color: #0047ab;
}
</style>
</head>
<body class="body" style="padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none;">
<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;" bgcolor="#f2f5f7" class="gwfw">
<tr>
<td style="margin: 0; padding: 0; width: 100%; height: 100%;" align="center" valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="m-shell">
<tr>
<td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="mpx-10">
<!-- Top -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-12 c-grey l-grey a-right py-20" style="font-size:12px; line-height:16px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; color:#6e6e6e; text-align:right; padding-top: 20px; padding-bottom: 20px;">
<span class="link c-grey" style="text-decoration:none; color:#6e6e6e;">View this email in your browser</span>
</td>
</tr>
</table> <!-- END Top -->
<!-- Container -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="gradient pt-10" style="border-radius: 10px 10px 0 0; padding-top: 10px;" bgcolor="#f3189e">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 10px 10px 0 0;" bgcolor="#ffffff">
<!-- Logo -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img-center p-30 px-15" style="font-size:0pt; line-height:0pt; text-align:center; padding: 30px; padding-left: 15px; padding-right: 15px;">
<img src="../HTML/img/stemuli_logo#2x.png" width="112" height="43" mc:edit="image_1" style="max-width:112px;" border="0" alt="" />
</td>
</tr>
</table>
<!-- Logo -->
<!-- Main -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="px-50 mpx-15" style="padding-left: 50px; padding-right: 50px;">
<!-- Section - Intro -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="pb-50" style="padding-bottom: 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="fluid-img img-center pb-50" style="font-size:0pt; line-height:0pt; text-align:center; padding-bottom: 50px;">
<img src="https://www.psd2newsletters.com/templates/purple/images/img_intro_5.png" width="264" height="300" border="0" alt="" />
</td>
</tr>
<tr>
<td class="title-36 a-center pb-15" style="font-size:36px; line-height:40px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-bottom: 15px;">
<strong>Access Code</strong>
</td>
</tr>
<tr>
<td class="text-16 lh-26 a-center pb-25" style="font-size:16px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 26px; text-align:center; padding-bottom: 25px;">
Click on the button below to activate code, this is your requested account key code to log in with your email address (name#mail.com)
</td>
</tr>
<tr>
<td class="pb-30" style="padding-bottom: 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title-22 a-center py-20 px-50 mpx-15" style="border-radius: 10px; border: 1px dashed #b4b4d4; font-size:22px; line-height:26px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-top: 20px; padding-bottom: 20px; padding-left: 50px; padding-right: 50px;" bgcolor="#f2f5f7">
<strong>CODE : <span class="c-purple" style="color:#9128df;">PURPLE123</span></strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<!-- Button -->
<table border="0" cellspacing="0" cellpadding="0" style="min-width: 200px;">
<tr>
<td class="btn-16 c-white l-white" bgcolor="#f3189e" style="font-size:16px; line-height:20px; mso-padding-alt:15px 35px; font-family:'PT Sans', Arial, sans-serif; text-align:center; font-weight:bold; text-transform:uppercase; border-radius:25px; min-width:auto !important; color:#ffffff;">
<a href="#" target="_blank" class="link c-white" style="display: block; padding: 15px 35px; text-decoration:none; color:#ffffff;">
<span class="link c-white" style="text-decoration:none; color:#ffffff;">ACTIVATE CODE</span>
</a>
</td>
</tr>
</table>
<!-- END Button -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Section - Intro -->
</td>
</tr>
</table>
<!-- END Main -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Container -->
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="background-footer p-50 mpx-15" bgcolor="#0047ab" style="border-radius: 0 0 10px 10px; padding: 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="pb-20" style="padding-bottom: 20px;">
<!-- Socials -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
<img src="https://www.psd2newsletters.com/templates/purple/images/ico_facebook.png" width="34" height="34" mc:edit="image_6" style="max-width:34px;" border="0" alt="" />
</td>
<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
<img src="https://www.psd2newsletters.com/templates/purple/images/ico_instagram.png" width="34" height="34" mc:edit="image_7" style="max-width:34px;" border="0" alt="" />
</td>
<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
<img src="https://www.psd2newsletters.com/templates/purple/images/ico_twitter.png" width="34" height="34" mc:edit="image_8" style="max-width:34px;" border="0" alt="" />
</td>
</tr>
</table>
<!-- END Socials -->
</td>
</tr>
<tr>
<td class="text-14 lh-24 a-center c-white l-white pb-20" style="font-size:14px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 24px; text-align:center; color:#ffffff; padding-bottom: 20px;">
<div mc:edit="text_12">
<br />
<span class="link c-white" style="text-decoration:none; color:#ffffff;">(738) 479-6719</span> - <span class="link c-white" style="text-decoration:none; color:#ffffff;">(369) 718-1973</span>
<br />
<span class="link c-white" style="text-decoration:none; color:#ffffff;"></span> - <span class="link c-white" style="text-decoration:none; color:#ffffff;"></span>
</div>
</td>
</tr>
<tr>
<td align="center">
<!-- Download App -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;">
<img src="https://www.psd2newsletters.com/templates/purple/images/btn_appstore.png" width="117" height="40" mc:edit="image_10" style="max-width:117px;" border="0" alt="" />
</td>
<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
<td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;">
<img src="https://www.psd2newsletters.com/templates/purple/images/btn_gplay.png" width="117" height="40" mc:edit="image_11" style="max-width:117px;" border="0" alt="" />
</td>
</tr>
</table>
<!-- END Download App -->
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- END Footer -->
</table> <!-- END Footer -->
<!-- END Footer -->
<!-- Bottom -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-12 lh-22 a-center c-grey- l-grey py-20" style="font-size:12px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 22px; text-align:center; padding-top: 20px; padding-bottom: 20px;">
<span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">UNSUBSCRIBE</span> | <span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">WEB VERSION</span> | <span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">SEND TO A FRIEND</span>
</td>
</tr>
</table> <!-- END Bottom -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>

Pick a template language such as nunjucks, then place an output instruction in the template:
<p>Your random number is {{randomNum}}</p>
… then run the template through the template library:
const html = nunjucks.render('template.html', { randomNum: get_a_random_number() });

Save html somewhere on your server ex: otp.ejs with SEND_CODE text in your file.
fs.readFile(__dirname+"/otp.ejs", {encoding: 'utf-8'}, (err, data) => {
if(err){
if(err.code == 'ENOENT'){
console.error(err.message);
}else{
console.error(err);
}
} else {
data = data.replace(/SEND_CODE/g, randomNum);
const msg = {
to: req.body.email,
from: "anakin#empire.net",
subject: 'Code Verification',
html : data,
};
}
});
Don't forget to import fs

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>

css print query not working in firefox

Here is my code it's working well in chrome browser when print but in firefox it's not supporting css so many items hide from print area
function printDiv(divName) {
var divElements = document.getElementById(divName).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body> <div style='width: 21cm; margin:0 auto;'>" +
divElements + "</div></body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
.print-button {
width: 120px;
height: 30px;
background: #1abc9c;
color: #FFFFFF;
border-radius: 5px;
border: none;
cursor: pointer;
float: right;
}
.print-header, .print-footer {
display: none;
}
#media print {
/* All your print styles go here */
.print-header, .print-footer {
display: inherit;
}
.print-footer {
float: left;
width: 100%;
padding-top: 20%;
}
.pfooter {
float: right;
/* padding-top: 6%; */
border-top: 1px solid black;
}
.print-middle {
float: left;
width: 100%;
}
.ptable-header {
float: left;
padding-top: 4%;
width: 100%;
}
.printHead {
text-align: center;
margin: 0 auto;
}
.psection {
width: 25%;
float: left;
}
.print-logo {
float: left;
width: 80px;
}
.print-logo img {
width: 78px;
}
.report-date {
float: right;
}
.psub {
width: 40%;
}
.punit {
width: 11%;
}
.pdes {
width: 21%;
}
.pyear {
width: 11%;
}
.ptotal {
width: 12%;
}
}
<div id="list_table">
<h2>Total project found: 2 <input class="print-button" type="button" onclick="printDiv('printableArea')" value="Print"> </h2>
<div id="printableArea">
<div class="print-header">
<div class="printHead">
<h2 class="ptitle">
দুর্যোগ ব্যাবস্থাপনা ও ত্রান মন্ত্রনালয়
</h2>
<h3>
কাজের বিনিময়ে খাদ্য প্রকল্প
</h3>
</div>
<div class="print-middle">
<div class="print-logo">
<img src="http://192.185.183.190/~ssnp/spmis/images/logo.png">
</div>
<div class="report-date">
প্রতিবেদনের তারিখঃ (২০১৬-০১-০৫)
</div>
</div>
<div class="ptable-header">
<div class="psection">
<span>বিভাগঃ</span>
বরিশাল </div>
<div class="psection">
<span>জেলাঃ</span>
ভোলা </div>
<div class="psection">
<span>উপজেলাঃ</span>
মনপুরা </div>
<div class="psection">
<span>ইউনিয়নঃ</span>
সাকুচিয়া
</div>
</div>
</div>
<table>
<thead>
<tr><th>ক্রমিক নং</th>
<th class="psub">প্রকল্পের ধরন</th>
<th class="punit">সংখ্যা</th>
<th class="punit">একক</th>
<!--<th>দৈর্ঘ্য</th>
<th>প্রস্থ</th>
<th>উচ্চতা/গভীরতা </th>
<th>ক্ষেত্রফল</th>
<th>অন্যান্য</th> -->
<th class="ptotal">বরাদ্দের পরিমাণ</th>
<th class="ptotal">ব্যয়ের পরিমাণ</th>
<th class="pyear">অগ্রগতীর হার %</th>
</tr></thead>
<tbody><tr>
<td>1</td>
<td class="pdes">
রাস্তা নির্মাণ </td>
<td class="psub">1</td>
<td class="punit">55555</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
<td class="ptotal">25.00</td>
<td class="ptotal">25.00</td>
<td class="pyear"> 100
</td>
</tr>
<tr>
<td>2</td>
<td class="pdes">
রাস্তা পুনর্নিমাণ </td>
<td class="psub">16</td>
<td class="punit">55555</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
<td class="ptotal">292.00</td>
<td class="ptotal">292.00</td>
<td class="pyear"> 100
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>মোটঃ 317</td>
<td>মোটঃ 317</td>
<td></td>
</tr>
</tbody></table>
<div class="print-footer">
<div class="footer-amount">
<!-- <h3>
মোট বরাদ্দের পরিমাণঃ
</h3>
<h3>
মোট ব্যয়ের পরিমাণঃ
<h3> -->
</div>
<div class="pfooter">
অনুমোদনকারীর স্বাক্ষর, সীল ও তারিখ
</div>
</div>
</div>
</div>

You have to use !important with #media print. Hope will work for you.

#media print is supported in Firefox since version 3.5.
You could try to add the print css in the old way:
<link href="/print.css" rel="stylesheet" media="print" type="text/css" />

Are you using the media="screen" stipulation when referencing your CSS? If so, you can remove it completely and use the following:
<link href="/styles.css" rel="stylesheet" type="text/css" />

I solved my problem. Here in my JS I used new html code there head is different from my main site. I added my css link on that head section then I solved my problem. Like this
printDivCSS = new String ('<link href="../css/print.css" rel="stylesheet" type="text/css">');
function printDiv(divName) {
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.open('', '_blank', 'width=800,height=auto');
document.body.innerHTML = originalContents;*/
var divElements = document.getElementById(divName).innerHTML;
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head>" +
printDivCSS + "<title></title></head><body class='printarea'> <div style='width: 21cm; margin:0 auto;'>" +
divElements + "</div></body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}

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;}

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.

Categories

Resources