I'm trying to create a simple HTML Add/Subtract table where the value doesn't go above 10 or below 0. I've setup two functions additionalAdd & additionalSub both setup using onclick to call them. But I keep getting the error saying totalAddtions not defined. Which is the variable I'm using to store the overall value.
function additionalSub() {
var totalAdditions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions > 0) {
totalAdditions--;
document.getElementById("additionalExpenses").innerHTML = totalAdditions;
}
}
function additionalAdd() {
var totalAdditions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions < 10) {
totalAdditions++;
document.getElementById("additionalExpenses").innerHTML = totalAdditions;
}
}
.btn {
font-size: 30px;
width: 50%;
cursor: pointer;
}
.value {
font-size: 30px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="2">Additional Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="value" id="additionalExpenses">0</td>
</tr>
<tr>
<td class="btn" onclick="additionalSub()">
<center>-</center>
</td>
<td class="btn" onclick="additionalAdd()">
<center>+</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You are using spelling of totalAddtions wrong. And define it outside the function not inside it.
var totalAddtions=0;
function additionalSub() {
totalAddtions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions > 0) {
totalAddtions--;
document.getElementById("additionalExpenses").innerHTML = totalAddtions;
}
}
function additionalAdd() {
totalAddtions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions < 10) {
totalAddtions++;
document.getElementById("additionalExpenses").innerHTML = totalAddtions;
}
}
.btn {
font-size: 30px;
width: 50%;
cursor: pointer;
}
.value {
font-size: 30px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="2">Additional Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="value" id="additionalExpenses">0</td>
</tr>
<tr>
<td class="btn" onclick="additionalSub()">
<center>-</center>
</td>
<td class="btn" onclick="additionalAdd()">
<center>+</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You have a typo in the if block
var totalAdditions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions > 0)
Related
i am developing area calculator with width height and uint when i enter width and height it has to multiply and when ever i change the the unit that particular result has to come.
but when i enter width and height i am getting error like Uncaught TypeError: $(...).onChange is not a function
How can i solve this one?
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<style>
.tt-area-calculator-title {
text-align: right;
cursor: pointer;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px;
color: #01acf1;
}
.tt-calculator-container {
display: block;
opacity: 0;
visibility: hidden;
height: 0;
}
.active {
opacity: 1;
visibility: visible;
height: auto;
}
.areacalc {
text-align: center;
font-size: 14px;
line-height: 16px;
border: 1px solid #d7d7d7;
background: #f8f8f8;
color: #262626;
margin-bottom: 20px;
}
.areacalc-column {
float: none;
width: 100%;
}
.areacalc-column-inner {
padding: 0 0 5px;
}
.areacalc-label {
color: #21293c;
padding: 4px 0;
font-weight: 600;
text-transform: uppercase;
}
p {
margin-top: 0;
margin-bottom: 0.9rem;
}
.areacalc-table-measurements {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.areacalc-table-measurements {
text-align: center;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.areacalc-table-measurements {
text-align: center;
}
.areacalc-column th {
padding: 2px;
font-weight: 400;
text-align: center;
}
.areacalc-column td {
padding: 2px;
}
.table-l {
text-align: right;
width: 50%;
}
.table-r {
text-align: left;
width: 50%;
font-weight: 700;
}
.areacalc-input,
select.areacalc-select {
padding: 0 5px !important;
height: 26px !important;
border: 1px solid #c2c2c2;
}
.cell-d {
font-weight: 600;
padding: 6px 0 !important;
}
</style>
</head>
<body>
<div class="tt-area-calculator-title">
<span class="tt-calculator-span"
><i class="fas fa-calculator"></i> Area Calculator</span
>
</div>
<div
id="tt-area-calculator-container"
class="tt-calculator-container"
data-bind="scope: 'area_calculator'"
>
<!-- ko template: getTemplate() -->
<div class="areacalc">
<!-- COLUMN 1 -->
<div class="areacalc-column">
<!-- AREA TO BE TILED -->
<div class="areacalc-column-inner">
<p class="areacalc-label" data-bind="i18n: 'Area(s) to be tiled'">
Area(s) to be tiled
</p>
<table class="areacalc-table-measurements" style="width: 100%">
<tbody>
<tr>
<th style="width: 12%"></th>
<th style="width: 22%" data-bind="i18n: 'Width'">Width</th>
<th style="width: 22%" data-bind="i18n: 'Height'">Height</th>
<th style="width: 22%" data-bind="i18n: 'Unit'">Unit</th>
<th style="width: 22%" data-bind="i18n: 'Area'">Area</th>
</tr>
<!-- ko foreach: {data: $data.areaTiled, as: '$row' } -->
<tr data-bind="css: {'_last': $row.isLast()}" class="_last">
<td class="cell-a">
<!-- ko if: $row.canDelete --><!-- /ko -->
</td>
<td class="cell-b">
<input
id="areaWidth"
class="areacalc-input"
type="text"
name="width"
data-bind="value: $row.width, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-c">
<input
id="areaHeight"
class="areacalc-input"
type="text"
name="height"
data-bind="value: $row.height, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-u">
<select
name="unit"
class="areacalc-select"
data-bind="options: $parent.unitsArray, value: selectedUnit"
>
<option value="m">m</option>
<option value="mm">mm</option>
<option value="cm">cm</option>
<option value="inches">inches</option>
<option value="feet">feet</option>
</select>
</td>
<td class="cell-d">
<span id="total" data-bind="text: $row.square">0</span>
<span>m²</span>
</td>
</tr>
<!-- /ko -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="font-weight: 600; padding: 6px 0px !important">
<span data-bind="i18n: 'Total'">Total</span>
<span id="totalvalue" data-bind="text: $data.areaTiledTotal"
>0</span
>
<span>m²</span>
</td>
</tr>
</tbody>
</table>
<!-- AREA TO BE DEDUCTED -->
<p
class="areacalc-label"
data-bind="i18n: 'Area(s) to be deducted'"
>
Area(s) to be deducted
</p>
<table class="areacalc-table-measurements" style="width: 100%">
<tbody>
<tr>
<th style="width: 12%"></th>
<th style="width: 22%" data-bind="i18n: 'Width'">Width</th>
<th style="width: 22%" data-bind="i18n: 'Height'">Height</th>
<th style="width: 22%" data-bind="i18n: 'Unit'">Unit</th>
<th style="width: 22%" data-bind="i18n: 'Area'">Area</th>
</tr>
<!-- ko foreach: {data: $data.areaDeducted, as: '$row' } -->
<tr data-bind="css: {'_last': $row.isLast()}" class="_last">
<td class="cell-a">
<!-- ko if: $row.canDelete --><!-- /ko -->
</td>
<td class="cell-b">
<input
id="areaWidth1"
class="areacalc-input"
type="text"
name="width"
data-bind="value: $row.width, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-c">
<input
id="areaHeight1"
class="areacalc-input"
type="text"
name="height"
data-bind="value: $row.height, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-u">
<select
name="unit"
class="areacalc-select"
data-bind="options: $parent.unitsArray, value: selectedUnit"
>
<option value="m">m</option>
<option value="mm">mm</option>
<option value="cm">cm</option>
<option value="inches">inches</option>
<option value="feet">feet</option>
</select>
</td>
<td class="cell-d">
<span id="total1" data-bind="text: $row.square">0</span>
<span>m²</span>
</td>
</tr>
<!-- /ko -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="font-weight: 600; padding: 6px 0px !important">
<span data-bind="i18n: 'Total'">Total</span>
<span
id="totalvalue1"
data-bind="text: $data.areaDeductedTotal"
>0</span
>
<span>m²</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- COLUMN 2 -->
<div class="areacalc-column">
<div class="areacalc-column-inner">
<p class="areacalc-label">You will need</p>
<table class="areacalc-table-results" style="width: 100%">
<tbody>
<tr>
<td class="table-l">Total area:</td>
<td class="table-r">
<span data-bind="text: $data.areaTotal">0</span>
<span>m²</span>
</td>
</tr>
<tr>
<td class="table-l">Tiles required:</td>
<td class="table-r" data-bind="text: $data.tilesRequired">
0
</td>
</tr>
<tr>
<td class="table-l"></td>
<td class="table-r"></td>
</tr>
<tr>
<td class="table-l">Est. Grout required:</td>
<td class="table-r">
<span data-bind="text: $data.groutBags">0</span>
<span data-bind="i18n: 'x 3kg bag(s)'">x 3kg bag(s)</span>
</td>
</tr>
<tr>
<td class="table-l">Est. Adhesive required:</td>
<td class="table-r">
<span data-bind="text: $data.adhesiveBags">0</span>
<span data-bind="i18n: 'bag(s)'">bag(s)</span>
</td>
</tr>
<tr>
<td class="table-l">
<span data-bind="i18n: 'Add'">Add</span>
<span data-bind="text: $data.waste + '%'">10%</span>
<span data-bind="i18n: 'for wastage?'">for wastage?</span>
</td>
<td class="table-r">
<input
type="checkbox"
style="float: left; margin-right: 5px"
data-bind="checked: $data.isWasteEnabled"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /ko -->
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$(".tt-area-calculator-title").click(function () {
$(".tt-calculator-container").toggleClass("active");
});
});
$("#areaWidth,#areaHeight").keyup(function () {
var textValue1 = $("#areaWidth").val();
var textValue2 = $("#areaHeight").val();
var total = textValue1 * textValue2;
var measurement = document.querySelector(".areacalc-select").value;
console.log(measurement);
$(document).ready(function () {
$(".areacalc-select").onChange(function () {
if (measurement === "m") {
return total;
document.getElementById("total").innerHTML = total;
document.getElementById("totalvalue").innerHTML = total;
} else if (measurement === "mm") {
document.getElementById("total").innerHTML = total * 3;
document.getElementById("totalvalue").innerHTML = total * 3;
} else if (measurement === "cm") {
document.getElementById("total").innerHTML = total * 4;
document.getElementById("totalvalue").innerHTML = total * 4;
} else if (measurement === "inches") {
document.getElementById("total").innerHTML = total * 5;
document.getElementById("totalvalue").innerHTML = total * 5;
} else {
document.getElementById("total").innerHTML = total * 6;
document.getElementById("totalvalue").innerHTML = total * 6;
}
});
});
});
$("#areaWidth1,#areaHeight1").keyup(function () {
var textValue1 = $("#areaWidth1").val();
var textValue2 = $("#areaHeight1").val();
var total = textValue1 * textValue2;
document.getElementById("total1").innerHTML = total;
document.getElementById("totalvalue1").innerHTML = total;
});
</script>
</body>
</html>
For reference please find the attached image also.
The correct syntax should be $(".areacalc-select").on("change", function () {
You should replace $(".areacalc-select").onChange(function () { with the on function. In jQuery onChange doens't exists.
in your case it will look like this
$(".areacalc-select").on('change', function () {
// Your code goes here
})
you are using wrong syntax to bind the event to the .areacal-select element. their is no function called onChange in jquery, that is why you are getting an exception saying it is not a function.
the correct way is to using something like $(selector).on("change", function(){})
here is you updated code that should work for you
$(".areacalc-select").on("change", function () {
if (measurement === "m") {
return total;
document.getElementById("total").innerHTML = total;
document.getElementById("totalvalue").innerHTML = total;
} else if (measurement === "mm") {
document.getElementById("total").innerHTML = total * 3;
document.getElementById("totalvalue").innerHTML = total * 3;
} else if (measurement === "cm") {
document.getElementById("total").innerHTML = total * 4;
document.getElementById("totalvalue").innerHTML = total * 4;
} else if (measurement === "inches") {
document.getElementById("total").innerHTML = total * 5;
document.getElementById("totalvalue").innerHTML = total * 5;
} else {
document.getElementById("total").innerHTML = total * 6;
document.getElementById("totalvalue").innerHTML = total * 6;
}
});
I need help with this question:
I have created the table but I don't know how to use the event inside it
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
Thank you in advance.
You got the idea...
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
const hobies = document.querySelector('[hobies]')
const hoby_image = document.querySelector('[hoby-image]')
var hoby_images = {
'Skating': 'https://picsum.photos/id/237/200/300',
'Swimming': 'https://picsum.photos/id/238/200/300',
'Cooking': 'https://picsum.photos/id/239/200/300'
}
for(let i = 0; i < hobies.childElementCount; i++){
hobies.children[i].addEventListener('mouseover', ()=>{
hoby_image.children[0].src = `${Object.entries(hoby_images)[i][1]}`
})
}
td{
cursor:pointer;
}
td:hover{
border:red;
}
div {
text-align: center;
}
table {
border-collapse: collapse;
}
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr hobies>
<td style="width: 105.6875px;">Skating</td>
<td style="width: 110.3125px;">Swimming</td>
<td style="width: 130px;">Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td hoby-image style="width: 90px;" colspan="9">
<img src='https://picsum.photos/id/237/200/300'></img>
</td>
</tr>
</tbody>
</table>
<br>
First, for each td tag you want to have the "mouseover" event, you need to add the event handler.
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
For the style just use this
<style>
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
</style>
Then at the second row change p tag with an img tag
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
At the bottom add this script
<script>
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
</script>
Base on which td tag is hovering, you can set the src and alt attribute of img tag with parameter.
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
<table style="width: 337px; margin-left: auto; margin-right: auto" border="1">
<tbody>
<tr>
<td style="width: 90px" colspan="9">
<table style="width: 329px" border="1">
<tbody>
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center">
<td style="width: 90px" colspan="9">
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
</td>
</tr>
</tbody>
</table>
<br />
Rather than use tables to do the layout (1992 called and wants a word with you) I've re-written using divs, but the concepts are exactly the same.
Attach the event handler .addEventListener for the mouseover event — you would attach it to your <td...> elements instead of my <li> elements.
I have attached which image to use to the element being hovered using a data- attribute, so the handler just gets that value and doesn't have to figure out which of the items is being hovered.
const imageHolder = document.querySelector('#imageholder img');
const hobbies = document.querySelectorAll('#hobbies li');
hobbies.forEach(el =>
el.addEventListener('mouseenter', function(e) {
const hobbyImage = e.target.dataset.image;
imageHolder.src = `https://picsum.photos${hobbyImage}`;
})
);
#app {
width: 80%;
}
#imageholder {
width: 90%;
margin: 0 auto;
}
ul#hobbies {
list-style-type: none;
}
ul li {
display: inline-block;
width: 30%;
text-align: center;
}
li + li {
border-left: 1px solid green;
}
<div id="app">
<ul id="hobbies">
<li data-image="/300/200">Skating</li>
<li data-image="/300/201">Swimming</li>
<li data-image="/300/202">Cooking</li>
</ul>
<div id="imageholder">
<img src="https://picsum.photos/300/200">
</div>
</div>
I'm having a problem using a jQuery scrollTop() function with $.each. Every time, no matter how many <div class="panel"></div> elements are, scrollTop() function returns zero. I've used code in the Get height of multiple divs with jquery thread, only changed height() to scrollTop() function (height() still returns zero).
Here is the code that I've created, so it will be much easier to understand the problem.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var $panel = $('.panel'),
totalHeight = 0;
$.each($panel, function() {
totalHeight += $(this).scrollTop();
});
alert(totalHeight);
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Lėšų išsiėmimai</button>
<div class="panel">
<div>
</div>
<table>
<tbody>
<tr>
<th>Data</th>
<th>12 val.</th>
<th>0.01 Eur</th>
<th>Data</th>
<th>24 val.</th>
<th>0.02 Eur</th>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-26 01:39:16</td>
<td colspan="2">+</td>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-24 14:43:50</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-24 14:43:27</td>
<td colspan="2">+</td>
<td>2017-06-15 14:43:43</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-15 14:42:23</td>
<td colspan="2">+</td>
<td>2017-06-07 16:34:04</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-07 16:33:36</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-06 15:13:41</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td style="background: #0E82A7;">Iš viso</td>
<td style="background: #0E82A7;" colspan="2">0.0400 Eur</td>
<td style="background: #0E82A7;"></td>
<td style="background: #0E82A7;" colspan="2">0.1200 Eur</td>
</tr>
</tbody>
</table>
</div>
<div class="panel">
<div>
</div>
<table>
<tbody>
<tr>
<th>Data</th>
<th>12 val.</th>
<th>0.01 Eur</th>
<th>Data</th>
<th>24 val.</th>
<th>0.02 Eur</th>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-26 01:39:16</td>
<td colspan="2">+</td>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-24 14:43:50</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-24 14:43:27</td>
<td colspan="2">+</td>
<td>2017-06-15 14:43:43</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-15 14:42:23</td>
<td colspan="2">+</td>
<td>2017-06-07 16:34:04</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-07 16:33:36</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-06 15:13:41</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td style="background: #0E82A7;">Iš viso</td>
<td style="background: #0E82A7;" colspan="2">0.0400 Eur</td>
<td style="background: #0E82A7;"></td>
<td style="background: #0E82A7;" colspan="2">0.1200 Eur</td>
</tr>
</tbody>
</table>
</div>
Clearly height property will return 0 as your panels are set to
max-height:0;
When the code runs. Now, the function:
scrollTop()
Will check the scroll of window, what you are probably looking for is:
$(this).offset().top
Here is the fiddle: https://jsfiddle.net/08gccLph/
Hope that helps :)
I am having some table data and using angular UI bootstrap and bootstrap classes. i want to show a bar in a graph tab with a data whatever i am showing on table tab. if i use progress bar for this requirement, its not showing me marker for expected value.click here for bar design . how can we put that marker (it can be a triangle or vertical line or anything which can be differentiated?
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data =
[{"transactionName":"Store Document GDR","actualVolume":251.0,"expectedVolume":500.0,"actualResponseTime":96.0,"expectedRT1":150.0,"expectedRT2":200.0},{"transactionName":"Submit Staging Doc","actualVolume":36.0,"expectedVolume":50.0,"actualResponseTime":86.0,"expectedRT1":200.0,"expectedRT2":250.0},{"transactionName":"Get Documents","actualVolume":7.0,"expectedVolume":50.0,"actualResponseTime":1293.0,"expectedRT1":1300.0,"expectedRT2":1500.0}];
}]);
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller='MainCtrl'>
<div class="panel-body">
<uib-tabset>
<uib-tab>
<uib-tab-heading><b> table </b></uib-tab-heading>
<div class="col-md-12">
<table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
<thead>
<tr bgcolor="#00008b" ; style="color: #bce8f1">
<th class ="text-center" rowspan="2" style="vertical-align:middle">Transaction Name</th>
<th class ="text-center" colspan="2">Volume</th>
</tr>
<tr>
<td class ="text-center"><b>Actual</b></td>
<td class ="text-center"><b>Expected</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td>{{"0 - "}}{{record.expectedVolume}}</td>
</tr>
</tbody>
</table>
</div>
</uib-tab>
<uib-tab>
<uib-tab-heading><b> graph </b></uib-tab-heading>
<div class="col-md-12">
<table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
<thead>
<tr bgcolor="#00008b" ; style="color: #bce8f1">
<th class ="text-center" style="vertical-align:middle">Transaction Name</th>
<th class ="text-center">graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data">
<td>{{record.transactionName}}</td>
<td>
</tr>
</tbody>
</table>
</div>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
For put a bar progress you can use tag
W3School Tag Progress
This is an examples:
progress {
background: #000;
}
<progress value="22" max="100">
The progress bar lies inside a relative positioned container, where the arrow is also inside with position:absolute. So you just need to set left:expected% minus the half of the arrowimage width.
var currentvalue = document.getElementById("value1").innerHTML;
var currentexpected = document.getElementById("expected1").innerHTML;
var thetarget = document.getElementById("theprogress");
thetarget.setAttribute("aria-valuenow", currentvalue);
thetarget.style.width = currentvalue + "%";
thetarget.innerHTML = currentvalue + "%";
document.getElementById("arrow").style.left = currentexpected + "%";
body {
background-color: lavender !important;
}
.progress {
position: relative !important;
}
#arrow {
position: absolute;
margin-left: -16px;
}
table tr td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<table>
<tr><td>value</td><td>expected</td></tr>
<tr><td id=value1>70</td><td id=expected1>90</td></tr>
</table><br>
<div class="progress">
<div id=theprogress class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<img src="http://i.imgur.com/q2BqI65.png" id=arrow alt=arrow>
</div>
codepen
I'm trying to build a tic-tac-toe game where the user first clicks which player he wants to be, then clicks on the square in the board where he wants to play. The issue I'm having is changing the background of the square that the user clicks. Because I don't know which square the user will click, I can't figure out how to change the style of the background, because the square's id/class is unknown.
I can't say:
document.getElementById("randomId").style.backg round
because I don't know which square the user will click. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span
style="font-weight: bold; font-size: 110%;">O</span></button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunctions(){
master = true;
}
function myFunction() {
if (master == true) {
}
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Well, you could either do it like this, where you add an argument when you call the function, in this case the this keyword would point to the html element (td).
By adding a css class, you can handle the changes relatively easily and check if it wasn't clicked before.
var master = true;
// clickedElement = your dom element you want to update
function myFunction(clickedElement) {
// if a dom element was given and it doesn't have a className yet
if (clickedElement && !clickedElement.className) {
// set a class on the element
clickedElement.className = master ? 'master' : 'servant';
// change the player (if it's not a master it's a servant)
master = !master;
}
}
#buttons {
margin-top: 50px;
}
#x {
margin-left: 10px;
}
#table {
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
.master {
background-color: green;
}
.servant {
background-color: red;
}
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span>
</button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
</tbody>
</table>
</div>
There is of course no reason to only store this information on the DOM, you would still have to evaluate if there were 3 cells of the same color. You might want to choose to keep a data structure that checks which block was clicked and who clicked it and if there are diagonally, vertically or horizontally 3 in a row for the person who just clicked.
and if you want some more inspiration, you can check this jsfiddle