My header is moving up and down when I scroll in the mobile version of my website. And when I close my hamburger-menu the text doesn't move with the animation. I tried solving it but I can't figure it out. Mr teacher didn't know how to solve the problem so I hope u guys can help <3
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #1A1A1A;
overflow-x: hidden;
color: #fff;
z-index: 1;
font-family: "Inter", sans-serif;
font-weight: 300;
overflow-y: scroll;
}
#wrapper {
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 90vh 40vh 70vh 55vh 10vh 1fr 1fr 15rem;
grid-template-areas: "a" "b" "c" "d" "z" "e" "f" "g";
}
#slideshow {
grid-area: a;
background-image: url(../bilder/test.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#starttext {
top: 7rem;
position: relative;
}
#starttext p {
font-size: 0.8rem;
margin-top: 1rem;
}
h1,
h2 {
margin-left: 1.2rem;
margin-right: 1.2rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
margin-bottom: 1rem;
margin-top: 2rem;
}
p {
margin: 0 1.2rem 2rem 1.2rem;
font-size: 0.85rem;
line-height: 1.6;
font-weight: 100;
}
#introduktion {
grid-area: b;
}
#bakgrund {
grid-area: c;
background-color: #cacbcc;
}
#bakgrund p,
#bakgrund h2,
#problemformulering p,
#problemformulering h2 {
color: #212529;
}
#box2 {
grid-area: z;
background-color: rgb(31, 31, 31);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#problemformulering {
grid-area: d;
background-color: #cacbcc;
}
#lösning {
grid-area: e;
}
#diskussion {
grid-area: f;
}
#footer {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
grid-area: g;
background-color: rgb(31, 31, 31);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.nav-container {
z-index: 300;
}
#blur-box {
height: 3.5rem;
width: 100vw;
background: rgba(255, 255, 255, 0.486);
backdrop-filter: blur(8px);
}
header {
position: fixed;
overflow: hidden;
width: 100%;
height: 3rem;
background: #1a1a1a83;
backdrop-filter: blur(8px);
}
.nav-container nav {
height: 100%;
width: 100%;
padding: 0 32px;
}
nav .desktop-nav {
list-style: none;
}
nav .desktop-nav li button,
nav .desktop-nav li a {
color: #ffffff;
text-decoration: none;
font-family: "Inter", sans-serif;
font-size: 1.5rem;
background: none;
border: none;
}
.nav-container .desktop-nav {
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0vh;
background: #303030f3;
justify-content: start;
overflow: hidden;
z-index: -1;
transition: all 1000ms ease;
}
.nav-container.active .desktop-nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.nav-container .desktop-nav li {
width: 100%;
}
.nav-container .desktop-nav li a {
padding: 30px 0;
width: 100%;
font-size: 1.5rem;
opacity: 0;
}
.border {
border-bottom: 1px solid #616161;
}
#yes {
width: 80%;
}
.nav-container.active .desktop-nav li a {
opacity: 1;
}
nav .mobile-nav {
display: flex;
width: 100%;
justify-content: space-between;
list-style: none;
display: flex;
justify-content: flex-end;
}
nav .menu-icon-container {
width: 20px;
height: 44px;
display: flex;
align-items: center;
cursor: pointer;
}
nav .menu-icon {
position: relative;
width: 100%;
}
nav .menu-icon .line-1,
nav .menu-icon .line-2 {
position: absolute;
height: 1px;
width: 100%;
background: #fff;
transition-property: transform, top;
transition-delay: 0ms, 160ms;
transition-duration: 200ms;
}
nav .menu-icon .line-1 {
top: -4px;
}
nav .menu-icon .line-2 {
top: 4px;
}
/* De två under är hämtat från någon bemsida */
.nav-container.active nav .menu-icon-container .menu-icon .line-1 {
top: 0;
transform: rotateZ(45deg);
transition-property: top, transform;
transition-delay: 0ms, 160ms;
transition-duration: 200ms;
}
.nav-container.active nav .menu-icon-container .menu-icon .line-2 {
top: 0;
transform: rotateZ(-45deg);
transition-property: top, transform;
transition-delay: 0ms, 160ms;
transition-duration: 200ms;
}
input,
div,
span,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#media only screen and (min-width: 600px) {}
#media only screen and (min-width: 769px) {
.center {
padding-right: 35rem;
display: block;
padding-left: 35rem;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Buller</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../projekt3.2/style/style.css">
</head>
<body>
<header class="nav-container">
<nav>
<ul class="mobile-nav">
<li>
<div class="menu-icon-container">
<div class="menu-icon">
<span class="line-1"></span>
<span class="line-2"></span>
</div>
</div>
</li>
<ul class="desktop-nav">
<div id="yes">
<li>
<button id="knapp1">Introduktion</button>
</li>
<li>
<button id="knapp2">Bakgrund</button>
</li>
<li>
<button id="knapp3">Problemformulering</button>
</li>
<li>
<button id="knapp4">Lösning</button>
</li>
<li>
<button id="knapp5">Diskussion</button>
</li>
<li>
Bilder
</li>
</div>
</ul>
</nav>
</header>
<main id="wrapper">
<div id="slideshow">
<div class="center" id="starttext">
<h1>Framtids-<br>staden...</h1>
<p>Ett projekt av Benim co som Lorem ipsum dolor <br> sit, amet consectetur adipisicing elit. Quia vero <br> sit, amet consectetur adipisicing elit. Quia vero</p>
</div>
<div clsas="center" id="blur-box">
</div>
</div>
<div class="center" id="introduktion">
<h2>Introduktion</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sconsectetur adipisicing eliconsectetur adipisicing eli consectetur adipisicing eli Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, suscipit!Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Unde est natus sconsectetur adipisicing eliconsectetur adipisicing eli consectetur adipisicing eli Lorem Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="center" id="bakgrund">
<h2>Bakgrund</h2>
<p>Motorvägen som leder genom Nacka, Värmdöleden, är en vältrafikerad väg som sträcker sig mellan Stockholm och Stavsnäs i Stockholms län. På grund av att vägen går genom stora delar av Nacka, samt är mycket trafikerad, innebär det att vägen är en
stor bidragande faktor till buller i kommunen. De åtgärder som redan gjorts, såsom bullerplank, är inte tillräckliga då vägen är för bred för att planken ska göra någon större nytta . Oljud från bilarna och vägen kan ta sig över planket och bidrar
till en störande miljö i kommunen.</p>
<p>I takt med att Nacka och Värmdö ökar kraftigt i befolkningsmängd, varav Nacka hade en ökning på 4,4% mellan åren 2018-2021 och Värmdö hade 4,1%, bidrar det att vägarna kommer att bli ännu mer trafikerade än vad de redan är idag. En sådan befolkningsökning
innebär att Nacka har den 28:e högsta ökningen i landet och Värmdö den 32:a. När fler bilar befinner sig inom kommunerna kommer trafiken att öka vilket även innebär att bullret kommer att bli värre. </p>
</div>
<div id="box2">
</div>
<div class="center" id="problemformulering">
<h2>Problemformulering</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
repellendus!
</p>
</div>
<div class="center" id="lösning">
<h2>Lösning</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
repellendus!
</p>
</div>
<div class="center" id="diskussion">
<h2>Diskussion</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
repellendus!
</p>
</div>
<div class="center" id="footer">
<p>Här är benims footer (fast den är en div hihi)</p>
</div>
</main>
<script src="../projekt3.2/script/js.js"></script>
</body>
I don't it to scroll up and down when I scroll :D
Related
I'm having trouble opening and closing a dynamically created div with Javascript.
The problems are these:
In the opening phase, the div created does not follow the transition scale 1s rule
When I close the div for the first time it respects the transition and closes correctly, while when I open it a second time the div does not close
Here is the HTML, CSS and JS code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div id="check">
<input type="checkbox">
<label>Ho preso visione dell'informativa alla privacy</label>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#check {
margin-top: 20px;
margin-bottom: 20px;
}
label {
line-height: 1.5;
margin-left: 5px;
}
#informativa-privacy {
z-index: 200;
transform: scale(0);
position:fixed;
/* margin-top: 100px; */
top: 0;
left: 0;
/* background-color: rgba(0, 0, 0, 0.815); */
height: 100%;
overflow-y: scroll;
transition: all .5s;
}
#informativa-privacy section {
background-color: white;
padding: 10px;
width: 90%;
margin: 20px auto;
}
#attenzione {
font-weight: 800;
margin-bottom: 20px;
text-align: center;
}
#informativa-privacy button {
padding: 10px;
background-color: gold;
box-shadow: 0 0 3px black;
outline: none;
border: none;
display: block;
width: 90%;
margin: 10px auto;
font-weight: 800;
}
#overflow {
height: 200px;
overflow-y: scroll;
margin-bottom: 20px;
border: 1px solid blue;
padding: 5px;
}
JS
function apriPrivacy(linkPrivacy) {
linkPrivacy.onclick = function (e) {
e.preventDefault()
let informativa = document.createElement("div")
informativa.id = "informativa-privacy"
document.body.appendChild(informativa)
let contenutoInformativa = `<section>
<p id="attenzione">LEGGI CON ATTENZIONE</p>
<div id="overflow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Asperiores inventore voluptatum quidem impedit voluptas vitae
ea, amet a autem, quia dicta! Possimus ipsum in earum sapiente
architecto odit ad, veniam natus ullam sint esse amet. Fugiat
mollitia, unde eos maxime consequuntur officia. Natus rem
illum, expedita fugit nam harum, aliquid ducimus ab laboriosam
obcaecati, necessitatibus alias repellat numquam tempora!
Mollitia molestias ipsa dicta non aut, voluptates placeat.
Molestias quibusdam voluptas, tempore deserunt aut cum
veritatis ducimus quidem deleniti sapiente nostrum
perferendis. Molestias ab tenetur provident tempore ut
deserunt nam exercitationem sint labore! Maiores laborum
molestias animi repellat eos ratione. Iste, laborum ducimus!
Autem nisi quos nobis mollitia voluptate consectetur, placeat
minima error earum velit ipsa, numquam blanditiis rerum
quibusdam eligendi magni enim itaque fugit modi. Modi dolore
quae commodi rem quidem maxime eos architecto delectus alias?
Consequatur reprehenderit consequuntur esse tempora architecto
minus animi deleniti debitis neque, ut reiciendis nemo.</p>
</div>
<button>ACCETTA</button>
</section>`
informativa.innerHTML = contenutoInformativa
informativa.style.transition = "transform 1s"
informativa.style.transform = "scale(1)"
let bottoneAccetta = document.querySelector("#informativa-
privacy button")
bottoneAccetta.onclick = function () {
informativa.style.transform = "scale(1)"
informativa.style.transform = "scale(0)"
}
}
}
let linkPrivacy = document.querySelector("#check a")
apriPrivacy(linkPrivacy)
How can I solve the problem?
OK, here is an answer:
Your code didn't work, because everytime someone clicked the link, a new div was created. Then you selected the first "Accetta" button in the document and set it's onclick property. For the first time, when only one button is in the whole document, it works, but for all other times, you select the first button in the document, but it is not the one that is visible
I have reordered your code. Now the element (informativa) is inserted immediately in the body when you call your function apriPrivacy.
Then comes the EventListener on the linkPrivacy element, in which I add the class open to informativa. In the CSS I changed the following:
#informativa-privacy {
z-index: 200;
transform: scale(0);
position: fixed;
/* margin-top: 100px; */
top: 0;
left: 0;
/* background-color: rgba(0, 0, 0, 0.815); */
height: 100%;
overflow-y: scroll;
transition: all .5s, transform 1s;
}
#informativa-privacy.open {
transform: scale(1);
}
Then in the click EventListener on the bottoneAccetta button I remove the class open from informativa and the CSS is responsible for the animation again.
In the following snippet is your complete code working:
function apriPrivacy(linkPrivacy) {
let informativa = document.createElement("div");
informativa.id = "informativa-privacy";
document.body.appendChild(informativa);
let contenutoInformativa = `<section>
<p id="attenzione">LEGGI CON ATTENZIONE</p>
<div id="overflow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Asperiores inventore voluptatum quidem impedit voluptas vitae
ea, amet a autem, quia dicta! Possimus ipsum in earum sapiente
architecto odit ad, veniam natus ullam sint esse amet. Fugiat
mollitia, unde eos maxime consequuntur officia. Natus rem
illum, expedita fugit nam harum, aliquid ducimus ab laboriosam
obcaecati, necessitatibus alias repellat numquam tempora!
Mollitia molestias ipsa dicta non aut, voluptates placeat.
Molestias quibusdam voluptas, tempore deserunt aut cum
veritatis ducimus quidem deleniti sapiente nostrum
perferendis. Molestias ab tenetur provident tempore ut
deserunt nam exercitationem sint labore! Maiores laborum
molestias animi repellat eos ratione. Iste, laborum ducimus!
Autem nisi quos nobis mollitia voluptate consectetur, placeat
minima error earum velit ipsa, numquam blanditiis rerum
quibusdam eligendi magni enim itaque fugit modi. Modi dolore
quae commodi rem quidem maxime eos architecto delectus alias?
Consequatur reprehenderit consequuntur esse tempora architecto
minus animi deleniti debitis neque, ut reiciendis nemo.</p>
</div>
<button>ACCETTA</button>
</section>`;
informativa.innerHTML = contenutoInformativa;
linkPrivacy.onclick = function(e) {
e.preventDefault();
informativa.classList.add("open");
}
let bottoneAccetta = document.querySelector("#informativa-privacy button");
bottoneAccetta.onclick = function() {
informativa.classList.remove("open");
}
}
let linkPrivacy = document.querySelector("#check a");
apriPrivacy(linkPrivacy);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#check {
margin-top: 20px;
margin-bottom: 20px;
}
label {
line-height: 1.5;
margin-left: 5px;
}
#informativa-privacy {
z-index: 200;
transform: scale(0);
position: fixed;
/* margin-top: 100px; */
top: 0;
left: 0;
/* background-color: rgba(0, 0, 0, 0.815); */
height: 100%;
overflow-y: scroll;
transition: all .5s, background-color 0s 1s, transform 1s;
}
#informativa-privacy.open {
background-color: red;
transform: scale(1);
}
#informativa-privacy section {
background-color: white;
padding: 10px;
width: 90%;
margin: 20px auto;
}
#attenzione {
font-weight: 800;
margin-bottom: 20px;
text-align: center;
}
#informativa-privacy button {
padding: 10px;
background-color: gold;
box-shadow: 0 0 3px black;
outline: none;
border: none;
display: block;
width: 90%;
margin: 10px auto;
font-weight: 800;
}
#overflow {
height: 200px;
overflow-y: scroll;
margin-bottom: 20px;
border: 1px solid blue;
padding: 5px;
}
<div id="check">
<input type="checkbox">
<label>Ho preso visione dell'informativa alla privacy</label>
</div>
Can someone please explain to me why the solution to the following problem works?
Problem:
Make the child div's width 100% to its grandparent's width, while the parent's width is much wider.
Solution:
Set grandparent display: flex,
Set parent::before {content: ""; width: inherit; position: absolute;}
Set child width: 100%.
The described solution is great, compared to position: absolute directly on child, because there is no need to tinker with the top alignment etc.
See answer and fiddle by RGLSV:
Child take width % from parents parent
http://jsfiddle.net/9qkwkzf2/
Here is the tab slider I build with this solution, if someone is interested:
const tabButtons = document.querySelectorAll(".tab-btn");
const tabContent = document.querySelector(".tab-content");
tabButtons.forEach((btn, i) => {
tabButtons[i].addEventListener("click", () => {
document
.querySelector(".tab-btn.active")
.classList.remove("active");
tabButtons[i].classList.add("active");
tabContent.style.marginLeft = `calc(-${i}*100%`;
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
color: #f2f2f2;
}
.tabs-container {
width: 500px;
height: 200px;
background: #f2f2f2;
color: rgb(21, 105, 153);
}
.tabs {
display: grid;
grid-auto-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"btn-1 btn-2 btn-3 btn-4"
"main main main main";
height: 100%;
overflow: hidden;
}
.tab-btn {
cursor: pointer;
}
.tab-btn:nth-child(1) {
grid-area: btn-1;
}
.tab-btn:nth-child(2) {
grid-area: btn-2;
}
.tab-btn:nth-child(3) {
grid-area: btn-3;
}
.tab-btn:nth-child(4) {
grid-area: btn-4;
}
.tab-content {
position: relative;
height: 100%;
width: calc(4 * 100%);
grid-area: main;
display: flex;
transition: all 0.3s ease-in-out;
}
.tab-content:before {
content: "";
position: absolute;
width: inherit;
}
.tab-content > div {
height: 100%;
width: 100%;
padding: 1rem;
}
.tab-btn {
border: none;
padding: 1rem;
border-radius: inherit;
background: #dddddd;
border: 1px solid #ccc;
transition: all 0.3s ease-in-out;
}
.tab-btn.active {
background: #f2f2f2;
transition: all 0.3s ease-in-out;
}
<!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>Tabs</title>
</head>
<body>
<div class="tabs-container">
<div class="tabs">
<button class="tab-btn active">Tab 1</button>
<button class="tab-btn">Tab 2</button>
<button class="tab-btn">Tab 3</button>
<button class="tab-btn">Tab 4</button>
<div class="tab-content">
<div>
<h1>Tab 1</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
<div>
<h1>Tab 2</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
<div>
<h1>Tab 3</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
<div>
<h1>Tab 4</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have this test page which I'm working on.
As you can see from the snippet, I have the "Share" bar rotated on the Z axis with transform: rotateZ(-90deg); and left-positioned with transform-origin:0 0;. (Note: this is the first time I use transform-origin and maybe I did something wrong(?)).
What I want to do:
When the page is scrolled up the "Share" bar should move to the left, outside the viewport, maintaining the transform: rotateZ(-90deg); property and when the page is scrolled down the "Share" bar should reappear in the same position. So it should stay shifted vertically when the transitions occur.
The problem:
When the page is scrolled up and the "Share" bar moves out of the viewport, the transform: translateX(-120px); property takes action as if the transform: rotateZ(-90deg); was never declared.
How can I make it stay vertically "fixed" during all the transitions, based on scrolling events?
ALSO: Why there is no overflow-x when the "Share" bar goes out the viewport?
Edit: I tried moving it with left and right, but in this case there's no transition time.
The snippet (Note: Go to the bottom of the css file for the .share element and its styling)
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');
burger.addEventListener('click', () => {
nav.classList.toggle('active');
burger.classList.toggle('hide');
xicon.classList.toggle('active');
});
const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
nav.classList.toggle('active');
xicon.classList.toggle('active');
burger.classList.toggle('hide');
})
const header = document.querySelector('header');
let prev = window.pageYOffset;
window.addEventListener('scroll', function(){
let current = window.pageYOffset;
if(prev < current){
header.classList.add('hide');
}
else {
header.classList.remove('hide');
}
prev = current;
})
const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;
window.addEventListener('scroll', function() {
let currentScroll = window.pageYOffset;
if(prevScroll < currentScroll) {
shareThing.classList.add('hide');
icons.classList.add('hide');
}
else {
shareThing.classList.remove('hide');
icons.classList.remove('hide');
}
prevScroll = currentScroll;
})
let share = document.querySelector('.share');
let icons = document.querySelector('.side');
share.addEventListener('click', () => {
icons.classList.toggle('active');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logoandicon {
display: flex;
justify-content: space-between;
align-items: center;
background: powderblue;
padding: .7em 0;
}
.logo {
margin-left: .5em;
}
.burger {
margin-right: 1em;
z-index: 2;
}
.burger.hide {
display: none;
}
nav ul li a {
text-decoration: none;
color: black;
font-family: verdana;
}
nav ul li {
text-align: center;
list-style: none;
}
nav {
padding: 1em 0;
line-height: 2em;
background: lightgreen;
display: none;
}
nav.active {
display: block;
}
.xicon {
position: absolute;
right: 1em;
display: none;
}
.xicon.active {
display: block;
}
header {
width: 100vw;
position: fixed;
}
header.hide {
display: none;
}
main {
padding-top: 4em;
}
.one {
width: 20px;
height: 20px;
background: blue;
color: white;
}
.two {
width: 20px;
height: 20px;
background: green;
color: white;
}
.three {
width: 20px;
height: 20px;
background: red;
color: white;
}
.side {
width: 30px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
top: 50%;
background: black;
display: none;
border-radius: 10px;
}
.side.active {
display: flex;
}
.side.hide {
display: none;
}
.share {
position: fixed;
top: 50%;
background: black;
color: white;
font-family: verdana;
font-size: 1.3rem;
transform: rotateZ(-90deg);
transform-origin: 0 0;
padding: .15em 1em;
border-radius: 10px;
border: 1px solid white;
transition: 1s;
}
.share.hide {
transform: translateX(-120px);
}
<header>
<div class="logoandicon">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" width="30px" alt="burger-icon">
<img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<main>
<p class="share">Share</p>
<div class="side">
<div class="one">Fb</div>
<div class="two">Ig</div>
<div class="three">Tw</div>
</div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi voluptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
</main>
<script src="main.js">
</script>
Your hide class should not only apply the translate, but also the rotation, like so:
.share.hide {
transform: translateX(-120px) rotateZ(-90deg);
}
Can you use left: -120px instead of transform: translate(-120px) ? You need absolute or relative position for this though. And when it should appear, set left: 0
SOLUTION
I managed to move it out of the viewport while maintaining the transform: rotateZ() proterty and the transition time, using:
margin-left: -35px;.
ALSO, as #Zohir Salak and #Turnip suggested in the comments above, chaining transform: rotateZ() with transform: translateX() on the same line, works as well.
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');
burger.addEventListener('click', () => {
nav.classList.toggle('active');
burger.classList.toggle('hide');
xicon.classList.toggle('active');
});
const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
nav.classList.toggle('active');
xicon.classList.toggle('active');
burger.classList.toggle('hide');
})
const header = document.querySelector('header');
let prev = window.pageYOffset;
window.addEventListener('scroll', function(){
let current = window.pageYOffset;
if(prev < current){
header.classList.add('hide');
}
else {
header.classList.remove('hide');
}
prev = current;
})
const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;
window.addEventListener('scroll', function() {
let currentScroll = window.pageYOffset;
if(prevScroll < currentScroll) {
shareThing.classList.add('hide');
icons.classList.add('hide');
}
else {
shareThing.classList.remove('hide');
icons.classList.remove('hide');
}
prevScroll = currentScroll;
})
let share = document.querySelector('.share');
let icons = document.querySelector('.side');
share.addEventListener('click', () => {
icons.classList.toggle('active');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logoandicon {
display: flex;
justify-content: space-between;
align-items: center;
background: powderblue;
padding: .7em 0;
}
.logo {
margin-left: .5em;
}
.burger {
margin-right: 1em;
z-index: 2;
}
.burger.hide {
display: none;
}
nav ul li a {
text-decoration: none;
color: black;
font-family: verdana;
}
nav ul li {
text-align: center;
list-style: none;
}
nav {
padding: 1em 0;
line-height: 2em;
background: lightgreen;
display: none;
}
nav.active {
display: block;
}
.xicon {
position: absolute;
right: 1em;
display: none;
}
.xicon.active {
display: block;
}
header {
width: 100vw;
position: fixed;
}
header.hide {
display: none;
}
main {
padding-top: 4em;
}
.one {
width: 20px;
height: 20px;
background: blue;
color: white;
}
.two {
width: 20px;
height: 20px;
background: green;
color: white;
}
.three {
width: 20px;
height: 20px;
background: red;
color: white;
}
.side {
width: 30px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
top: 50%;
background: black;
display: none;
border-radius: 10px;
}
.side.active {
display: flex;
}
.side.hide {
display: none;
}
.share {
position: fixed;
top: 50%;
background: black;
color: white;
font-family: verdana;
font-size: 1.3rem;
transform: rotateZ(-90deg);
transform-origin: 0 0;
padding: .15em 1em;
border-radius: 10px;
border: 1px solid white;
transition: 1s;
}
.share.hide {
margin-left: -35px;
}
/*OR
.share.hide {
transform: rotateZ(-90deg) translateX(-120px);
} /*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="logoandicon">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" width="30px" alt="burger-icon">
<img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<main>
<p class="share">Share</p>
<div class="side">
<div class="one">Fb</div>
<div class="two">Ig</div>
<div class="three">Tw</div>
</div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi vol uptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta fuptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
</main>
<script src="main.js">
</script>
</body>
</html>
How can I add custom text under each image when it's zoomed in? Now it is based on the alt text, but I want to customize it even more with images etc.
The perfect solution would be if the text was displayed in a div.
Here is the codepen:
// Create a lightbox
(function() {
var $lightbox = $("<div class='lightbox'></div>");
var $img = $("<img>");
var $caption = $("<p class='caption'></p>");
// Add image and caption to lightbox
$lightbox
.append($img)
.append($caption);
// Add lighbox to document
$('body').append($lightbox);
$('.lightbox-gallery img').click(function(e) {
e.preventDefault();
// Get image link and description
var src = $(this).attr("src");
var cap = $(this).attr("alt");
// Add data to lighbox
$img.attr('src', src);
$caption.text(cap);
// Show lightbox
$lightbox.fadeIn('fast');
$lightbox.click(function() {
$lightbox.fadeOut('fast');
});
});
}());
body{
background: linear-gradient(to bottom right, #b81d1d, #5F554C, #E4DFD8);
font-family: "Open Sans", sans-serif;
}
.container{
max-width: 800px;
margin: 5% auto;
padding: 20px;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 35px 50px -25px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
}
.text-center{
text-align: center;
margin-bottom: 1em;
}
.lightbox-gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.lightbox-gallery div > img {
max-width: 100%;
display: block;
}
.lightbox-gallery div {
margin: 10px;
flex-basis: 180px;
}
#media only screen and (max-width: 480px) {
.lightbox-gallery {
flex-direction: column;
align-items: center;
}
.lightbox > div {
margin-bottom: 10px;
}
}
/*Lighbox CSS*/
.lightbox{
display: none;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
position: fixed;
top: 0;
left: 0;
z-index: 20;
padding-top: 30px;
box-sizing: border-box;
}
.lightbox img{
display: block;
margin: auto;
}
.lightbox .caption{
margin: 15px auto;
width: 50%;
text-align: center;
font-size: 1em;
line-height: 1.5;
font-weight: 700;
color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2 class="text-center">Lightbox Gallery</h2>
<div class="lightbox-gallery">
<div><img src="http://placehold.it/300/f1b702/fff&text=image1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, quae, quam. Ut dolorum quia, unde dicta at harum porro officia obcaecati ipsam deserunt fugit dolore delectus quam, maxime nisi quo."></div>
<div><img src="http://placehold.it/300/d2f1b2/222&text=image2" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime accusamus officiis dignissimos doloribus consectetur harum eos sapiente optio aut minima."></div>
<div><img src="http://placehold.it/300/eee/000&text=image3" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veritatis similique, amet, maiores soluta recusandae cupiditate, sed perspiciatis fugit minima, sunt dolores cum earum deserunt illo ipsum!"></div>
<div><img src="http://placehold.it/300/222/fff&text=image4" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium dignissimos tenetur eos unde quidem repellat officiis nemo laboriosam necessitatibus deleniti commodi quis aliquid est atque tempora aut, nihil!"></div>
<div><img src="http://placehold.it/300/b47f99/000&text=image5" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto minus consequatur soluta quaerat itaque, laboriosam quis a facilis, cumque, deleniti quas aperiam voluptate dolore. Enim nostrum sit eaque, porro eligendi illo placeat?"></div>
<div><img src="http://placehold.it/300/e1d400/000&text=image6" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi suscipit quam, id aliquam totam aperiam quas rem debitis voluptatem pariatur, illo accusamus facilis eius ipsa! Reprehenderit libero, quas iste repudiandae distinctio, quos dignissimos."></div>
</div>
</div>
Codepen URL: http://codepen.io/lkfmarketing/pen/XMdNEP
You can add a hidden div and grab the text with jQuery.
<div class="js-text text">Test</div>
var txt = $(this).parent().find('.js-text').text()
Forked example
I think for this you could use data attributes:
<div><img id="myImg" src="http://placehold.it/300/f1b702/fff&text=image1" alt="my alt" data-caption="my Caption or whatever you want"></div>
And then you use this in js as follows
var myCaption = $('#myImg').data('caption');
// use this as you please
Regards
I'm trying to rotate a text and shrink to a new width to fit in container, but when I do, the block keeps the width ruining my plans, I'm in trouble with this. The code I'm trying to use is:
.text90 {
display: inline-block;
white-space: nowrap;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
Look this in full page to see my problem:
/** RESET PAGE DOWNHERE **/
#import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Montserrat:400,700|Open+Sans|Source+Sans+Pro:400,900");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 400;
font-size: 14px;
}
ul, li, ol, a {
text-decoration: none;
list-style-type: none;
}
.container {
width: 100%;
max-width: 1270px;
margin: auto;
padding: 0 15px;
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
color: #252525;
}
h3 {
font-family: "Droid Serif", serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
letter-spacing: 4px;
margin-bottom: 15px;
}
p {
font-family: "Droid Serif", serif;
font-size: 14px;
line-height: 26px;
color: #898989;
letter-spacing: 1px;
text-align: justify;
}
.header {
height: 150px;
background-color: lightpink;
}
.footer {
height: 50px;
background-color: lightpink;
}
/** RESET PAGE UPHERE **/
.content {
padding: 50px 0;
display: flex;
background-color: lightblue;
}
.text90 {
display: inline-block;
white-space: nowrap;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
<div class="header container"></div>
<div class="content container">
<h2 class="text90">Title Example</h2>
<div class="insideContent">
<h3>Other Title Example</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae cum qui error incidunt animi, aliquid fugit quae! Quia necessitatibus dolore temporibus unde voluptas optio, beatae eos neque ipsum, suscipit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam numquam perferendis mollitia temporibus quidem, id molestias distinctio ex magnam magni, voluptatum exercitationem esse quibusdam nostrum nobis libero excepturi cupiditate qui? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat expedita odit minus nulla quas, consequuntur repellendus voluptatem, ratione, libero cupiditate voluptas quod facilis nisi ipsum alias. Dolorum reprehenderit quod aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nisi odio delectus, illum incidunt atque iste, eveniet velit dicta quasi saepe, quibusdam accusantium excepturi sit ipsum distinctio dolore obcaecati soluta!</p>
</div>
</div>
<div class="footer container"></div>
Like you can see, the width of H2 piratically destroys all the next side text, how can I fix this? I've already tried all my knowledge... Thank you
you can try this writing-mode: vertical-lr;. But this will start the text from top to bottom so it needs to re-rotate to 180deg.
/** RESET PAGE DOWNHERE **/
#import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Montserrat:400,700|Open+Sans|Source+Sans+Pro:400,900");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 400;
font-size: 14px;
}
ul, li, ol, a {
text-decoration: none;
list-style-type: none;
}
.container {
width: 100%;
max-width: 1270px;
margin: auto;
padding: 0 15px;
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
color: #252525;
}
h3 {
font-family: "Droid Serif", serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
letter-spacing: 4px;
margin-bottom: 15px;
}
p {
font-family: "Droid Serif", serif;
font-size: 14px;
line-height: 26px;
color: #898989;
letter-spacing: 1px;
text-align: justify;
}
.header {
height: 150px;
background-color: lightpink;
}
.footer {
height: 50px;
background-color: lightpink;
}
/** RESET PAGE UPHERE **/
.content {
padding: 50px 0;
display: flex;
background-color: lightblue;
}
.text90 {
display: inline-block;
white-space: nowrap;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div class="header container"></div>
<div class="content container">
<h2 class="text90">Title Example</h2>
<div class="insideContent">
<h3>Other Title Example</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae cum qui error incidunt animi, aliquid fugit quae! Quia necessitatibus dolore temporibus unde voluptas optio, beatae eos neque ipsum, suscipit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam numquam perferendis mollitia temporibus quidem, id molestias distinctio ex magnam magni, voluptatum exercitationem esse quibusdam nostrum nobis libero excepturi cupiditate qui? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat expedita odit minus nulla quas, consequuntur repellendus voluptatem, ratione, libero cupiditate voluptas quod facilis nisi ipsum alias. Dolorum reprehenderit quod aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nisi odio delectus, illum incidunt atque iste, eveniet velit dicta quasi saepe, quibusdam accusantium excepturi sit ipsum distinctio dolore obcaecati soluta!</p>
</div>
</div>
<div class="footer container"></div>