In this Jsbin example the grid area begins at row 1, column 1 and ends at row 3, column 2.
However in the CSS the grid-area is coded as follows:
grid-area: 1 / 1 / 4 / 3;
While the beginning coordinates (e.g. "1 / 1") are not offset, the second ones are (e.g. instead of being "3 / 2" they are "4 / 3").
Is there a reason why the second coordinates are offset but the first ones are not?
Here also is the markup in the above JsBin:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 10vh);
grid-template-rows: repeat(4, 10vh);
grid-gap: 13px;
background-color: black;
padding: 2px;
justify-content: center;
}
.grid-container>div {
background-color: aqua;
/*rgba(255, 255, 255, 0.8);*/
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 1 / 1 / 4 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>
</body>
</html>
Because the "offset" is, in fact, no such thing.
The numbers related to the gridlines; so column1 starts at 1 ends at 2, column2 starts at 2 ends at 3 and so on.
Each row/column has two lines, a start number and an end number...e.g. grid-row-start and grid-row-end.
Clearly end must be larger than start or there would be nothing in between...hence the "offset" you refer to.
Example image..
grid-area: 1 / 1 / 4 / 3;
is functionally..
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 4; /* end of row 3 */
grid-column-end: 3; /* end of column 2 */
Related
I want to display percent instead of an integer.
Now it simply shows the value as integer when hovering on the data point of the chart (the tooltip).
I think I need to set in the formatter formula like this:
let test = value / SUM(all_values)
return test.toFixed(0) + '%'
But, I could not find it in their documentation, the best I found is this one which always gives me 100%, per every data point:
tooltip: {
y: {
formatter: function(value, opts) {
let percent = opts.w.globals.seriesPercent[opts.seriesIndex][opts.dataPointIndex];
return percent.toFixed(0) + '%'
}
}
}
You're right that you'll need to use the tooltip formatter, but the array you're using to get the percentage values isn't correct.
If you log the values opts.w.globals.seriesPercent you'll find that it's all 100's:
[[100, 100, 100, ..., 100]]
(I suspect this might be because it's intended to be used with other chart types.)
You can still get the percentage though, it'll just need to be worked out.
Using your same method to format the tooltip, but getting the values from opts.series instead:
tooltip: {
y: {
formatter: function(value, opts) {
const sum = opts.series[0].reduce((a, b) => a + b, 0);
const percent = (value / sum) * 100;
return percent.toFixed(0) + '%'
},
},
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="app/app.js"></script>
<script>
let apiLabels = [];
let apiData = [];
let currentTimestamp = (Math.floor(Date.now() / 1000)).toString();
//use this URL for daily fetch
//let url = "https://aave-api-v2.aave.com/data/rates-history?reserveId=0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb480xb53c1a33016b2dc2ff3653530bff1848a515c8c5&resolutionInHours=24&from="+currentTimestamp;
let url = "https://aave-api-v2.aave.com/data/rates-history?reserveId=0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb480xb53c1a33016b2dc2ff3653530bff1848a515c8c5&resolutionInHours=24&from=1639813032";
// months list
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// fetch from api
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
let myData = JSON.parse(this.responseText);
console.log(myData);
for (let i = 0; i < myData.length; i++) {
//let formedDate = (myData[i]['x']['year']+'-'+myData[i]['x']['month']+'-'+myData[i]['x']['date']).toString();
let formedDate = monthNames[myData[i]['x']['month']] + ' ' + myData[i]['x']['date'];
console.log(formedDate);
let formedLiquidData = (myData[i]['liquidityRate_avg'] * 100).toFixed(2);
console.log(formedLiquidData+"%");
apiLabels.push(formedDate);
apiData.push(formedLiquidData);
}
const data = {
labels: apiLabels,
datasets: [
{
label: "USDC",
borderColor: "rgb(180,11,107)",
data: apiData
}
]
};
const config = {
type: "line",
data: data,
options:{
scales: {
y: {
ticks: {
callback: function (value, index, values) {
return value + '%';
}
}
},
},
},
};
const myChart = new Chart(document.getElementById("myChart"), config);
}
});
xhr.open(
"GET",
url
);
xhr.send();
</script>
</div>
<div id="app"></div>
<title>brew</title>
<style>
body {
background-color: white;
}
.center-form {
width: 80%;
margin: auto;
}
#title {
color: teal;
text-align: center;
}
.waitlist {
position: relative;
z-index: 3;
width: 146px;
height: 30px;
margin-top: 60px;
border-style: solid;
border-width: 1px;
border-color: #081852;
background-color: transparent;
box-shadow: -10px 10px 0 0 #081852;
color: #081852;
font-size: 12px;
line-height: 30px;
font-weight: 400;
text-align: center;
letter-spacing: 0.21px;
position: fixed;
right: 3%;
top: -5%;
}
.waitlist-button {
display: inline-block;
padding: 9px 15px;
background-color: #3898EC;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
border-radius: 0;
}
.box-prices {
padding: 20px;
width: 200px;
height: auto;
color: #000;
/* background-color: #fff; */
border: 4px solid #1c1c53;
border-radius: 2px;
}
.dropbtn {
background-color: navy;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #0b95f1;
}
footer {
display: flex;
justify-content: space-between;
}
.myChart {
width: 50%;
height: 40px;
}
/* Decorative */
a {
text-decoration: none;
color: #555;
}
footer {
background-color: #82cdf8;
padding: 20px 40px;
}
.right {
float: left;
text-align: center;
}
.article {
color: white;
}
</style>
</head>
<body>
<img src="https://uploads-ssl.webflow.com/61768faf04d20bf3487b5a2a/6176a6363e64b8d84e32d0b7_brew-icon-256px-v2.png"
loading="eager" width="55" height="55" alt="Brew" class="img-logo" position="absolute" top="-3%" left="7;">
<!-------------- title------------------------>
<div class="container">
<div class="row">
<div class="col-md-12 mt-2">
<h1 style="color: #1c98">
Stablecoin Deposits on Aave
</h1>
<a data-w-id="14f1dfb2-926f-581f-7faa-3f62171b1db3" href="" class="waitlist waitlist-button">Join the
waitlist</a>
</div>
</div>
</div>
<!------------------------AAVE PRICE ------------>
<div class="container">
<div class="row mt-5">
<div class="col-md-6">
<div class="aave-prices">
<p>AAVE PRICE</p>
<p>$172.8</p>
<p>16%</p>
</div>
</div>
<!------------------------AAVE DESCRIPTION ------------>
<div class="col-md-6">
<h1>What is AAVE ?</h1>
<p>Aave is an open source and non-custodial liquidity protocol for earning
interest on deposits and borrowing assets.</p>
</div>
</div>
<!------------------------AAVe CHAIN ------------>
<div class="row">
<div class="col-md-12 mt-3">
<button class="dropbtn">CHAIN</button>
<div class="dropdown-content">
Polygon
Ethereum
Avalance
</div>
</div>
</div>
</div>
<!------graph----->
<div>
<canvas id="myChart" height="50" weidth="50"></canvas>
</div>
<!-- calculator -->
<div class="container mt-5" style="border: 1px solid black; border-radius: 5px;">
<div class="row">
<div class="col-md-12">
<h1 id="title">How Much You Can Earn ?</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group mt-2">
<label class="form-group">Amount</label>
<input class="form-control mt-2" type="text" id="principal" placeholder="$">
</div>
<div class="form-group mt-2">
<label class="form-group">Interest rate: 4%</label>
</div>
<div class="form-group mt-2">
<label class="form-group">Compound Freequency: Daily</label>
</div>
<div class="form-group mt-2">
<label class="form-group">Payout Freequency: Monthly</label>
</div>
<button class="btn btn-block btn-info mt-3" type="button" onclick="calculate()">Calculate</button>
</form>
</div>
<div class="col-md-6">
<form style="padding-top: 70px;">
<div class="form-group mt-2">
<label class="form-group">Interest rate: 5%</label>
</div>
<div class="form-group mt-2">
<label class="form-group">Compound Freequency: Daily</label>
</div>
<div class="form-group mt-2">
<label class="form-group">Payout Freequency: Monthly</label>
</div>
</form>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<h5 class="total">Result USD</h5>
<h1 id="USD"></h1>
</div>
<div class="col-md-6">
<h5 class="total">Result USDT</h5>
<h1 id="USDC"></h1>
</div>
</div>
</div>
<!-- calculator end -->
<div>
<canvas id="myChart_subbagain" height="50" weidth="50" top="80%"></canvas>
</div>
<!----footer-->
<div class="col-md-12 mt-5">
<footer>
<div class="col-md-6">
<img src="/dawnload.png" alt="" width="150">
</div>
<div class="col-md-6">
<section class="right">
Join Brew Today
<article>USDC is not a legal tender recognised by US or any other government. Unlike a bank account, your
deposit is not insured. While Brew will make every effort to ensure that your deposit earn the best interest
rates in the most secure way possible, please note that any investment entails risk. Interest Rates are
subject to change anytime as per the market conditions.</article>
</section>
</div>
</footer>
</div>
</body>
<script type="text/javascript">
function calculate() {
var principle = 0;
var interest = 5 / 100;
var numberOfPeriod = 12;
var time = 10;
var CI = 0;
principle = document.getElementById("principal").value;
// CI = ((p * (1 + i) ^ n) - p);
CI = principle * (1 + interest / numberOfPeriod) ^ (numberOfPeriod * time);
document.getElementById("USD").innerHTML = CI;
document.getElementById("USDC").innerHTML = CI;
}
</script>
<!------cal graph-->
</html>
.div_wrap_p_bestgames {
display: table;
width: 130px;
height: 40px;
float: left;
background: #1B1C1E;
position: relative;
margin-top: 150px;
margin-left: -100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
this is css code.
I want to set div_wrap_p_bestgames's mouseout function
if condition with background color #1B1C1E
function onMouseoutNewGames() {
if (document.getElementById("div_wrap_p_newgames").style.background == "#1B1C1E")
///do something
}
this condition is not working
You will need to use the below line to get the background color of an element
document.getElementById("div_wrap_p_newgames").style.backgroundColor
if you need to compare this with a specific value, convert your hex code to a rgb value and compare it as such,
if(document.getElementById("myDiv").style.backgroundColor == "rgb(27, 28, 30)")
rgb(28,27,30) is the equivalent of #1B1C1E
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
<div id="myDiv" style="background-color:#1B1C1E;">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Get the background color of div</button>
<script>
function myFunction() {
if(document.getElementById("myDiv").style.backgroundColor == "rgb(27, 28, 30)")
{
alert("hi");
}
}
</script>
</body>
</html>
Works fine when I try it.
This is an example of what I like to achieve:
I didn't success to create it with CSS GRID so I tried to use masonry framework:
https://codepen.io/noamall/pen/ExPVYJj
<h1>Masonry - fluid columnWidth</h1>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item grid-item--width3" style="height:400px;"></div>
<div class="grid-item grid-item--width2" style="height:200px;"></div>
<div class="grid-item grid-item--width2" style="height:200px;"></div>
<div class="grid-item grid-item--width2" style="height:200px;"></div>
<div class="grid-item grid-item--width2" style="height:200px;"></div>
<div class="grid-item grid-item--width3" style="height:400px;"></div>
</div>
Also without success.
Thanks.
create a 6 x 3 grid and use grid-row and grid-column properties to make some of the grid items span to 2 rows and 2 columns.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 100px);
grid-gap: 10px;
}
.grid-item {
background-color: #fc3;
height: 100%;
width: 100%;
}
.grid-item:nth-child(1) {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
}
.grid-item:nth-child(6) {
grid-row: 3 / span 2;
grid-column: 2 / span 2;
}
.grid-item:nth-child(7) {
grid-row: 5 / span 2;
grid-column: 1 / span 2;
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Edit:
If you want this grid layout to work with any number of images, you can use multiple 6 x 3 grids and use :nth-child(even) selector to target even .grid elements and change which .grid-item spans 2 rows and 2 columns in those .grid elements.
In the following example, i have used 3 .grid elements each containing 9 .grid-items
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
margin-bottom: 10px;
}
.grid-item {
background-color: #fc3;
height: 100%;
width: 100%;
}
.grid-item:nth-child(1) {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
}
.grid-item:nth-child(6) {
grid-row: 3 / span 2;
grid-column: 2 / span 2;
}
.grid-item:nth-child(7) {
grid-row: 5 / span 2;
grid-column: 1 / span 2;
}
.grid:nth-child(even) .grid-item:first-child {
grid-row: 1 / span 2;
grid-column: 2 / span 2;
}
.grid:nth-child(even) .grid-item:nth-child(6) {
grid-row: 3 / span 2;
grid-column: 1 / span 2;
}
.grid:nth-child(even) .grid-item:nth-child(7) {
grid-row: 5 / span 2;
grid-column: 2 / span 2;
}
<div class="container">
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
this is my question:
is it possible to set equal heights to last items in row?
My masonry layout is on two columns and I would like to set the last two items with the same height...
UPDATE
This is a simple starting code that I think to use because I haven't yet begun to work on it:
/* ---- js ---- */
jQuery(document).ready(function($) {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
isInitLayout: false,
isFitWidth: true
});
$container.masonry('layout');
});
});
/* ---- css ---- */
.wrapper{
margin: 0 auto;
}
#container {
width: 100%;
height: 1200px;
background: #DDD;
margin: 0 auto;
}
#container:after {
content: '';
display: block;
clear: both;
}
.item {
float: left;
width: 500px;
background: #0D8;
border-color: hsla(0, 0%, 0%, 0.7);
}
.item img{
max-width: 100%;
}
<!-- ---- html ---- -->
<div class="wrapper">
<div id="container">
<div class="item"><img src="img/image1.jpg" width="500" height="200" alt="" /></div>
<div class="item"><img src="img/image2.jpg" width="500" height="450" alt="" /></div>
<div class="item"><img src="img/image3.jpg" width="500" height="300" alt="" /></div>
<div class="item"><img src="img/image4.jpg" width="500" height="260" alt="" /></div>
<div class="item"><img src="img/image5.jpg" width="500" height="500" alt="" /></div>
<div class="item"><img src="img/image6.jpg" width="500" height="420" alt="" /></div>
<div class="item"><img src="img/image7.jpg" width="500" height="260" alt="" /></div>
<div class="item"><img src="img/image8.jpg" width="500" height="430" alt="" /></div>
</div>
</div>
Thank you.
Fabio
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Working with Susy 2 Grid Layouts</title>
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<div class="notice"><h3>Susy is GREAT.. But really..!</h3></div>
<div class="container">
<div class="one"><strong>1</strong><br />
#include span(8)<br />
#include prefix(1) <em>//padding</em><br />
</div>
<div class="buttons">
A Pure Button
</div>
<div class="notice">this is some notice</div>
</div>
</body>
</html>
app.scss
#import 'susy';
$susy: (
flow: ltr,
output: float,
math: fluid,
column-width: false,
container: 1140px,
last-flow: to,
columns: 12,
gutters: 1/8,
gutter-position: after,
global-box-sizing: border-box,
debug: (
image: show,
color: rgba(green, .25),
output: background,
toggle: top right
),
);
#include global-box-sizing(border-box);
img {
width: 100%;
height: auto;
}
.notice {
#include full;
background-color: yellow;
}
.notice {
padding: 5px 8px;
}
.container {
#include container;
font-size: small;
}
em {
background-color: yellow;
color: black;
font-weight: bold;
}
.one {
#include span(8); // can be narrow(default), wide & wider
#include prefix(1);
height: 200px;
background-color: blue;
color: white;
}
.buttons {
#include span(1 at 2 fluid isolate); // shouln't this be 1 at 10 as it is still in context of 12???
}
Shouldn't that span shorthand with isolate mode, specify column 10 instead
of 2, as I am still in a context of 12 columns, and first 8 were occupied by
.one div? Everything other in Susy behaves logically and I did not have any
problems but this one trips me off.
However, if I specify:
.buttons {
#include break; // which does clear:both on this element
#include span(1 at 10 fluid isolate);
}
, then I have to tell it to be on 10th column. Is this supposed to work like
this?
Since Susy is not aware of the DOM, all positioning is relative to the default flow. Isolation can work around that, if everything in a given context is isolated — because that pulls everything out of the horizontal flow. But when you isolate only one element, it will position itself off other elements to it's left.