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>
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 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%.
1 - a simple form that contains a select (let's call it select1) and a dojo datagrid below it.
2 - when you change the value of select1 it toggles the visibility of another select, let's call it select2, located between select1 and datagrid1
3 - when select2 appears, datagrid1 doesn't move to make room for it. I need that to happen
PLEASE NOTE: due to something with arcgis.com, sometimes the snippet does not run at first click.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
What you need is to resize the BorderContainer after changing the content height.
So you need to call borderContainer.resize();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
borderContainer.resize();
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-id="borderContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm working on a datatables JQuery in a JSF page, but the issue is that the pagination doesn't work in spite of it is shown.
This is my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://java.sun.com/jsf/passthrough"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Test-Page</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="../css/shCore.css" />
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/header.css" />
<link rel="stylesheet" type="text/css" href="../css/style_combo.css" />
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="../js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../js/demo.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#example').dataTable({
"bPaginate": true,
"bFilter": false,
"bInfo": true,
"bProcessing" : false,
"bJQueryUI" : true,
"sEmptyTable" : "No messages found",
});
} );
</script>
</h:head>
<h:body class="dt-example">
<h:form>
<table id="example" class="display compact" cellspacing="0"
width="100%">
<ui:repeat var="ee" value="#{controller.address}"
varStatus="row">
<thead>
<tr>
<ui:repeat value="#{ee.entrySet().toArray()}" var="entete1">
<th><h:outputLabel value="#{entete1.key}"
rendered="#{row.index == 0}" /></th>
</ui:repeat>
</tr>
</thead>
<tbody>
<tr>
<ui:repeat value="#{ee.entrySet().toArray()}" var="entete">
<td><h:outputLabel value="#{entete.value}" /></td>
</ui:repeat>
</tr>
</tbody>
</ui:repeat>
</table>
</h:form>
</h:body>
</ui:composition>
As long as bPaginate is true i believe that the pagination has to work with no problem at all except that my page it is not the case.
Any idea ?
NB: i khnow that there is datatable and extendtables in jsf and richfaces but i have to work juste with With the code above.
After a long analysis I found that and do not have to be inside the loop and also the number of columns has to be the same that what we have in the header.
the css and js files are always the same and i changed just the content of <h:form></h:form>
Here is the example which works perfectly well:
<h:form>
<table id="example" class="cell-border" cellspacing="0" width="100%">
<thead>
<tr>
<ui:repeat value="#{mycontroler.listOfHead}" var="head">
<th><h:outputLabel value="#{head}" /></th>
</ui:repeat>
</tr>
</thead>
<tbody>
<ui:repeat var="details" value="#{mycontroler.ExampleLits}"
varStatus="rowStatus">
<tr>
<ui:repeat value="#{details.entrySet().toArray()}" var="details2">
<td><h:outputLabel value="#{details2.value}">
</h:outputLabel></td>
</ui:repeat>
</tr>
</ui:repeat>
</tbody>
</table>
</h:form>