For some reason the main area of the grid does not transit smoothly when I click on toggle button. There is a gap between the sidebarTwo and main area.
Let me know if I am doing something wrong when trying to implement push off-canvas sidebar using CSS Grid.
Here are
grid-template-areas:
'header header header'
'main main sidebarTwo'
'footer footer footer';
code
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnOne = document.querySelector('#toggleOne');
const sidebarMainOne = document.querySelector('.main');
const sidebarMainTwo = document.querySelector('.sidebarTwo');
const replaFunction = () => {
toggleBtnOne.classList.contains('fa-toggle-on') ?
toggleBtnOne.classList.replace('fa-toggle-on', 'fa-toggle-off') :
toggleBtnOne.classList.replace('fa-toggle-off', 'fa-toggle-on');
sidebarMainOne.classList.toggle('active');
sidebarMainTwo.classList.toggle('active');
};
toggleBtn.addEventListener('click', replaFunction);
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps');
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100wh;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
display: grid;
grid-template-columns: auto 8fr auto;
grid-template-rows: 80px auto 50px;
grid-template-areas: 'header header header' 'main main sidebarTwo' 'footer footer footer';
}
a {
text-decoration: none;
color: #e8e8e8;
}
.box {
background: #ff4365;
padding: 2em;
height: 100px;
}
.header {
grid-area: header;
background: #2c343b;
color: #e9d20f;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background: #ecedf2;
display: grid;
grid-gap: 1.5em;
grid-template-columns: auto;
grid-template-rows: max-content 1fr;
grid-template-areas: 'charts' 'trading';
padding: 1.5em 1.5em 1.5em 1.5em;
transition: all 1000ms ease-in-out;
}
.sidebarTwo {
grid-area: sidebarTwo;
width: 260px;
right: -260px;
background: #2c343b;
height: 100%;
transition: all 1000ms ease-in-out;
}
.sidebarTwo.active {
position: fixed;
transform: translateX(260px);
transition: all 1000ms ease-in-out;
}
.charts {
grid-area: charts;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.trading {
grid-area: trading;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, auto);
grid-template-rows: minmax(200px, 600px);
grid-auto-flow: dense;
grid-template-areas: 'one one two two two two';
}
.two {
grid-area: two;
height: auto;
background: #495867;
}
.one {
grid-area: one;
height: auto;
}
.footer {
grid-area: footer;
background: #2c343b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="header active">
<div id="category-tabs">
<a href="#" onclick="return false;" class="left"
><i id="toggleOne" class="fas fa-toggle-on fa-2x"></i
></a>
</div>
<h1 class="header-title">CSS Grid - grid-template-areas</h1>
</div>
<div class="sidebarTwo"></div>
<div class="main">
<div class="trading">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="charts">
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
<div class="box six">6</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Here is the answer. Not the best solution but it works.
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnOne = document.querySelector('#toggleOne');
const sidebarMainOne = document.querySelector('.main');
const sidebarMainTwo = document.querySelector('.sidebarTwo');
const replaFunction = () => {
toggleBtnOne.classList.contains('fa-toggle-on')
? toggleBtnOne.classList.replace('fa-toggle-on', 'fa-toggle-off')
: toggleBtnOne.classList.replace('fa-toggle-off', 'fa-toggle-on');
sidebarMainOne.classList.toggle('active'); sidebarMainTwo.classList.toggle('active');
};
toggleBtn.addEventListener('click', replaFunction);
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps');
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100wh;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
display: grid;
grid-template-columns: auto 8fr auto;
grid-template-rows: 80px auto 50px;
grid-template-areas:
'header header header'
'main main sidebarTwo'
'footer footer footer';
}
a {
text-decoration: none;
color: #e8e8e8;
}
.box {
background: #ff4365;
padding: 2em;
height: 100px;
}
.header {
grid-area: header;
background: #2c343b;
color: #e9d20f;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background: #ecedf2;
width: calc(100% - 50px);
display: grid;
grid-gap: 1.5em;
grid-template-columns: auto;
grid-template-rows: max-content 1fr;
grid-template-areas: 'charts' 'trading';
padding: 1.5em 1.5em 1.5em 1.5em;
transition: all 500ms ease-in-out;
}
.sidebarTwo {
grid-area: sidebarTwo;
position: fixed;
right: -360px;
width: 360px;
background: #2c343b;
height: 100%;
transition: all 500ms ease-in-out;
}
.sidebarTwo.active {
transform: translateX(-360px);
transition: all 500ms ease-in-out;
}
.main.active {
width: calc(100% - 410px);
transition: all 500ms ease-in-out;
}
.charts {
grid-area: charts;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.trading {
grid-area: trading;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, auto);
grid-template-rows: minmax(200px, 600px);
grid-auto-flow: dense;
grid-template-areas: 'one one two two two two';
}
.two {
grid-area: two;
height: auto;
background: #495867;
}
.one {
grid-area: one;
height: auto;
}
.footer {
grid-area: footer;
background: #2c343b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="header active">
<div id="category-tabs">
<a href="#" onclick="return false;" class="left"
><i id="toggleOne" class="fas fa-toggle-on fa-2x"></i
></a>
</div>
<h1 class="header-title">CSS Grid - grid-template-areas</h1>
</div>
<div class="sidebarTwo"></div>
<div class="main">
<div class="trading">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="charts">
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
<div class="box six">6</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Related
I'm pretty new to JavaScript and I'm trying to make the range slider in my Etch-a-Sketch project work, so that its value (i.e 8x8 - 64x64 = grid size) corresponds with the total number of div's inside my grid-container (.square). The value gets logged into the console, but I can't figure out how to change the total number of squares dynamically according to the sliders value. If I hardcode the value in makeRows(), the grid(lines) show up properly.
I think I'm doing something wrong with scoping and/or passing the correct parameters..? Can anyone give me a hand please?
Codepen:
https://codepen.io/Mein-Hirsch/pen/abKLzrV
const gridContainer = document.getElementById("grid-container");
// const colors = ["#e74c3c", "#8e44ad", "#3498db", "#e67e22", "#2ecc71"];
const range = document.getElementById("range"); //input Id
const rangeValue = document.getElementById("rangeValue");
let strToNum;
function makeRows(rows, cols) {
gridContainer.style.setProperty("--grid-rows", rows);
gridContainer.style.setProperty("--grid-cols", cols);
for (i = 0; i < rows * cols; i++) {
let cell = document.createElement("div");
gridContainer.appendChild(cell).className = "square";
}
}
makeRows(32, 32);
function sliderValue() {
let strToNum = parseInt(range.value);
console.log(strToNum);
return strToNum;
}
range.addEventListener("input", sliderValue);
Screenshot
JS Code
Thank you guys!
You just have to call your function with the correct parameters.
You don't have to set a variable, +x is the same as parseInt(x).
Also, don't forget to empty the grid before adding the new elements.
const gridContainer = document.getElementById("grid-container");
// const colors = ["#e74c3c", "#8e44ad", "#3498db", "#e67e22", "#2ecc71"];
const range = document.getElementById("range");
const rangeValue = document.getElementById("rangeValue");
function makeRows(rows, cols) {
gridContainer.innerHTML = "";
gridContainer.style.setProperty("--grid-rows", rows);
gridContainer.style.setProperty("--grid-cols", cols);
for (i = 0; i < rows * cols; i++) {
let cell = document.createElement("div");
gridContainer.appendChild(cell).className = "square";
}
}
makeRows(32, 32);
function sliderValue() {
makeRows(+range.value, +range.value);
}
range.addEventListener("input", sliderValue);
/* Basic sytling-----------------------------> */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--grid-cols: 1;
--grid-rows: 1;
}
body {
width: 100vw;
height: 100vh;
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
background-color: #2c2f36;
color: white;
}
main {
display: flex;
justify-content: center;
}
h1 {
font-size: 3.5rem;
text-align: center;
margin-top: 3rem;
}
.main-container {
width: 900px;
display: flex;
justify-content: space-evenly;
align-items: center;
margin-top: 5rem;
}
/* Settings-Container Styling -------------------------> */
.settings {
width: 350px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
#color-picker {
margin: 1rem 0 2rem 0;
width: 190.94px;
height: 46px;
cursor: pointer;
padding: 0;
}
input[type="color"]:first-child {
padding: 0;
margin: 0;
border: none;
box-shadow: none;
border-radius: 100px;
background: none;
margin-bottom: 20px;
}
input[type="color"]:hover {
transform: scale(1.03);
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
.settings button {
width: 190.94px;
margin-bottom: 2rem;
font-size: 1.2rem;
padding: 0.75rem 0.75rem;
border-style: none;
cursor: pointer;
color: #fdfdfd;
background-color: #3c3f46;
box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.15);
}
.settings button:hover {
background-color: #494c55;
}
/* Grid Container Styling -------------------------------> */
#grid-container {
width: 500px;
height: 500px;
background-color: #fdfdfd;
box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.4);
display: grid;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
/* grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr); */
box-sizing: inherit;
overflow: hidden;
}
.square {
border: 1px solid rgb(224, 219, 219);
}
/* Slider Styling ---------------------------------------> */
.slider {
width: 190.94px;
height: 60px;
padding: 30px;
padding-left: 40px;
background-color: #2c2f36;
display: flex;
align-items: center;
justify-content: center;
}
.slider p {
font-size: 1rem;
font-weight: 400;
padding-left: 20px;
color: #fdfdfd;
}
.slider input[type="range"] {
-webkit-appearance: none !important;
height: 2px;
background: #5c606b;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 20px;
height: 20px;
background: #ca4d4d;
border: 1px solid black;
border-radius: 50%;
cursor: pointer;
}
/* Footer Styling ------------------------------------------------> */
footer {
color: #fdfdfd;
display: flex;
justify-content: center;
padding: 1rem;
position: relative;
}
.footer-content {
display: flex;
justify-content: center;
position: fixed;
bottom: 0px;
margin-bottom: 2rem;
}
.fa-github {
color: #151516;
font-size: 24px;
transition: transform 0.3s ease-in-out;
margin-left: 0.6rem;
}
.fa-github:hover {
transform: rotate(360deg) scale(1.2);
}
<!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" />
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<script src="https://kit.fontawesome.com/4c536a6bd5.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<title>Etchy</title>
</head>
<body>
<h1>Etch a Sketch</h1>
<main>
<div class="main-container">
<div class="settings">
<input id="color-picker" type="color" />
<button id="color-mode">Color mode</button>
<button id="rainbow-mode">Rainbow mode</button>
<button id="eraser">Eraser</button>
<button id="clear">Reset</button>
<div class="slider">
<input type="range" min="8" max="64" value="100" id="range" oninput="rangeValue.innerText = this.value" />
<p id="rangeValue">32</p>
</div>
</div>
<div id="grid-container" class="container"></div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
Never ran into this problem before. Basically I added a class list toggle on my header via Javascript, and it normally works fine, but when I add media queries that have nothing to do with the header, it stops working. If you need any more info let me know. Any ideas? I'm lost
EDIT: Added additional HTML Code
Here's all my code
window.addEventListener('scroll', () => {
let header = document.querySelector('.page-header');
header.classList.toggle('sticky', window.scrollY > 30);
})
.page-header {
width: 100%;
height: 60px;
background-color: var(--main-bg-color);
display: flex;
flex-direction: row;
align-items: center;
color: white;
font-weight: bold;
overflow: hidden;
position: fixed;
transition: .7s;
z-index: 1;
}
.page-header.sticky {
background-color: white;
color: black;
position: fixed;
z-index: 1;
transition: .7s;
box-shadow: 5px 5px 3px lightgray;
}
.portfolio-images {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
margin-top: 50px;
}
.portfolio-images img {
margin-right: auto;
margin-left: auto;
}
.portfolio-images img:hover {
filter: brightness(.4);
transition: .4s;
cursor: pointer;
}
/* media queries */
#media all and (max-width: 1275px) {
.portfolio-images {
grid-template-columns: 1fr 1fr;
}
.portfolio-images img {
width: 40vw;
height: auto;
}
#media all and (max-width: 500px) {
.portfolio-images {
grid-template-columns: 1fr;
}
.portfolio-images img {
width: 90vw;
height: auto;
}
}
<div class="page-header">
<h1 id="logo">ParallaxStudios</h1>
<div class="navigation-container">
<ul>
<li><a class="navigation-item">Portfolio</a></li>
<li><a class="navigation-item">Socials</a></li>
<li><a class="navigation-item">Staff</a></li>
</ul>
</div>
<div class="rightside-navigation">
<h3 id="contact">Contact</h3>
</div>
</div>
<div class="portfolio-container">
<h1>Current Projects</h1>
<div class="portfolio-images">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
<img src="https://via.placeholder.com/420">
</div>
</div>
You literally have one missing } in the end the of one of the Media Queries here:
#media all and (max-width: 1275px) {
.portfolio-images {
grid-template-columns: 1fr 1fr;
}
.portfolio-images img {
width: 40vw;
height: auto;
}
} //this one was missing.
#media all and (max-width: 500px) {
.portfolio-images {
grid-template-columns: 1fr;
}
.portfolio-images img {
width: 90vw;
height: auto;
}
}
I have added a lottie hamburger menu for a responsive one page site for the mobile break point. I would like two things happen as follows:
When clicked on one of the links the menu disappears.
at the same time the lottie animation goes back to hamburger icon state when clicked on a link, (it staying in X state)
Here is the link
https://codepen.io/OralYildiz/pen/abwvazw
/*--Lottie Animation and Mobile Menu Appear---*/
const pageHeader = document.querySelector(".header");
const toggleMenu = document.querySelector(".toggle-menu");
const player = document.querySelector("lottie-player");
const menuWrapper = document.querySelector(".nav__menu");
const menuOpenedClass = "menu-open";
const noTransitionClass = "no-transition";
let timer;
toggleMenu.addEventListener("click", function (e) {
e.preventDefault();
pageHeader.classList.toggle(menuOpenedClass);
if (pageHeader.classList.contains(menuOpenedClass)) {
this.setAttribute("aria-label", "Close navigation");
this.setAttribute("aria-expanded", "true");
player.getLottie().playSegments([0, 45], true);
} else {
this.setAttribute("aria-label", "Open navigation");
this.setAttribute("aria-expanded", "false");
player.getLottie().playSegments([45, 0], true);
//player.getLottie().playSegments([46, 90], true);
}
});
window.addEventListener("resize", function () {
menuWrapper.classList.add(noTransitionClass);
clearTimeout(timer);
timer = setTimeout(function () {
menuWrapper.classList.remove(noTransitionClass);
}, 500);
});
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader() {
const header = document.getElementById("header");
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if (this.scrollY >= 50) header.classList.add("scroll-header");
else header.classList.remove("scroll-header");
}
window.addEventListener("scroll", scrollHeader);
/*=============== SHOW SCROLL UP ===============*/
function scrollUp() {
const scrollUp = document.getElementById("scroll-up");
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
if (this.scrollY >= 200) scrollUp.classList.add("show-scroll");
else scrollUp.classList.remove("show-scroll");
}
window.addEventListener("scroll", scrollUp);
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll("section[id]");
function scrollActive() {
const scrollY = window.pageYOffset;
sections.forEach((current) => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute("id");
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.add("active-link");
} else {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.remove("active-link");
}
});
}
window.addEventListener("scroll", scrollActive);
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
distance: "60px",
duration: 2500,
delay: 400
// reset: true
});
sr.reveal(`.home__header, .section__title`, { delay: 600 });
sr.reveal(`.home__footer`, { delay: 700 });
sr.reveal(`.home__img`, { delay: 900, origin: "top" });
sr.reveal(
`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,
{ origin: "top", interval: 100 }
);
sr.reveal(`.specs__data, .discount__animate`, {
origin: "left",
interval: 100
});
sr.reveal(`.specs__img, .discount__img`, { origin: "right" });
sr.reveal(`.case__img`, { origin: "top" });
sr.reveal(`.case__data`);
/*=============== GOOGLE FONTS ===============*/
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--hue-color: 206;
--black-color: hsl(var(--hue-color), 4%, 4%);
--black-color-alt: hsl(var(--hue-color), 4%, 8%);
--title-color: hsl(var(--hue-color), 4%, 95%);
--text-color: hsl(var(--hue-color), 4%, 75%);
--text-color-light: hsl(var(--hue-color), 4%, 65%);
--white-color: #FFF;
--body-color: hsl(var(--hue-color), 4%, 6%);
--container-color: hsl(var(--hue-color), 4%, 10%);
--text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
--scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
--scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 5rem;
--bigger-font-size: 3.5rem;
--big-font-size: 2.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
--text-line-height: 2rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
#media screen and (min-width: 968px) {
:root {
--biggest-font-size: 7.5rem;
--bigger-font-size: 4.5rem;
--big-font-size: 4rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1, h2, h3 {
color: var(--title-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
button,
input {
border: none;
outline: none;
}
button {
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
padding: 4rem 0 2rem;
}
.section__title {
font-size: var(--bigger-font-size);
text-align: center;
margin-bottom: var(--mb-2-5);
}
.section__title-gradient {
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== LAYOUT ===============*/
.main {
overflow: hidden;
}
.container {
max-width: 968px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}
.grid {
display: grid;
}
/*=============== HEADER ===============*/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background: transparent;
}
/*=============== NAV ===============*/
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
display: flex;
width: 1.5rem;
}
/*.header .nav__menu {
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}*/
.header.menu-open .nav__menu{
transform: translateY(80px);
}
.header .toggle-menu {
width: 50px;
}
#media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
background-color: var(--body-color);
transform: translateY(-200px);
left: 0;
width: 100%;
padding: 4rem 0 3rem;
transition: .4s;
}
}
.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
}
.nav__link {
color: var(--white-color);
font-size: var(--h2-font-size);
text-transform: uppercase;
font-weight: var(--font-semi-bold);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}
.nav__link:hover {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* show menu */
.nav__menu.active {
top: 0;
}
/* Change background header */
.scroll-header {
background-color: var(--body-color);
}
/* Active link */
.active-link {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== HOME ===============*/
.home__img {
width: 250px;
position: absolute;
top: -16rem;
right: 1.5rem;
}
.home__data {
padding-top: 5rem;
}
.home__header {
position: relative;
}
.home__title {
position: absolute;
top: -4rem;
left: 1rem;
line-height: 6rem;
font-size: var(--biggest-font-size);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.home__subtitle {
font-size: var(--big-font-size);
margin-bottom: var(--mb-2-5);
}
.home__title-description {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}
.home__description {
margin-bottom: var(--mb-2-5);
line-height: var(--text-line-height);
}
.home__price {
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
margin-left: var(--mb-0-75);
}
/*=============== BUTTONS ===============*/
.button {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
padding: 1rem 1.25rem;
border-radius: .5rem;
transition: .3s;
}
.button:hover {
background-color: var(--black-color-alt);
}
.button__icon {
font-size: 1.2rem;
}
.button--flex {
display: inline-flex;
align-items: center;
column-gap: .75rem;
}
/*=============== SPONSOR ===============*/
.sponsor__img {
width: 90px;
}
.sponsor__container {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
row-gap: 5rem;
justify-items: center;
align-items: center;
}
/*=============== SPECS ===============*/
.specs__container {
position: relative;
}
.specs__content {
row-gap: 1.5rem;
}
.specs__data {
display: grid;
row-gap: .25rem;
}
.specs__icon {
font-size: 1.2rem;
color: var(--white-color);
}
.specs__title {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.specs__subtitle {
font-size: var(--smaller-font-size);
}
.specs__data:nth-child(1), .specs__data:nth-child(4) {
margin-left: 1.5rem;
}
.specs__img {
width: 250px;
position: absolute;
top: 2rem;
right: -4rem;
}
/*=============== CASE ===============*/
.case__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.case__data {
padding: 5rem 0 3rem;
}
.case__img {
width: 250px;
position: absolute;
left: -7rem;
}
.case__description {
margin-bottom: var(--mb-1-5);
line-height: var(--text-line-height);
}
/*=============== DISCOUNT ===============*/
.discount__container {
position: relative;
background-color: var(--container-color);
padding: 2rem 1.5rem;
border-radius: .75rem;
}
.discount__title {
font-size: var(--h3-font-size);
margin-bottom: var(--mb-0-75);
}
.discount__description {
margin-bottom: var(--mb-1);
}
.discount__img {
width: 300px;
position: absolute;
top: 4rem;
right: -11rem;
}
/*=============== SCROLL UP ===============*/
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
display: flex;
background-color: var(--container-color);
border-radius: .25rem;
padding: .45rem;
opacity: 9;
z-index: var(--z-tooltip);
transition: .4s;
}
.scrollup:hover {
background-color: var(--black-color);
opacity: 1;
}
.scrollup__icon {
color: var(--white-color);
font-size: 1.35rem;
}
/* Show Scroll Up*/
.show-scroll {
bottom: 5rem;
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
width: .60rem;
border-radius: .5rem;
}
::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color);
border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scroll-thumb-color-alt);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
#media screen and (max-width: 340px) {
.container {
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
.section__title {
font-size: var(--big-font-size);
}
.home__img {
width: 200px;
top: -13rem;
}
.home__title {
top: -4rem;
font-size: var(--bigger-font-size);
}
.home__data {
padding-top: 1rem;
}
.home__description {
font-size: var(--small-font-size);
}
.specs__img {
width: 200px;
}
.case__container {
grid-template-columns: .6fr 1fr;
}
.case__img {
width: 220px;
top: -2rem;
left: -9rem;
}
.case__data {
padding: 0;
}
.products__container {
grid-template-columns: 142px;
justify-content: center;
}
}
/* For medium devices */
#media screen and (min-width: 576px) {
.home__container {
grid-template-columns: .8fr 1fr;
}
.home__data {
padding-top: 2rem;
}
.home__img {
top: -7rem;
left: 0;
}
.specs__img {
position: initial;
}
.specs__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.case__img {
position: initial;
}
.case__data {
padding: 0;
}
.case__container {
grid-template-columns: max-content 250px;
justify-content: center;
align-items: center;
column-gap: 2rem;
}
.discount__img {
position: initial;
}
.discount__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.products__container {
grid-template-columns: repeat(3, 142px);
justify-content: center;
}
}
#media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 6rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__logo {
width: 2rem;
}
.nav__list {
flex-direction: row;
column-gap: 3.5rem;
}
.nav__link {
font-size: var(--normal-font-size);
text-transform: initial;
}
.toggle-menu {
display: none;
}
.home__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.home__img {
top: -9rem;
left: 4rem;
}
.home__data {
padding-top: 8rem;
}
.specs__img {
width: 300px;
}
.case__container {
column-gap: 5rem;
}
.case__img {
width: 300px;
}
.case__description {
margin-bottom: var(--mb-2);
}
.discount__container {
grid-template-columns: 250px max-content;
justify-content: center;
column-gap: 5rem;
padding: 3rem 0;
}
.discount__title {
font-size: var(--h2-font-size);
margin-bottom: var(--mb-1);
}
.discount__description {
margin-bottom: var(--mb-2);
}
.products__container {
grid-template-columns: repeat(3, 162px);
gap: 6rem 3rem;
padding-top: 5rem;
}
.products__card {
height: 152px;
padding: .85rem;
}
.products__img {
width: 95px;
}
.footer__container {
grid-template-columns: .4fr .7fr .7fr 1fr;
}
}
/* For large devices */
#media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
.home__img {
width: 300px;
top: -15rem;
}
.home__title {
top: -5rem;
left: 3.5rem;
}
.home__description {
padding-right: 5rem;
}
.sponsor__img {
width: 100px;
}
.discount__img {
width: 350px;
}
.footer__container {
padding-top: 3rem;
}
.footer__copy {
margin-top: 9rem;
}
}
<!DOCTYPE html>
<html lang="en" class="sr"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/favicon.png?raw=true" type="image/x-icon">
<!--=============== REMIX ICONS ===============-->
<link href="https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css" rel="stylesheet">
<title>Responsive landing page headphones</title>
</head>
<body>
<!--=============== HEADER ===============-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/logo.png?raw=true" alt="">
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
Home
</li>
<li class="nav__item">
Specs
</li>
<li class="nav__item">
Case
</li>
</ul>
</div>
<a href="" class="toggle-menu" role="button" aria-controls="menu-wrapper" aria-label="Open navigation" aria-expanded="false">
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_nzuitqg1.json"></lottie-player>
</a>
</nav>
</header>
<main class="main">
<!--=============== HOME ===============-->
<section class="home section" id="home">
<div class="home__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/home.png?raw=true" alt="" class="home__img">
</div>
<div class="home__data">
<div class="home__header">
<h1 class="home__title">On ear</h1>
<h2 class="home__subtitle">Beats 3</h2>
</div>
<div class="home__footer">
<h3 class="home__title-description">Overview</h3>
<p class="home__description">Enjoy award-winning Beats sound with wireless listening freedom and a sleek,
streamlined design with comfortable padded earphones, delivering first-rate playback.
</p>
<a href="#" class="button button--flex">
<span class="button--flex">
<i class="ri-shopping-bag-line button__icon"></i></i> Add to Bag
</span>
<span class="home__price">$299</span>
</a>
</div>
</div>
</div>
</section>
<!--=============== SPONSOR ===============-->
<section class="sponsor section">
<div class="sponsor__container container grid">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor1.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor2.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor3.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor4.png?raw=true" alt="" class="sponsor__img">
</div>
</section>
<!--=============== SPECS ===============-->
<section class="specs section grid" id="specs">
<h2 class="section__title section__title-gradient">Specs</h2>
<div class="specs__container container grid">
<div class="specs__content grid">
<div class="specs__data">
<i class="ri-bluetooth-line specs__icon"></i>
<h3 class="specs__title">Connection</h3>
<span class="specs__subtitle">Bluetooth v5.2</span>
</div>
<div class="specs__data">
<i class="ri-battery-charge-line specs__icon"></i>
<h3 class="specs__title">Battery</h3>
<span class="specs__subtitle">Duration 40h</span>
</div>
<div class="specs__data">
<i class="ri-plug-line specs__icon"></i>
<h3 class="specs__title">Load</h3>
<span class="specs__subtitle">Fast charge 4.2-AAC</span>
</div>
<div class="specs__data">
<i class="ri-mic-line specs__icon"></i>
<h3 class="specs__title">Microphone</h3>
<span class="specs__subtitle">Supports Apple Siri <br> and Google</span>
</div>
</div>
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/specs.png?raw=true" alt="" class="specs__img">
</div>
</div>
</section>
<!--=============== CASE ===============-->
<section class="case section grid" id="case">
<h2 class="section__title section__title-gradient">Case</h2>
<div class="case__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/case.png?raw=true" alt="" class="case__img">
</div>
<div class="case__data">
<p class="case__description">With a comfortable and adaptable case so that you can
store it whenever you want, and keep your durability forever.
</p>
<a href="#" class="button button--flex">
<i class="ri-information-line button__icon"></i> More info
</a>
</div>
</div>
</section>
<!--=============== DISCOUNT ===============-->
<section class="discount section">
<div class="discount__container container grid">
<div class="discount__animate">
<h2 class="discount__title">Immerse yourself in <br> your music</h2>
<p class="discount__description">Get it now, up to 50% off.</p>
<a href="#" class="button button--flex">
<i class="ri-shopping-bag-line button__icon"></i> Shop Now
</a>
</div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/discount.png?raw=true" alt="" class="discount__img">
</div>
</section>
</main>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-s-line scrollup__icon"></i>
</a>
<!--=============== SCROLL REVEAL ===============-->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
</body></html>
Following worked:
define a variable with array of all 3 menu-link:
// querySelectorAll gets you all 3 menu-links
const menuLink = document.querySelectorAll(".nav__link");
define a function() that closes the menu and plays backwards the lottie player:
function closeMenu() {
// pageHeader.classList.toggle(menuOpenedClass); // would also work;
pageHeader.classList.remove("menu-open");
// play lottie player segment backwards
player.getLottie().playSegments([45, 0], true);
}
Add event listener to all 3 menu-links:
menuLink.forEach(function (element) {
element.addEventListener("click", function () {
closeMenu();
})
});
I'm running into an error with a javascript code I'm working on. I'm trying to make a collapsible sidebar. Whenever the user is hovering over the bar, the sidebar should be 280px wide and the main content should be calc(100vw-280px). Alternatively, whenever the user is NOT hovering over the bar, the sidebar should be 80px wide and the main content should be calc(100vw-80px).
This seems simple enough, but the #content div is not resizing whenever the function runs. The only thing I can figure is that javascript does not play friendly with calc but there could be something else I'm overlooking too in the CSS or with default values. I'm including all of the code just to be safe. Any help is appreciated!!
var mini = true;
function toggleSidebar() {
if (mini) {
document.getElementById("rightbar").style.width = "280px";
document.getElementById("content").style.width = "calc(100vw-280px)";
this.mini = false;
} else {
document.getElementById("rightbar").style.width = "80px";
document.getElementById("content").style.width = "calc(100vw-80px)";
this.mini = true;
}
}
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#rightbar {
z-index: 1;
position: fixed;
top: 60px; right: 0%;
width: 80px; height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
transition: 0.5s;
color: #412A1B;
border-left: 2px solid darkgray}
#content {
display: grid;
position: fixed;
top: 60px; left: 0;
width: calc(100vw - 80px);
height: calc(100vh - 60px);
padding: 32px;
box-sizing: border-box;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 20px 40px;
grid-template-areas:
"hello hello"
"announce tasks"
"announce tasks"
"announce streak";}
.hello {
grid-area: hello;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
font-size: 3em;
color: #3F5328}
.announce {
overflow: scroll;
grid-area: announce}
.tasks {
padding: 20px;
grid-area: tasks;
text-align: center;}
.something {grid-area: something}
.streak {
grid-area: streak;
font-size: 52px;
font-weight: 800}
.module {
background-color: white;
border-radius: 6px;
box-shadow: 3px 4px #CECECE}
table {width: 100%}
td {
padding: 10px 20px;
border-bottom: 1px solid lightgray;}
td .msg {
font-size: 20px;
line-height: 1.5}
.posted {
display: grid;
grid-template-columns: 42px 2fr 1fr;
grid-template-areas:
"pic author timestamp"}
.posted .img {grid-area: pic}
.posted .author {
grid-area: author;
display: flex;
align-items: center;
font-weight: 800;
font-size: 16px;}
.posted .timestamp {
grid-area: timestamp;
display: flex;
justify-content: flex-end;
align-items: center;
color: gray;
font-size: 16px}
.pic{
width: 25px;
clip-path: circle();}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div>
<div id='content'>
<div class='hello'>Hi, John.</div>
<div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div>
<div class='module streak center'>🔥 32</div>
<div class='module announce'>
<table>
<tr>
<td>
<span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span>
<div class='posted'>
<span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>33m ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Have a great fall break!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>1d ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>3d ago</span>
</div>
</td>
</tr>
</table>
</div>
</div>
calc is a bit persnickety about whitespace.. Specifically, the operator in the calc equation must have a space on either side. I updated your calc JS setting lines from something like this...
document.getElementById("content").style.width = "calc(100vw-280px)";
...to include the whitespace:
document.getElementById("content").style.width = "calc(100vw - 280px)";
...and it seems closer to what I think you're looking for; see the snippet below:
var mini = true;
function toggleSidebar() {
if (mini) {
document.getElementById("rightbar").style.width = "280px";
document.getElementById("content").style.width = "calc(100vw - 280px)";
this.mini = false;
} else {
document.getElementById("rightbar").style.width = "80px";
document.getElementById("content").style.width = "calc(100vw - 80px)";
this.mini = true;
}
}
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#rightbar {
z-index: 1;
position: fixed;
top: 60px; right: 0%;
width: 80px; height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
transition: 0.5s;
color: #412A1B;
border-left: 2px solid darkgray}
#content {
display: grid;
position: fixed;
top: 60px; left: 0;
width: calc(100vw - 80px);
height: calc(100vh - 60px);
padding: 32px;
box-sizing: border-box;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 20px 40px;
grid-template-areas:
"hello hello"
"announce tasks"
"announce tasks"
"announce streak";}
.hello {
grid-area: hello;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
font-size: 3em;
color: #3F5328}
.announce {
overflow: scroll;
grid-area: announce}
.tasks {
padding: 20px;
grid-area: tasks;
text-align: center;}
.something {grid-area: something}
.streak {
grid-area: streak;
font-size: 52px;
font-weight: 800}
.module {
background-color: white;
border-radius: 6px;
box-shadow: 3px 4px #CECECE}
table {width: 100%}
td {
padding: 10px 20px;
border-bottom: 1px solid lightgray;}
td .msg {
font-size: 20px;
line-height: 1.5}
.posted {
display: grid;
grid-template-columns: 42px 2fr 1fr;
grid-template-areas:
"pic author timestamp"}
.posted .img {grid-area: pic}
.posted .author {
grid-area: author;
display: flex;
align-items: center;
font-weight: 800;
font-size: 16px;}
.posted .timestamp {
grid-area: timestamp;
display: flex;
justify-content: flex-end;
align-items: center;
color: gray;
font-size: 16px}
.pic{
width: 25px;
clip-path: circle();}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div>
<div id='content'>
<div class='hello'>Hi, John.</div>
<div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div>
<div class='module streak center'>🔥 32</div>
<div class='module announce'>
<table>
<tr>
<td>
<span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span>
<div class='posted'>
<span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>33m ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Have a great fall break!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>1d ago</span>
</div>
</td>
</tr>
<tr>
<td>
<span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span>
<div class='posted'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span class='author'>Mr. Dansby</span>
<span class='timestamp'>3d ago</span>
</div>
</td>
</tr>
</table>
</div>
</div>
My project needs to print out a canvas image that can be smaller or greater than the page width. I want the printout to maintain the canvas size if it is smaller than page width and scale if the canvas image is larger than page width. How do I accomplish this?
Here is an example of the canvas image being too big for the printed page (It needs to be shrunk to fit):
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {height:100%; overflow:hidden;}
#main-container {height:100%; padding:; margin:0;
display: flex;
flex-direction: column;
}
body {height:100%; padding:0; margin:0;
display: flex;
flex-direction: column;
}
header {
background:aqua;
flex: 0 0 100px;
}
section {background:blue;
flex: 1;
display: flex;
flex-direction: row;
overflow:auto;
}
article {
background:blanchedalmond;
flex: 3;
}
nav {
background:coral;
flex: 1;
order: -1;
/*start flex settings*/
display:flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top{
overflow-y:auto;
}
.nav-bottom-item-left {
background:deeppink;
order:1;
border-color:red;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
.nav-bottom-item-right {
background:dodgerblue;
order:0;
border-color:blue;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
aside {background:#ddd;
flex: 0 0 200px;
}
footer {background:#888;
flex: 0 0 100px;
}
.item-text{
font-size:1vmax;
padding:1em;
}
canvas{ border: 1px solid black; }
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
cursor:move;
}
.print-this-only{
}
#media print {
html,
body {
height:100%;
overflow:hidden;
display:block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print();" class="no-print">Print Canvas</button></header>
<section>
<article id="id"><div id="container" >
<div id="container" class="print-this-only"style="position:relative">
<canvas height="1000px" width="2000px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 1700px;
top:150px;
z-index: 2;
width: 100px;
" />
</>
</div></article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>
Here is an example of the canvas being smaller than page width and appropriately scaled:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {height:100%; overflow:hidden;}
#main-container {height:100%; padding:; margin:0;
display: flex;
flex-direction: column;
}
body {height:100%; padding:0; margin:0;
display: flex;
flex-direction: column;
}
header {
background:aqua;
flex: 0 0 100px;
}
section {background:blue;
flex: 1;
display: flex;
flex-direction: row;
overflow:auto;
}
article {
background:blanchedalmond;
flex: 3;
}
nav {
background:coral;
flex: 1;
order: -1;
/*start flex settings*/
display:flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top{
overflow-y:auto;
}
.nav-bottom-item-left {
background:deeppink;
order:1;
border-color:red;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
.nav-bottom-item-right {
background:dodgerblue;
order:0;
border-color:blue;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
aside {background:#ddd;
flex: 0 0 200px;
}
footer {background:#888;
flex: 0 0 100px;
}
.item-text{
font-size:1vmax;
padding:1em;
}
canvas{ border: 1px solid black; }
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
cursor:move;
}
.print-this-only{
}
#media print {
html,
body {
height:100%;
overflow:hidden;
display:block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print();" class="no-print">Print Canvas</button></header>
<section>
<article id="id"><div id="container" >
<div id="container" class="print-this-only"style="position:relative">
<canvas height="400px" width="400px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 200px;
top:150px;
z-index: 2;
width: 100px;
" />
</>
</div></article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>
One way to do it is to wrap the canvas into container, than calculate everything in percents of parent element width. So first in HTML:
<div class="canvas_container">
<canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>
Than add in CSS:
#media print {
#container {
display: block; /* Cannot be flex here */
}
.canvas_container {
max-width: 100%;
padding-bottom: 50%; /* Canvas is 2000x1000, this will set the height to 50% of width */
position: relative;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
}
Than each of your images position gotta be in percent, also the width gotta be in percents:
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5%;
"
/>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 7%;
top: 0;
z-index: 2;
width: 5%;
"
/>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 85%;
top: 15%;
z-index: 2;
width: 5%;
"
/>
Complete code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
<style>
html {
height: 100%;
overflow: hidden;
}
#main-container {
height: 100%;
padding: ;
margin: 0;
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background: aqua;
flex: 0 0 100px;
}
section {
background: blue;
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
}
article {
background: blanchedalmond;
flex: 3;
}
nav {
background: coral;
flex: 1;
order: -1;
/*start flex settings*/
display: flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top {
overflow-y: auto;
}
.nav-bottom-item-left {
background: deeppink;
order: 1;
border-color: red;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
.nav-bottom-item-right {
background: dodgerblue;
order: 0;
border-color: blue;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
aside {
background: #ddd;
flex: 0 0 200px;
}
footer {
background: #888;
flex: 0 0 100px;
}
.item-text {
font-size: 1vmax;
padding: 1em;
}
canvas {
border: 1px solid black;
}
#container {
display: flex;
/* establish flex container */
flex-direction: column;
/* make main axis vertical */
justify-content: center;
/* center items vertically, in this case */
align-items: center;
/* center items horizontally, in this case */
cursor: move;
}
.print-this-only {}
#media print {
html,
body {
height: 100%;
overflow: hidden;
display: block;
background-color: yellow;
}
#container {
display: block;
}
.canvas_container {
max-width: 100%;
padding-bottom: 50%;
position: relative;
}
canvas {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
.print-this-only {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
</style>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header
<button onclick="window.print();" class="no-print">Print Canvas</button>
</header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<div class="canvas_container">
<canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5%;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 7%;
top: 0;
z-index: 2;
width: 5%;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 85%;
top: 15%;
z-index: 2;
width: 5%;
" />
</div>
</article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
In your print styles, you can add overflow: hidden to .print-this-only and add this to the canvas:
.print-this-only canvas {
max-width:100%;
max-height: 100%;
display: block;
}
Now you can constrain the canvas. Note that for the third image in the canvas you have left: 1700px (changed it to right: 0 for the demo below) - the position values for these images need to be in percentages for the scaling to be proper.
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {
height: 100%;
overflow: hidden;
}
#main-container {
height: 100%;
padding: ;
margin: 0;
display: flex;
flex-direction: column;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background: aqua;
flex: 0 0 100px;
}
section {
background: blue;
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
}
article {
background: blanchedalmond;
flex: 3;
}
nav {
background: coral;
flex: 1;
order: -1;
/*start flex settings*/
display: flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top {
overflow-y: auto;
}
.nav-bottom-item-left {
background: deeppink;
order: 1;
border-color: red;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
.nav-bottom-item-right {
background: dodgerblue;
order: 0;
border-color: blue;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
aside {
background: #ddd;
flex: 0 0 200px;
}
footer {
background: #888;
flex: 0 0 100px;
}
.item-text {
font-size: 1vmax;
padding: 1em;
}
canvas {
border: 1px solid black;
}
#container {
display: flex;
/* establish flex container */
flex-direction: column;
/* make main axis vertical */
justify-content: center;
/* center items vertically, in this case */
align-items: center;
/* center items horizontally, in this case */
cursor: move;
}
.print-this-only {}
#media print {
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
display: block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
overflow: hidden;
/* ADDED */
}
/* ADDED */
.print-this-only canvas {
max-width: 100%;
max-height: 100%;
display: block;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print()" class="no-print">Print Canvas</button></header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<canvas height="1000px" width="2000px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
right: 0;
top:150px;
z-index: 2;
width: 100px;
" />
</div>
</div>
</article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>
The same demo for a smaller canvas:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {
height: 100%;
overflow: hidden;
}
#main-container {
height: 100%;
padding: ;
margin: 0;
display: flex;
flex-direction: column;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background: aqua;
flex: 0 0 100px;
}
section {
background: blue;
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
}
article {
background: blanchedalmond;
flex: 3;
}
nav {
background: coral;
flex: 1;
order: -1;
/*start flex settings*/
display: flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top {
overflow-y: auto;
}
.nav-bottom-item-left {
background: deeppink;
order: 1;
border-color: red;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
.nav-bottom-item-right {
background: dodgerblue;
order: 0;
border-color: blue;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
aside {
background: #ddd;
flex: 0 0 200px;
}
footer {
background: #888;
flex: 0 0 100px;
}
.item-text {
font-size: 1vmax;
padding: 1em;
}
canvas {
border: 1px solid black;
}
#container {
display: flex;
/* establish flex container */
flex-direction: column;
/* make main axis vertical */
justify-content: center;
/* center items vertically, in this case */
align-items: center;
/* center items horizontally, in this case */
cursor: move;
}
.print-this-only {}
#media print {
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
display: block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
overflow: hidden;
/* ADDED */
}
/* ADDED */
.print-this-only canvas {
max-width: 100%;
max-height: 100%;
display: block;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print();" class="no-print">Print Canvas</button></header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<canvas height="400px" width="400px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 200px;
top:150px;
z-index: 2;
width: 100px;
" />
</div>
</div>
</article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>