css print query not working in firefox - javascript

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

Related

How to populate modals individually from input in every row?

Adding new info input changes the previous modal contents.
$(document).ready(function() {
$('#mainTable').DataTable({});
var dataTable = $("#mainTable").dataTable().api();
$("#add").click(function() {
var fname = $('#fname').val();
lname = $('#lname').val();
var info = $('.info').val();
tr = document.createElement("tr");
tr.innerHTML = "<tr><td>" + fname + "</td><td>" + lname + "</td><td><div><button id='showInfo' class='showInfo' type='button'>&plus;</button></div></td></tr>";
dataTable.row.add(tr);
dataTable.draw();
$(document).on("click", '.showInfo', function() {
$('.modalinfo').text(info);
$(".modal").css("display", "block");
});
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
});
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
Result Size: 753 x 671
color: #000;
text-decoration: none;
cursor: pointer;
}
<head>
<link rel="stylesheet" type="text/css" href="{% static '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' %}">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="inputlines">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" onfocus="this.value=''" id="fname"></td>
<td>Last Name:</td>
<td><input type="text" onfocus="this.value=''" id="lname"></td>
<td>Info:</td>
<td><input type="text" onfocus="this.value=''" id="info" class="info"></td>
<td><input type="button" id="add" value="Add"></td>
</tr>
</table>
</div>
<table id="mainTable">
<thead id="myTableData">
<tr>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th> </th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modalinfo"></p>
</div>
</div>
<input type="button" id="showInfo" class='showInfo' style="display:none;">
</body>
https://jsfiddle.net/averola/b4p0zu6q/3/

The issue is because you add a new event to every pre-existing .showInfo element when a new one is added to the DOM. This overwrites the info value with the latest one for each instace.
To fix this you could add the info value as a data attribute on each new button you append, and this can then be read back out of the DOM in a single delegated event handler which applies to all buttons. Try this:
$(document).ready(function() {
$('#mainTable').DataTable({});
var dataTable = $("#mainTable").dataTable().api();
$("#add").click(function() {
let fname = $('#fname').val();
let lname = $('#lname').val();
let info = $('.info').val();
let $tr = $(`<tr><td>${fname}</td><td>${lname}</td><td><div><button class="showInfo" type="button" data-info="${info}">&plus;</button></div></td></tr>`);
dataTable.row.add($tr);
dataTable.draw();
});
$(document).on("click", '.showInfo', function() {
$('.modalinfo').text($(this).data('info'));
$(".modal").css("display", "block");
});
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<link rel="stylesheet" type="text/css" href="{% static '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' %}">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<div id="inputlines">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" onfocus="this.value=''" id="fname"></td>
<td>Last Name:</td>
<td><input type="text" onfocus="this.value=''" id="lname"></td>
<td>Info:</td>
<td><input type="text" onfocus="this.value=''" id="info" class="info"></td>
<td><input type="button" id="add" value="Add"></td>
</tr>
</table>
</div>
<table id="mainTable">
<thead id="myTableData">
<tr>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th> </th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modalinfo"></p>
</div>
</div>
<input type="button" id="showInfo" class='showInfo' style="display:none;">

How to correctly change the size of a div with javascript?

I'm trying to change the size of a div through javascript. Making it smaller works but I can't get it back to normal size after shrinking it.
Here's the code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body onscroll="myFunction()">
<div class="row iconBar">
<div class="col">
<img class="icons" src="insta.png">
<img class="icons" src="email.png">
<img class="icons" src=tel.png>
</div>
</div>
<div class="row sticky-top titleBar" id="headerBar" onscroll="myFunction()">
<div class="col">
<img src="logo.jpg" id="logo" alt="logo.jpg">
</div>
</div>
<!-- script resize when scrolling up/down -->
<script>
var divHeight = 0;
var imgSize = 0;
var header = document.getElementById("headerBar");
var logo = document.getElementById("logo");
window.onload = function () {
divHeight = document.getElementById("headerBar").offsetHeight;
imgSize = document.getElementById("logo").offsetWidth;
};
window.onscroll = function() {
if (header.offsetTop > 50) {
header.style.height = "20vh";
logo.style.with = "12%";
}
else {
header.style.height = "40vh";
logo.style.width = "20%";
}
}
</script>
<div class="row infoBar">
<div class="col-md-3 infoImgCol">
<img src="haftbefehl.jpg" id="infoImg">
</div>
<div class="col-md-9 infoText">
<p>
Text
</p>
</div>
</div>
<div class="row coursePlan" style="margin-left: auto; margin-right: auto;">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Date</th>
<th scope="col">Start</th>
<th scope="col">Until</th>
<th scope="col">Coach</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">19.08.2019</th>
<td>9:00</td>
<td>13:00</td>
<td>Diabolo</td>
</tr>
<tr>
<th scope="row">19.08.2019</th>
<td>13:00</td>
<td>16:00</td>
<td>Fat Tony</td>
</tr>
<tr>
<th scope="row">21.08.2019</th>
<td>8:00</td>
<td>12:00</td>
<td>Larry the lobster</td>
</tr>
<tr>
<th scope="row">22.09.2019</th>
<td>13:00</td>
<td>15:30</td>
<td>Abo</td>
</tr>
</tbody>
</table>
</div>
<div class="row press">
<div class="col">
<p style="font-size: 3em; margin-top:5vh;">Press</p>
<p style="margin-bottom: 10vh;">
Text
</p>
</div>
</div>
<footer>
<div class="row">
<div class="col">
<p style="margin-left: 1vw; margin-top: auto;margin-bottom: auto;">Warung Yoga Gmbh ©</p>
</div>
</div>
</footer>
</body>
</html>
CSS:
.icons{
width:2%;
float:right;
margin-right:1vw;
margin-top:2vh;
background-color: white;
}
.titleBar{
background-color: white;
text-align: center;
position: sticky;
top:0;
}
#logo{
width: 20%;
}
.infoBar{
margin-top: 5vh;
text-align: center;
background-color: rgb(26, 26, 26);
color: white;
}
.infoImgCol{
text-align: center;
}
#infoImg{
width: 60%;
}
.infoText{
text-align: center justify;
margin: auto;
}
.coursePlan{
width: 80%;
margin-left: auto;
margin-right:auto;
margin-top: 10vh;
text-align: center;
}
.newsTitle{
background-color: rgb(26, 26, 26);
margin-top: 10vh;
text-align: center;
color:white;
}
.press{
background-color: rgb(26, 26, 26);
color:white;
margin-top:5vh;
text-align: center;
}
I'm storing the default size in divHeight when the page is loaded.
Once I shrink my div, I want it to change back to normal once I reach the top of the page again.

You can change the size of a div using jQuery (place this above your script which should be just above your closing body tag):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can change the css of content with:
$("#idofdiv").css("height", "whatever height you want");
I am not sure when you actually want to change the size of your div because your question is sort of unclear but hopefully this helps!

You'll want to use the window.onscroll event, instead of the div onscroll. div onscroll will only work under specific conditions.
window.onscroll = function() {
myFunction()
}
Also, you didn't specify the logo image size so it's hard to determine exactly what you're trying to do. Instead of setting specific width/height after scrolling, why not simply clear the style properties?
function myFunction() {
if (header.offsetTop > 50) {
header.style.height = "20vh";
logo.style.width = "12%";
}
else {
header.style = "";
logo.style = "";
}
}
https://www.codeply.com/go/kAVzV0UGbB

How to calculate the Total amount depending upon the subtotal and shipping charges in php?

I am making the shopping cart. I am able to calculate the product price depending upon the quantity.
Now I am calculating the total amount depending upon the subtotal and shipping charges with the product price.
When I am increasing the quantity of product it's calculating the product price but not calculating the subtotal and total amount.
Or Is there any other secure way to handle this?
Would you help me out in this?
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var $pro_list = $(this).closest('tr.pro-list');
var productPrice = parseFloat($pro_list.find('span.price_cal').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseFloat($quantityInput.val()) + parseFloat($(this).data('multi'));
if (newQuantity>= 1) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var lineTotal = productPrice*newQuantity;
$pro_list.find('td.total_amount').data('price','£'+lineTotal).html('£'+lineTotal);
}
});
.sp-quantity {
width:124px;
height:42px;
float: left;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table cart-table">
<thead class="table-headings">
<tr>
<th class="pname">Product</th>
<th class="punit">Unit Price</th>
<th class="pquant">Quantity</th>
<th class="ptotal">Total price</th>
</tr>
</thead>
<?php if(!empty($_SESSION['products'])):
foreach($_SESSION['products'] as $key=>$product):?>
<tbody>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-img">
<img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image">
</div>
<div class="pro-detail-name">
<h3><?php echo $product['p_name'];?></h3>
</div>
<?php
$p_delete=$product['p_id'];
//$decrypted_delete_id = decryptIt($p_delete);
$encrypted_user_id = encryptIt($p_delete);
$delete_product_id=urlencode($encrypted_user_id);
?>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
<td>£<span class="price_cal"><?php echo $product['p_currentprice'];?></span></td>
<td>
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<?php $single_total = $product['qty']*$product['p_currentprice'];?>
<td class='total_amount' data-price='£<?php echo $single_total;?>'>£<?php echo $single_total;?></td>
</tr>
<?php $total = $total+$single_total;
$_SESSION['total_cost']=$total;
endforeach;?>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Subtotal</span></td>
<td class='total_amount' data-price='£<?php echo $single_total;?>'>£<?php echo $single_total;?></td>
<!-- <td><span>Shiping Cost</span></td>
<td><i class="fa fa-fighter-jet" aria-hidden="true"></i>£<?php echo $total;?></td> -->
</tr>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Total Cost</span></td>
<td>£<?php echo $total;?></td>
</tr>
</tbody>
<?php endif;?>
</table>

The addition to your code below should do it!
Added some class names to make it easier to find values. Added with a jQuery each the product prices up to a subtotal and displayed in the subtotal line. Then add 20 shipping cost to the total. The jQuery is pretty self explanatory.
updateTotal();
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var $pro_list = $(this).closest('tr.pro-list');
var productPrice = parseFloat($pro_list.find('span.price_cal').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseFloat($quantityInput.val()) + parseFloat($(this).data('multi'));
if (newQuantity >= 1) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var lineTotal = productPrice * newQuantity;
$pro_list.find('td.total_amount').html('£' + lineTotal);
$pro_list.find('td.total_amount').data('price', lineTotal); //update data-price
}
updateTotal();
});
function updateTotal() {
var subTotal = 0;
var currencySymbol = "£";
//start getting the total amounts from each product row.
//add them as a subtotal.
$("tr.pro-list > td.total_amount").each(function(index, element) {
subTotal += parseFloat($(element).data("price")); //more secure to use data!
});
var total = subTotal + $("tr.pro-list.ship > td[data-price]").data("price");
$("tr.pro-list.sub > td.subtotal").html(currencySymbol + "" + subTotal);
$("tr.pro-list.total > td.total").html(currencySymbol + "" + total);
}
.sp-quantity {
width: 124px;
height: 42px;
float: left;
}
.sp-minus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-input {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid black;
float: left;
}
.sp-plus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-input input {
width: 30px;
height: 34px;
text-align: center;
border: none;
}
.sp-input input:focus {
border: 1px solid #e1e1e1;
border: none;
}
.sp-minus a,
.sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-detail-name">
<h3>ProductName</h3>
</div>
</div>
</td>
<td>£<span class="price_cal">55</span></td>
<td>
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="2" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<td class='total_amount' data-price='110'>£110</td>
</tr>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-detail-name">
<h3>ProductName</h3>
</div>
</div>
</td>
<td>£<span class="price_cal">45</span></td>
<td>
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="2" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<td class='total_amount' data-price='90'>£90</td>
</tr>
<tr class="pro-list sub">
<td></td>
<td></td>
<td><span>Subtotal</span></td>
<td class="subtotal">£110</td>
</tr>
<tr class="pro-list ship">
<td></td>
<td></td>
<td><span>Shipping charges</span></td>
<td data-price="20">£20</td>
</tr>
<tr class="pro-list total">
<td></td>
<td></td>
<td><span>Total Amount</span></td>
<td class="total">£110</td>
</tr>
</tbody>
</table>

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

Categories

Resources