Import HTML file in Node.JS and pass variable into it - javascript
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
Related
How to change an existing XML tag with Javascript and display it in XSL transformation?
I am new to Javascript and also new to stackoverflow so if there are any mistakes please try to ignore.
I have an XML file and have applied an XSL transformation.
I am trying to change the content of the XML tags from the form which is in .xslt format and display the changed same using XSLT. Below is my XML and XSLT code.
So this is my XML file. What i want to do is chage the values of name, email and qualification. I used XSLT and displayed the XML in table format, so I should change the row contents when I change the XML contents.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="work.xsl"?>
<student>
<studentlist>
<S.No>1</S.No>
<Name>Student1</Name>
<E-mail>ab#xy.in</E-mail>
<Qualification>MCA</Qualification>
<createdon>6 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>2</S.No>
<Name>Student2</Name>
<E-mail>cd#xy.in</E-mail>
<Qualification>BE</Qualification>
<createdon>7 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>3</S.No>
<Name>Student3</Name>
<E-mail>ef#xy.in</E-mail>
<Qualification>B.TECH</Qualification>
<createdon>3 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>4</S.No>
<Name>Student4</Name>
<E-mail>gh#xy.in</E-mail>
<Qualification>MCA</Qualification>
<createdon>23 Dec 2011</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
</student>
This is my XSLT file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Login form</title>
<style>
input{
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #999;
}
.styled-select select {
}
.sel {
font: 1em sans-serif;
width: 230px;
height:31px;
box-sizing: border-box;
border: 2px solid #43C6DB;
height:31px;
background: #fafafa url("/home/walkingtree/Desktop/hemanth practice/editalll/hello.jpg") no-repeat 100% 50%;
index:-1;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
}
#form-setting{
position:fixed;
left:35%;
top:30%;
width: 390px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 15px 1px;
background-color:#BDEDFF;
}
form div + div {
margin-top: 1em;
}
label {
display: inline-block;
width: 110px;
text-align: left;
}
input{
font: 1em sans-serif;
width: 230px;
height:31px;
box-sizing: border-box;
border: 2px solid #43C6DB;
}
.button {
background-color: #89C35C;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:6px;
}
option{
height:20px;
}
.button2 {border-radius:6px;
background-color: #E55451;
float:right}
#close{position:fixed;
top:29%;
left:66%;
cursor:pointer;
}
#form-div{
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#edit-div{
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#edit-setting{
position:fixed;
left:35%;
top:30%;
width: 390px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 15px 1px;
background-color:#BDEDFF;
}
</style>
</head>
<body>
<div>
<table border="0" cellspacing="0" width="600px">
<tr>
<th>
<div style="background-color:#EF8224">
<table width="100%">
<tr>
<th style="float:left"><font color="white">StudentList</font></th>
<th style="float:right"><font color="Black">Add</font></th>
<th style="float:right"><img src="/home/walkingtree/Desktop/adding.png" width="17px" align="right"/></th>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<td>
<table width="100%" id="myTable" class="myTab">
<tr bgcolor="#EF8224">
<th style="text-align:left" width="100px">S.No.</th>
<th style="text-align:left">Name</th>
<th style="text-align:left">Email</th>
<th style="text-align:left">Qualification</th>
<th style="text-align:left">CreatedOn</th>
<th style="text-align:left">Action</th>
</tr>
<xsl:for-each select="student/studentlist">
<tr style="background-color:#FFDFD6">
<td><xsl:value-of select="S.No"/></td>
<td><xsl:value-of select="Name"/></td>
<td><xsl:value-of select="E-mail"/></td>
<td><xsl:value-of select="Qualification"/></td>
<td><xsl:value-of select="createdon"/></td>
<td><xsl:for-each select="Image/img"><img width="25px" height="25px" src="{#src}" class="CalloutRightPhoto">
<xsl:attribute name="onclick">
<xsl:choose>
<xsl:when test="contains(#src, 'edit.jpg')">
<xsl:text>edit(this);</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>deleteRow(this); </xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</img>
</xsl:for-each>
</td>
</tr>
</xsl:for-each>
</table>
</td>
</tr>
</table>
</div><div id="form-div">
<div id="form-setting">
<p>
<img id="close" src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg" width="10px" height="10px" onclick="closeform()"/>
</p>
<p id="pname">
</p>
<form>
<table>
<tr>
<td>
<div>
<label for="name" >Name<font color="red">*</font>:</label>
<input type="text" id="name" name="user_name"/>
</div>
<div>
<label for="mail" >E-mail<font color="red">*</font>:</label>
<input type="email" id="mail" name="user_mail"/>
</div>
<div>
<label for="qual">Qualification:</label>
<select class="sel" id="selet">
<option value=""></option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</option>
</select>
</div>
</td>
</tr>
<tr style="width:100%">
<td align="right" style="float:right">
<button type="button" class="button" onclick="sub()">submit</button>
<button class="button button2">reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="edit-div">
<div id="edit-setting">
<p>
<img id="close" src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg" width="10px" height="10px" onclick="formclose()"/>
</p>
<p id="pname">
</p>
<form>
<table>
<tr>
<td>
<div>
<label for="name" >Name<font color="red">*</font>:</label>
<input type="text" id="ename" name="user_name"/>
</div>
<div>
<label for="mail" >E-mail<font color="red">*</font>:</label>
<input type="email" id="email" name="user_mail"/>
</div>
<div>
<label for="qual">Qualification:</label>
<select class="sel" id="sele">
<option value=""></option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</option>
</select>
</div>
</td>
</tr>
<tr style="width:100%">
<td align="right" style="float:right">
<button type="button" class="button" onclick="editme()">edit</button>
<button class="button button2">reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
var v=document.getElementById("form-div");
function poped(){
v.style.display="block";
}
function closeform(){
v.style.display="none";
}
function sub(){
var i;
var name=document.getElementById("name").value;
var mail=document.getElementById("mail").value;
var qual=document.getElementById("selet").value;
var table=document.getElementById("myTable");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
cell1.innerHTML="";
cell2.innerHTML=name;
cell3.innerHTML=mail;
cell4.innerHTML=qual;
cell5.innerHTML="";
cell6.innerHTML="";
row.style.backgroundColor="#FFDFD6";
row.style.height="30px";
}
function deleteRow(r){
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
var p=document.getElementById("edit-div");
function edit(e){
p.style.display="block";
}
function formclose(){
p.style.display="none";
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
<![CDATA[if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}]]>
};
xhttp.open("GET", "workxml.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName('Name')[0];
var y = x.childNodes[0];
document.getElementById("ename").innerHTML =
y.nodeValue;
}
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
how to switch between two tables
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>
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.
how to make the title bar fixed
i want to make the title bar fixed(the bar containing my profile,change password) and so for that i have created a class
![when i am clicking on to change password then it does not take completely to the change password][1]
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
but it is not working well i meant to say that the look and feel is not good.
here is my code of index.html
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div align="center" style="padding-top: 30px">
<table align="center" >
<tr >
</tr>
</table>
</div>
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="340" />
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
this is the style.css
*{
/* Universal reset: */
margin:0;
padding:0;
}
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
color:#fcfcfc;
background-color:#355664;
font-family:Arial, Helvetica, sans-serif;
}
/* Hyperlink Styles: */
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
/* Headings: */
h1,h2,h3{
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
}
h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
/* The slogan text */
font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
font-size:2em;
font-weight:normal;
margin:0 0 1em;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
/* The dividing line: */
height:1px;
background-color:#24404c;
border-bottom:1px solid #416371;
margin:1em 0;
overflow:hidden;
}
article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* The navigation styling: */
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
nav, article, nav ul li a,figure{
/* Applying CSS3 rounded corners: */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* Article styles: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;
}
figure{
border:3px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
figure img{
margin-left:-60px;
}
/* Footer styling: */
footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
color:#cccccc;
background-color:#213e4a;
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration:none;
background-color:#142830;
}
footer a.by{
float:left;
}
footer a.up{
float:right;
}
please tell me how to do that.
when i am clicking on my profile it is taking to the my profile page but the title bar disappears and similarily for the change password also
put this in css file
.pp
{
position:fixed;
top: 30px;
width: 944px;
z-index:1;
top:5px;
}
in body set the header to class pp
<header class="pp"> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup style="float:left">
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
set the line1 id to this class above of articale2
<div class="line" id="line1"></div>
I don't understand why you are pointing p tag,there is no p tag present in your HTML code.
Add position:fixed to nav ul
nav ul{
background:white;
border-radius:6px;
position:fixed;
top:30px;
right:5px;
}
DEMO
As your bar in the nav tag, so you need to write css for nav tag to fixed it, while you have point that you have written css code for p tag.