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;}
Related
**In Alert my html content showing but on Click it is not working . My Requirement is User When Click On first button Then My First table want to load on table-content div,If user click on second button then my second table want to load on table content div helpme how to get whole html content in a div **
$(document).ready(function(){
$('#first').hide();
$('#second').hide();
var f = $('#first').html();
var r = $('#second').html();
alert(f);
alert(r);
$('#fst').click(function(){
$('.table-content').html()= f;
});
$('#snd').click(function(){
$('.table-content').html()= r;
});
});
*{
margin:0px;
padding:0px;
}
.f1{
width:100%;
}
table,th,td{
border:1px solid #ff9900;
border-collapse:collapse;
}
.f1 td{
text-align:center;
}
.f2{
width:100%;
}
.f2 td{
text-align:center;
}
.container{
position:relative;
display:inline-block;
width:100%;
height:100%;
background:#ccc;
padding:5px;
}
.table-content{
width:100%;
height:100px;
border:1px solid #ff8800;
}
.btns{
text-align:center;
padding-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
<table class="f1">
<tr height="50">
<th width="33%">column11</th>
<th width="34%">column12</th>
<th width="33%">column13</th>
</tr>
<tr height="50">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div id="second">
<table class="f2">
<tr height="50">
<th width="33%">column21</th>
<th width="34%">column22</th>
<th width="33%">column23</th>
</tr>
<tr height="50">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div class="container">
<div class="table-content"></div>
<div class="btns">
<button id="fst">Frist</button>
<button id="snd">Second</button>
</div>
</div>
You need to use setter method like $('.table-content').html(f);:
$(document).ready(function() {
$('#first').hide();
$('#second').hide();
var f = $('#first').html();
var r = $('#second').html();
$('#fst').click(function() {
$('.table-content').html(f);
});
$('#snd').click(function() {
$('.table-content').html(r);
});
});
* {
margin: 0px;
padding: 0px;
}
.f1 {
width: 100%;
}
table,
th,
td {
border: 1px solid #ff9900;
border-collapse: collapse;
}
.f1 td {
text-align: center;
}
.f2 {
width: 100%;
}
.f2 td {
text-align: center;
}
.container {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
background: #ccc;
}
.table-content {
width: 99%;
height: 100px;
border: 1px solid #ff8800;
}
.btns {
text-align: center;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
<table class="f1">
<tr height="50">
<th width="33%">column11</th>
<th width="34%">column12</th>
<th width="33%">column13</th>
</tr>
<tr height="50">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div id="second">
<table class="f2">
<tr height="50">
<th width="33%">column21</th>
<th width="34%">column22</th>
<th width="33%">column23</th>
</tr>
<tr height="50">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div class="container">
<div class="table-content"></div>
<div class="btns">
<button id="fst">Frist</button>
<button id="snd">Second</button>
</div>
</div>
html() also takes a parameter as content.
Try putting your variables inside like this $('.table-content').html(f);
You can make some minor changes in your js.
$(document).ready(function(){
$('#first,#second').hide();
var html="";
$('#fst').click(function(){
html=$.trim($(this).html());
});
$('#snd').click(function(){
html=$.trim($(this).html());
});
$('.table-content').html(html);
});
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;
}
i want to make a table header fix to one position and allow the remaining content of table to be scrollable(code below). I am using colspan and rowsapn property in the table header row . Is there any way to fix it ?
<html>
<body>
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
<tr class="tt" style="background-color:#C2C2C2;">
<td></td>
<td></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
<td><font color="black">Var</font></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
</tr>
<tr class="tt" style="background-color:#D7F2FF">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
//this is css
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
Question of 3 years old,however for those who still have no solution for this (table head with rowspan) I finally have the methode using js.
<div id="table">
<table>
<thead>
<!-- your head code -->
</thead>
<tbody>
<!-- your body code -->
</body>
</table>
</div>
CSS
#table{
height:200px; //for example
overflow-y:auto;
}
JS
let statusCard = document.querySelector('#table');
// add scroll event listener for change head's position
statusCard.addEventListener('scroll',e =>{
let tableHead = document.querySelector('thead');
let scrollTop = statusCard.scrollTop;
tableHead.style.transform = 'translateY(' + scrollTop + 'px)';
})
You might need to place your header in a div with a class .sticky or whatever you like and a proper CSS.
HTML
<div class="sticky">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
</table>
</div>
CSS
.sticky {
position: fixed;
top: 2px;
width: 96.5%;
}
See the example here: http://codepen.io/omerblink/pen/wMzLow?editors=110
You can use:
.mytable tr th
{
table-layout: fixed;
}
This may help you:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
I doubt you will be able to acheive this with a single table. So I have actually created two tables one for header and another for body & the former is always fixed. Also I assume that number of columns is static. Here is the code
<!--Header part-->
<div id="firsttable" style="width:100%;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<thead><tr class="tt " bgcolor="#0B2B62">
<th id="no">No.</th>
<th id="sto">Store Name</th>
<th id="res">Receipts</th>
<th colspan=2 id="rb">Receipts vs Budget</th>
<th colspan=3 id="rl">Receipts vs Last Year</th>
<th id="con">Contribution</th>
<th colspan=2 id="cb">Contribution vs Budget</th>
</tr>
</thead>
</table>
</div>
<!-- body part -->
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" style="background-color:#C2C2C2;">
<td headers="no">A</td>
<td headers="sto">B</td>
<td headers="res">C</td>
<td colspan="2" headers="rb"><div style="color:black">Var £</div><div style="color:black">Var %</div></td>
<td colspan="3"><div style="color:black">Var £</div><div>Var %</div><div>Var</div></td>
<td>D</td>
<td colspan="2"><div style ="color:black">Var £</div><div style="color:black">Var %</div></td>
</tr>
<!-- Include multiple tr to get scrollbar -->
</table>
</div>
CSS
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
td,th{
max-width:10px;
}
.mytable div{
max-width:40%;
display:inline
}
WORKING COPY
NOTE:When this scrollbar is visible you may see that the header columns is not in sync with body columns. This is because scroll bar has a width and it is will occupy some space.In this case you can adjust the width of any body column so that it is in sync. Also I understand basically you need 7 columns there can be subcolumns. So in body I have created 7 columns and div to replicate the sub columns
Hope this will be helpful
I am making a table in html where I have to calculate a price after discount.
I have for the moment 2 rows with 7 header cells and under each header cell I have a cell. I am struggling to add values to my cells. I tried this var cells = document.getElementById('table').getElementsByTagName('td');
cells[1] = "3"; to add the value 3 to my Quantity but the value does not appear on my table. I want to do it this way so I can later apply the convert function to all my Tds.
What am I doing wrong?
/* Format amount */
function ConvertAmount(Amount) {
var cells = document.getElementById('table').getElementsByTagName('td');
cells[1] = "3";
var Zahl = Amount;
Zahl = Math.round(Zahl * Math.pow(10, 2)) / Math.pow(10, 2);
Zahl = Zahl.toFixed(2);
Zahl = Zahl.toString();
var Negativ = false;
if (Zahl.indexOf("-") == 0) {
Negativ = true;
Zahl = Zahl.replace("-", "");
}
var str = Zahl.toString();
str = str.replace(".", ",");
var intVorkommastellen = str.length - (str.length - str.indexOf(","));
var intKTrenner = Math.floor((intVorkommastellen - 1) / 3);
var intZiffern = (intVorkommastellen % 3 == 0) ? 3 : (intVorkommastellen % 3);
strNew = str.substring(0, intZiffern);
strHelp = str.substr(intZiffern, (str.length - intZiffern));
for (var i = 0; i < intKTrenner; i++) {
strNew += "." + strHelp.substring(0, 3);
strHelp = strHelp.substr(intZiffern, (strHelp.length - intZiffern));
}
var szNachkommastellen = str.substring(intVorkommastellen, str.length);
if (szNachkommastellen.length < 3) {
strNew += str.substring(intVorkommastellen, str.length) + '0';
} else {
strNew += str.substring(intVorkommastellen, str.length);
}
var Zahl = strNew;
if (Negativ) {
Zahl = "- " + Zahl;
}
return Zahl;
}
.briefkopf {
margin-top: 5px;
}
.ueberschrift {
font-size: 20pt;
font-weight: bolder;
}
.unterueberschrift {
font-size: 14pt;
}
.dagufarbe {
color: #EC7404;
}
body {
margin: 0;
padding: 0;
font: 12pt"Arial";
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin-left: 50px;
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
page-break-before: always;
page-break-after: always;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="page">
<div class="briefkopf">
<br>
<br>
<br>
<div>
<script type="text/javascript">
</script>
</div>
<div>street</div>
<div>number</div>
<div>country</div>
</div>
<br>
<br>
<div class="ueberschrift">Offer from
<script type="text/javascript">
document.write(Invoicedate)
</script>
</div>
<br>
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 12pt;
padding: 10px 5px;
border-width: 1px;
border-style: none none solid;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-width: 3px;
border-style: none none solid;
}
</style>
<table id="table" class="tg" style="width:900px;">
<tr>
<th align="center" class="tg">Pos</th>
<th id="Quantity" align="center" class="tg">Quantity</th>
<th align="center" class="tg">Type</th>
<th align="left" class="tg">Description</th>
<th align="center" class="tg" style="width:100px;">Unitprice</th>
<th align="center" class="tg" style="width:75px;">Discount</th>
<th align="center" class="tg">Totalprice</th>
</tr>
<tr style="page-break-inside:avoid;">
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{POSITION}}'))
</script>
</center>
</td>
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{QUANTITY}}'))
</script>
</center>
</td>
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{ART}}'))
</script>
</center>
</td>
<td align="left" class="tg">
<div class="dagufarbe">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{DESCRIPTION}}'))
</script>
</center>
</div>
<br>
<div style="margin-top:-15px;">
<script type="text/javascript">
document.write(ConvertAmount('{{COMMENTARY}}'))
</script>
</div>
</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{UNITPRICE}}'))
</script>€</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{DISCOUNT}}'))
</script>%</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{POSITIONSPRICE}}'))
</script>€</td>
</tr>
</table>
<style type="text/css">
.ta {
font-family: Arial, sans-serif;
font-size: 12pt;
padding: 10px 5px;
overflow: hidden;
word-break: normal;
}
.tb {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-width: 3px;
border-style: none none solid;
}
.te {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-style: none none solid;
}
</style>
<table style="width:575px; margin-left:330px;">
<tr>
<td class="ta">Total nett
<div style="margin-left:500px; margin-top:-20px;">
<script type="text/javascript">
document.write(ConvertAmount('{{AMOUNTNETT}}'))
</script>€</div>
<br>
</td>
</tr>
<tr>
<td class="te">
<div style="margin-top:-25px;">plus VAT 19,00 %</div>
<div style="margin-left:500px; margin-top:-20px;">
<script type="text/javascript">
document.write(ConvertAmount('{{AMOUNTTAX}}'))
</script>€</div>
<br>
</td>
</tr>
<tr>
<td class="tb"><b>Total amount <div style="margin-left:500px; margin-top:-20px;"><script type="text/javascript">document.write(ConvertAmount('{{AMOUNTGROSS}}'))</script> €</div></b>
</td>
</tr>
</table>
<br>
</div>
<br>
</p>
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>