| MFColumnGradient / beta / demo.html file last updated : 2023-11-07 |
|---|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/icon?family=Roboto|Material+Icons|Material+Icons+Outlined' rel='stylesheet preload prefetch' as='style'>
<style>
* {
font-family:Roboto;
}
table.myTable {
border-collapse:collapse;
margin:10px;
width:200px;
}
.myTable td {
border:solid 1px grey;
padding:4px;
}
button {
height:28px;
vertical-align: top;
}
h1 {
font-size:16pt;
}
</style>
<!-- <script src='https://www.methodfish.com/Download/MFColumnGradient/files/1.0/MFColumnGradient.js'></script>-->
<script src='http://localhost/methodfish/public_html/Download/MFColumnGradient/files/beta/js/MFColumnGradient.js'></script>
</head>
<body>
<h1>MFColumnGradient Javascript Class</h1>
<p>
This is a demonstrator for MFColumnGradient to adjust the background colors of a column depending on the cells value vs the columns range.
</p>
<p>
For more information, see <a href="https://www.methodfish.com/Projects/MFColumnGradient">https://www.methodfish.com/Projects/MFColumnGradient</a>
</p>
Low : <input type="color" value="#005500" id="lowCol">
High : <input type="color" value="#00FF00" id="highCol">
<button onClick="doGradients()">Go</button>
<h2>Basic scale</h2>
<table class='myTable' id="myTable1">
<tr>
<td>A</td>
<td>€65,000.00</td>
</tr>
<tr>
<td>B</td>
<td>€66,000.00</td>
</tr>
<tr>
<td>C</td>
<td>€67,000.00</td>
</tr>
<tr>
<td>D</td>
<td>€68,000.00</td>
</tr>
</table>
<h2>Scale with , as decimal point</h2>
<table class='myTable' id="myTable2">
<tr>
<td>Z</td>
<td>£90.000,00</td>
</tr>
<tr>
<td>Y</td>
<td>£89.000,20</td>
</tr>
<tr>
<td>X</td>
<td>£88.000,50</td>
</tr>
<tr>
<td>M</td>
<td>£77.000,70</td>
</tr>
<tr>
<td>A</td>
<td>£65.000,50</td>
</tr>
</table>
<h2>Scale with auto foreground</h2>
<table class='myTable' id="myTable3">
<tr>
<td>A</td>
<td>65.70%</td>
</tr>
<tr>
<td>B</td>
<td>66.60%</td>
</tr>
<tr>
<td>C</td>
<td>n/a</td>
</tr>
<tr>
<td>D</td>
<td>68.50%</td>
</tr>
</table>
<script>
function doGradients() {
console.log('init');
const colN = 1; // columns start at 0 (so 2 is the third column)
const lowValueCol = document.getElementById('lowCol').value;
const highValueCol = document.getElementById('highCol').value;
let gradient = new MFColumnGradient('myTable1', lowValueCol, highValueCol);
gradient.setColumnGradient(colN);
gradient = new MFColumnGradient('myTable2', lowValueCol, highValueCol);
gradient.setDecimalPlaceChar(',');
gradient.setColumnGradient(colN);
gradient = new MFColumnGradient('myTable3', lowValueCol, highValueCol);
gradient.setAutoForeground('black', 'white');
gradient.setColumnGradient(colN);
}
doGradients();
</script>
</body>
</html>Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment