I need a logic that handles color gamut for any color.
I started by trying to work with the color red. I have a date column and the older the date, the redder the color needs to be.
So that's basically it, the date of a day ago for example would have a lighter red and as the time passes it gets darker.
This was my attempt:
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="id">
<div class="table-responsive">
<table class="table table-striped w-auto">
<thead>
<tr>
<th>Due Data</th>
</tr>
</thead>
<tbody>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-08')+',0,0)'">2022-07-08</td>
</tr>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-09')+',0,0)'">2022-07-09</td>
</tr>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-10')+',0,0)'">2022-07-10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var myApp = new Vue({
el: '#id',
data() {
return {
}
},
methods: {
getLateDays(date) {
return Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(date + ' 00:00:00').setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24));
}
},
});
</script>
</html>
Related
I'm trying to add a bootstrap class to an element using JQuery. This works fine when the element is loaded in the html (#table1), but it doesn' work when I create the element using JQuery and then try to assign a class to it. The table within the #news is not being styled and I really don't understand why. I've also tried with attr('class', 'myClass') but it didn't work either...
See my html here:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<link rel='shortcut icon' type="image/x-icon" href="./images/icons8-globe-africa-16.png">
<link href='./css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<table class='table' id='table1'>
<tr>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
</tr>
</table>
<div id='news'></div>
<button id='butt'>click</button>
<script src='./js/jquery-3.6.3.min.js'></script>
<script src='./js/bootstrap.bundle.min.js'></script>
<script type='module' src='./js/main2.js'></script>
</body>
</html>
and my js here:
$('#butt').on('click', () => {
$('#table1').addClass('table-striped m-3'); //works
const table = $('<table></table>').addClass('table table-striped m-0'); //doesn't work
$('#news').append(table);
for (let i=0; i<4; i++) {
const row = $('<tr></tr>');
const titleData = $('<td></td>').text(`title ${i}`);
const linkData = $('<td></td>');
const link = $('<a></a>').text(`view ${i}`).attr('href', '#');
linkData.append(link);
row.append(titleData);
row.append(linkData);
table.append(row);
}
});
I have two pages the first is called store.php and the other cart.php. I try to transfer the total rows number from a table from the page cart.php on the store.php page that I have the cart icon and i put the number of products above it. My idea was through javascript count all rows in the table and place it on the cart icon. The problem is as much as try I can not get the value of all rows from the page cart.php inside to store.php.
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="Cart">
<a href="cart.php">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="Cart_Number" id="Cart_Number"></span>
</a>
</div>
<script type="text/javascript" src="Counter_Cart.js"></script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>cart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<table style="width:100%" id="Product_Map">
<tr>
<th>Product name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Product 1</td>
<td>Product 1</td>
<td>Product 1</td>
</tr>
<tr>
<td>Product 2</td>
<td>Product 2</td>
<td>Product 2</td>
</tr>
<tr>
<td>Nothing</td>
<td>Nothing</td>
<td>Total</td>
</tr>
</table>
<script type="text/javascript" src="Counter_Cart.js"></script>
</body>
</html>
function CountRowsUsingJavascript() {
var totalRowCount = 0;
var table = document.getElementById("Product_Map");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
if (i > 0) {
totalRowCount++;
} else {
totalRowCount = 0;
}
}
if (totalRowCount > 0) {
totalRowCount = totalRowCount - 1;
return totalRowCount;
} else {
return totalRowCount;
}
}
var Value_For_The_Cart = CountRowsUsingJavascript();
To answer your question, I can think of two ways this can be done:
Window.name
window.name is sort of a special variable that will keep its value across page reloads and navigation, as long as the user stays on the same tab. This variable only takes strings so you could convert your number to a string.
window.name = Value_For_The_Cart.toString();
Local storage
Local storage is used for storing data that persists in the user's browser, and thus is kept across pages. To save something to local storage you would do
localStorage.setItem('whateverNameYouWant', Value_For_The_Cart.ToString());
And to get it
localStorage.getItem('whateverNameYouWant');
But I advise you to consider if handling this client side is the best way to go about this.
I have 2 files. index.php is my table that is generated in php from database, which works fine. Then edit page that updates to database, also working fine. both files have javascript for websocket which work fine. however after edit form is submitted i want to update index.php table using websocket but it does not update table. Below are my two files
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Names</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><br>
<table width="100%" class="table table-striped table-bordered table-hover mytables" id="dataTables-example">
<thead>
<tr>
<th> name</th>
</tr>
</thead>
<tbody >
<?php
if(!empty($table_data)){
foreach($table_data as $key=> $value){
$name = $value['name'];
?>
<tr class="odd gradeX">
<td><?php echo $name; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
//create a new WebSocket object.
var wsUri = "ws://localhost:9000/server.php";
websocket = new WebSocket(wsUri);
// connection is open
websocket.onopen = function(ev) {
console.log('socket is open');
}
// Message received from server
websocket.onmessage = function(ev) {
$('#dataTables-example').load ('index.php', '#dataTables-example');
};
websocket.onerror = function(ev){
console.log('socket is error');
};
websocket.onclose = function(ev){
console.log('socket is closed');
};
</script>
</body>
</html>
edit.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>names</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><br>
<form accept-charset="UTF-8" role="form" id="search" name="search" action="edit.php" method="post">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control">
</div>
<center><button class="btn btn-success btn-md" type="submit" name="submit" id="submit">Save</button></center>
</form>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(){
send_message();
});
//create a new WebSocket object.
var wsUri = "ws://localhost:9000/server.php";
websocket = new WebSocket(wsUri);
});
function send_message(){
websocket.send('update tables');
console.log('sending to message to index');
}
</script>
</body>
</html>
I am trying to make a prompt box of sorts in which you click one div and another transitions from visibility = hidden to visibility = visible. This is my code so far and I don't know why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
<script type="text/js">
document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble";
</script>
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
</body>
</html>
Check this out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
<script type="text/javascript">
document.getElementById("selector").style.visibility = "hidden";
document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";};
</script>
</body>
HTML is parsed top to bottom. Your script will be run immediately just in case it produces any more HTML for the parser to handle (e.g. with document.write). At the point of document.getElementById("addpanel").onclick, addpanel does not exist because the HTML parser hasn't reached it yet.
Move your <script> block to after your apppanel element's closing tag.
Also, onclick needs to be a function. So it would be:
document.getElementById("addpanel").onclick = function() {
document.getElementById("selector").style.visibility = "visible"
}
Quick working example: https://jsfiddle.net/m2q6ubuv/
Try this
function show(){
document.getElmenetById('selector').style.visibility = 'visible'; }
Then just put onclick='show()' as an attribute in the tag you want to be the button.
Plus, you should put JavaScript at the end of the page, just first of the </body> tag.
I want to make a popover that covers a table
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.popover {
width: 2000px;
}
.popover-table th, td {
padding: 0px 15px;
white-space:nowrap;
}
</style>
</head>
<body>
4
<div id="popover4-html" style="display: none">
abcdefghi:
<table class="popover-table">
<tr></tr>
<tr>
<th>alongtitleisverylong</th>
<th>linked to event3</th>
<th>100 lines</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</div>
<script>
$('[data-toggle="popover4"]').popover({
html: true,
content: function() {
return $("#popover4-html").html()
}});
</script>
</body>
</html>
JSBin
There are two problems:
1) the width of the popover cannot cover the width of the table
2) I don't want to bold the first row of the table, but I don't know how to do it
Could anyone help?
You can use the following code
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.popover {
width: 2000px;
max-width:50%
}
.popover-table th, td {
padding: 0px 15px;
white-space:nowrap;
}
</style>
</head>
<body>
4
<div id="popover4-html" style="display: none">
abcdefghi:
<table class="popover-table">
<tr></tr>
<tr>
<td>alongtitleisverylong</td>
<td>linked to event3</td>
<td>100 lines</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</div>
<script>
$('[data-toggle="popover4"]').popover({
html: true,
content: function() {
return $("#popover4-html").html();
}});
</script>
</body>
</html>
The <th> tag will always bold the text within it so i have replaced it with <td> tag.
The max-width in the popover class has been given as 276px in the bootstrap.css so i have overridden that by replacing it with max-width:50%.