I essentially have a table with rows and upon clicking a row, I would like a popUp box to appear. I have the div/HTML code for it. However, I am not sure how to implement the backend code of it.
1.) User clicks row
2.) It gets extra info from that row: For example, the row is only displaying $transactionID and $transactionAmount. Then the user clicks a row, a box pops up displaying the $transactionID, $transactionAmount, $transactionDate and $reference
How do I go about doing this? I am completely confused and have attempted to look everywhere to find a solution but can't seem to find any similar examples
document.addEventListener("DOMContentLoaded", () =>{
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () =>{
// Not sure what to do here
})
})
})
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr data-href='$value'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
}
</tbody>
</table>
</div>
This was my approach but it doesn't work correctly: It won't actually update the values when clicked. Upon clicking a row, it will constantly display the same values from the first row of the table
function displayTransaction() {
var x = document.getElementById("transactionBox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
#transactionBox{
position: relative;
display: none;
overflow: hidden;
}
transactionBox_class{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
transition: opacity 500ms;
opacity: 0;
}
.wrapper{
margin: 150px auto;
padding: 20px;
background: #e7e7e7;
border-radius: 5px;
width: 15%;
position: relative;
transition: all 5s ease-in-out;
}
.wrapper h2{
margin-top: 0;
color: #333;
}
.wrapper .close{
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.wrapper .content{
max-height: 30%;
overflow: auto;
}
.container{
border-radius: 5px;
background-color: #e7e7e7;
padding: 20px 0;
}
form label{
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
}
.container p{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr onclick='displayTransaction()'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox'>
<div class='wrapper'>
<h2>Transaction Details</h2>
<div class='content'>
<div class='container'>
<form>
<label>Transaction ID:</label>
<p>$transactionID</p>
<label>Amount:</label>
<p>$transactionAmount</p>
<label>Date:</label>
<p>$transactionDate</p>
<label>Reference:</label>
<p>$reference</p>
</form>
</div>
</div>
</div>
</div>";
}
?>
</tbody>
</table>
</div>
</body>
You can create a class called visible or something and add it to the children in the when it gets clicked.
You can use element.classList.add("my-class"); to add a class (.remove("myclass") to remove it)
After analyzing your foreach loop I can see that there are some rows of the table getting populated but the id remains the same for every transaction division that is transactionBox which is why you are getting only first row which is the first element with the id.
Solutions :-
Create a dynamic ID for each of the row's transaction division.
echo "<tr onclick='displayTransaction(".$transactionID.")'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox_".$transactionID."'>
<div class='wrapper'>
<h2>Transaction Details</h2>
Use custom attribute but yaah unique.
echo "<tr onclick='displayTransaction(this)' transation='".$transactionID."'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox' transaction-type='".$transactionID"'>
<div class='wrapper'>
<h2>Transaction Details</h2>
The working examples are below.
function showDetails_1(elem){
var actual_elem = "#transaction_"+elem;
console.log(actual_elem)
$(actual_elem).attr("style","display:block");
}
function showDetails_2(elem){
var actual_elem = "[transaction-type="+$(elem).attr("transaction")+"]";
console.log(actual_elem);
$(actual_elem).attr("style","display:block");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=3>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_1(433)">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction_433">
Yo..! here are the details_1
</div></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_2(this)" transaction="433">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction" transaction-type="433">
Yo..! here are the details_2
</div></td>
</tr>
</table>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here
one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/
You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
How to remove this "Rs." part from this js ? if i remove it html page not providing correct value its not working well i wannt stop replacing "Rs." on to my html page ?
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("Rs.","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
update_balance();
}
function update_balance() {
var due = $("#total").html().replace("Rs.","") - $("#paid").val().replace("Rs.","");
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("Rs.","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("Rs."+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">Rs.0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">Rs.0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<!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">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<?php
function wlcmMsg() {
echo "Welcome ! ".$name=$_SESSION['adminlog'];
}
session_start();
if(!isset($_SESSION['adminlog'])){
}
else if(isset($_SESSION['adminlog'])){
echo '<table align="right" border="0" class="dontprint">
<tr width="50%"><td>Hi! '.$name=$_SESSION['adminlog']; echo '</td>
<td><form align="right" action="menu.php"><input type="submit" value="Back" /></form></td>
<td><form align="right" action="logout.php"><input type="submit" value="logout" id="search"/></form></td>
</tr></table>';
}
//connecting to the database
define('DB_HOST', 'localhost');
define('DB_NAME', 'infinitiabill');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
//inserting Record to the database
$result = mysql_query('SELECT InvoiceNo FROM billdata ORDER BY InvoiceNo DESC LIMIT 1;');
if (mysql_num_rows($result) > 0) {
$max_InvoiceNo = mysql_fetch_row($result);
//echo $max_InvoiceNo[0]; //Here it is
}
mysql_close($con);
?>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due Rs.</td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">Rs.650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td>Rs.<span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">Rs.75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td>Rs.<span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal Rs.</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total Rs.</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid Rs.</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due Rs.</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
here m add html and css codes too herer
Try doing split instead.
Ex:
function update_balance() {
var total= parseInt($("#total").html().split("Rs.")[1]);
var pval=parseInt($("#paid").val().split("Rs.")[1]);
var due = total-pval;
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
Same goes with update_price()
Edited, #Sampath M Jay, I just change some code you just post on your snippet to make it work. Something need to know:
Did you see the the code snippet needs jQuery? I think that may be the reason that your snippet is not working, anyway, I chose jQuery 1.11.0, which makes .live deprecated, so I change $(".delete").live(... to $(".delete").on(..., it just do the same thing.
The PHP part of your snippet is removed because stack snippet will not try to resolve it, so I believe whether to remove it or not is a minor issue.
Some of the html part also has the Rs. prefix, so remove them.
In js part, the update_total, update_balance, update_price and some part of the domready code which is
$("#addrow").click(function() {
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div...
bind();
...})
all of them have the relation with Rs., so removed them.
Left is 'should-be-ok' version without the bothering Rs., enjoy, and feel free to ask if there's any problem.
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = parseInt($(this).html());
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(total);
$('#total').html(total);
update_balance();
}
function update_balance() {
var due = parseInt($("#total").html(), 10) - $("#paid").val();
due = roundNumber(due,2);
$('.due').html(due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val() * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!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">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due </td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
You should remove "Rs" string being added at locations mentioned below. Then you can remove all replace("Rs.","")
function update_total() {
...
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
...
}
function update_balance() {
...
$('.due').html("Rs."+due);
...
}
function update_price() {
...
row.find('.price').html("Rs."+price);
...
}
I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>
try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here