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
Related
I have check box in my table heading and I want to show data only selected columns in my print page but currently its hide only
following bellow my code :
<style>
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
<form role="form" id="print_test_delivery_check" method="POST" enctype="multipart/form-data">
<h6 align="center"><font color="#5CAAFF">Barque Trans And Logistics P.V.T.L.T.D</font></h6>
<h6 align="center" ><font color="#5CAAFF">Safeguarding Valuables</font></h6>
<h5 align="center"><strong>TEST STOCK</strong></h5>
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm" style=" overflow: auto;">
<thead>
<tr>
<th class="col1"><input type="checkbox" name="selectedrecord" value="1">Sr No </th>
<th class="col2"><input type="checkbox" name="selectedrecord" value="2">Bilty Id</th>
<th class="col3"><input type="checkbox" name="selectedrecord" value="3">LR No </th>
<th class="col4"><input type="checkbox" name="selectedrecord" value="4">Consignor Name</th>
<th class="col5"><input type="checkbox" name="selectedrecord" value="5">Consignor GSTIN</th>
<th class="col6"><input type="checkbox" name="selectedrecord" value="6">Consignee Name</th>
</tr>
</thead>
<tbody>
<?php $counter = 1; ?>
<?php foreach($bilties as $bilty):?>
<tr>
<td><?php echo $counter;?></td>
<td><?php echo $bilty->id;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
<td><?php echo $bilty->consignor_gst_no;?></td>
<td><?php echo $bilty->consignee;?></td>
</tr>
<?php $counter++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" onclick="printContent('print_test_delivery_check')" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print</button>
</form>
</div>
<script>
function printContent(e1) {
$('#print').css('visibility', 'hidden'); //hiding print button on print page
$('td').css('visibility', 'visible');
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:checked').each(function() {
allVals.push($(this).val());
});
//console.log("check Column"+ allVals);
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td').eq(i-1).css('visibility', 'hidden');
});
});
var restorepage = document.innterHTML;
var printContent = document.getElementById(e1).innterHTML;
document.innterHTML = printContent;
window.print();
}
</script>
</body>
</html>
In above image it hide table data but I want to hide table columns too.
I do not know where I am wrong in code.
After click on print button it goes to print page and hide data but columns still there.
$('input[name=selectedrecord]').on('change', function(){
$('input[name=selectedrecord]:checked').each(function() {
v=$(this).val()
$(this).closest('#delivery_checklist_table')
.find('td:nth-of-type('+v+')')
.css('visibility', 'hidden');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm" style=" overflow: auto;">
<thead>
<tr>
<th class="col1"><input type="checkbox" name="selectedrecord" value="1">Sr No </th>
<th class="col2"><input type="checkbox" name="selectedrecord" value="2">Bilty Id</th>
<th class="col3"><input type="checkbox" name="selectedrecord" value="3">LR No </th>
<th class="col4"><input type="checkbox" name="selectedrecord" value="4">Consignor Name</th>
<th class="col5"><input type="checkbox" name="selectedrecord" value="5">Consignor GSTIN</th>
<th class="col6"><input type="checkbox" name="selectedrecord" value="6">Consignee Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>counter</td><p>
<td>id</td><p>
<td>lr_no</td><p>
<td>consignor;?></td><p>
<td>consignor_gst_no;?></td><p>
<td>consignee;?></td><p>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
when you loop through your checkboxes, you can hide the columns already there, no need for extra foreach loops:
Just check the value and hide using nth-of-type()
$('input[name=selectedrecord]').on('change', function(){
$('input[name=selectedrecord]:checked').each(function() {
v=$(this).val()
$(this).closest('#delivery_checklist_table')
.find('td:nth-of-type('+v+')')
.css('visibility', 'hidden');
});
})
note: .css('visibility', 'hidden') will keep space allocate for the hidden element. Use .hide() or .css('display', 'none') if you don't want to allocate the elements space
You could add a second foreach for the th just like with the td :
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('th').eq(i-1).css('visibility', 'hidden');
$(this).find('td').eq(i-1).css('visibility', 'hidden');
});
});
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)
I have a table inside a div that shows some important information about the elements inside the div and I want this table to follow the scroll as long as the div.
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12 col-lg-19 ">
<div class="table-responsive">
<table>
<tr style="white-space:nowrap;">
<th class="fill"><h2>Meritos</h2></th>
<th scope="row" style="white-space:nowrap;">
<h2>Auto Puntuación</h2>
<input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
</th>
<th></th>
<th scope="row" style="white-space:nowrap;">
<h2>Puntuación Evaluación</h2>
<input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
</th>
</tr>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
{code .....}
</div>
</div>
</div>
</div>
I have tried everything that I found about making an element follow the scroll with Javascript/jQuery with no result.
I´m working with Bootstrap v3.3 and Cakephp v3.5.
Thanks a lot in advance.
Use position: fixed;
See code below:
.panel-body{
height: 150px;
overflow-y: scroll;
padding:0!important;
}
.table-responsive{
position: fixed;
width:90%!important;
}
.list-group{
height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
</div>
</div>
</div>
</div>
I want to fix the table header when scrolling. And the rest of the page content to scroll. But the original layout of the table breaks. The width of the table columns and rows is of different size. I am not able to fix this.
My code:
HTML
<section class="scrollable padder">
<table class="table table-striped m-b-none text-sm m-t">
<thead class="ff">
<tr>
<th >1col</th>
<th >2col</th>
</tr>
</thead>
<tbody>
<tr>
<td class="new_td">field1</td>
<td class="new_td">field2</td>
</td>
</tbody>
</table>
</section>
JS
$(".padder").scroll(function() {
if ($(".padder").scrollTop() > 100) {
$('.ff').addClass('fixed');
}
else
{
$('.ff').removeClass('fixed');
}
});
CSS
.fixed{
position:fixed;
top:50px;
}
try this tag and let me know the result
<section class="scrollable padder">
<table class="table table-striped m-b-none text-sm m-t">
<thead class="ff">
<tr>
<th >1col</th>
<th >2col</th>
</tr>
</thead>
<tbody>
<tr>
<td class="new_td">field1</td>
<td class="new_td">field2</td>
</tr>
</tbody>
</table>
</section>
You can implement using this:
<table id="fixed"></table>
Css
#fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
Js
var $fix= $(".table > thead").clone();
var $hfxd = $("#fixed").append($fix);
$(".padder").scroll(function() {
if ($(".padder").scrollTop() > 100 && $fix.is(":hidden"))
{
$hfxd.show();
}
else
{
$hfxd.hide();
}
});
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