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
Related
I'm using accordions for my site (as seen in this video), but when I open a accordion, the accordion beside it opens as well and when I close it, the accordion beside it disappears 💀
I don't know why this happens.
(PS: ignore the snow that was just some testing)
var acc = document.getElementsByClassName("accordion-card");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
}
.accordion-card {
background-color: rgba(182, 210, 253, 0.041);
border-radius: 10px;
width: 30vw;
max-width: 385px;
min-width: 350px;
/*height: 70px;*/
border: 1px solid rgba(153, 196, 239, 0.121);
position: relative;
}
.accordion-header {
color: rgba(255, 255, 255, 0.841);
font-weight: 600;
font-size: 1.25rem;
padding: 1rem 1.5rem 0.8rem 1.3rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
/*border-bottom: 1px solid rgba(153, 196, 239, 0.121);*/
}
.accordion-content {
color: rgba(255, 255, 255, 0.658);
font-weight: 300;
font-size: 1rem;
/*padding-top: 1rem;*/
/*padding-bottom: 1rem;*/
padding-left: 1rem;
padding-right: 1.3rem;
line-height: 1.5em;
/* hide the content until shown */
height: 0;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}
.accordion-header::after {
content: '\003E';
font-size: 2rem;
font-weight: 400;
position: absolute;
right: 1rem;
}
.accordion-card.active .accordion-content {
height: 150px;
padding: 1rem 1rem 1rem 1.3rem;
}
.accordion-card.active .accordion-header::after{
transform: rotate(90deg);
transition: ease-in-out 0.5s;
}
<div class="accordion-wrapper">
<div class="accordion-card">
<div class="accordion-header">
Card 1
</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 2</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 3</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 4</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 5</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 6</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
</div>
I expected only the accordion I opened to open, not others beside it. Also, if any of you guys could help me solve the problem of them disappearing unexpectedly, that would be a great help.
There are 2 problems in you code:
I'm not sure why you are toggling the visibility of the next Sibling element in JS. This is what causes the blocks to disappear.
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
Removing this part of the code now resolves the blocks disappearing.
The blocks now stop disappearing, but they still "open". They don't really open they just stretch their titles, because of the CSS Flex. There is easy CSS solution for that:
.accordion-card {
max-height: 70px;
}
.accordion-card.active {
max-height: none;
}
We fix the max-height to 70px for all, so they don't get enlarged. and remove the max height for the active one. Then only the active one will have full height.
Here is a working JS Filled example with all the changes.
https://jsfiddle.net/s612pbmk/1/
So basically I want to resize my image depending on the available space of the container. I have a description and an image, and the image should resize depending on the amount of text in the description and not just push it upwards as it does for me now. In this project, I'm using react.
Default result if the description is small:
Unwanted result if the description is large:
Desired resault if the description is large:
My current code:
<div className={classes["main-post-container"]}>
<img className={classes["main-image"]} src={test} alt="test" />
<p className={classes["main-description"]}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus illo
enim magnam neque fugit rem praesentium voluptate quod architecto aut
non, id fugiat modi tempora hic sed amet, eligendi delectus. Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Temporibus obcaecati
dolore mollitia animi praesentium laudantium sit cumque exercitationem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima
pariatur quae id et officiis repellat doloribus, beatae ducimus quaerat
repellendus nesciunt aliquid dolorem recusandae vero officia! Pariatur,
voluptatem fugiat. .
</p>
</div>
CSS:
.main-post-container {
width: 70%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 3rem;
}
.main-image {
max-height: 450px;
max-width: 800px;
object-fit: fill;
flex-grow: 1;
}
.main-description {
font-weight: 900;
font-size: 1rem;
flex-grow: 3;
}
Try this css class:
.main-image {
max-height: 450px;
max-width: 800px;
object-fit: fill;
flex-grow: 1;
height: auto
}
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'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>
I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out.
How to disable the scrolling of the content-wrapper.
How to only scroll the off canvas menu. Right now it scrolls the height of the website itself.
Here is a code pen to show you what issues I'm running into.
code pen demo
HTML
<div id="menu">
<h1>This is the push over menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias id accusantium, consequatur, repellendus iure impedit consectetur aspernatur quas quo. Doloremque, facere autem ex tempora dicta consequuntur, possimus minima natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quis voluptatibus, nesciunt debitis ea ullam consectetur illo cum odit nobis explicabo cumque, vitae quia dolores, fugit maxime ad nisi earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatibus dignissimos possimus, voluptatem ducimus illum voluptate deleniti et culpa autem laboriosam, pariatur voluptates enim facilis, animi nesciunt dolor expedita repellat.</p>
</div>
<div id="burger-icon">
<h2>burger menu</h2>
</div>
<div id="content-wrapper">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ullam, alias dignissimos dolore, a ratione dicta ipsam delectus facilis quod voluptates autem beatae sed impedit eligendi, consequuntur necessitatibus modi nemo?</p>
</div>
CSS
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
min-height: 100%;
z-index: 1000;
padding-top: 50px;
}
#burger-icon {
position:fixed;
top: 10px;
left: 10px;
color: yellow;
cursor: pointer;
z-index: 2000;
}
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
min-height: 200vh;
}
JS
var isOpen = false;
// sets the about off screen number
var aboutOffPosition = $("#menu").css("left");
//console.log($("#about").css("left"));
function openMenu() {
// console.log("burger clicked");
if(isOpen === false)
{
// slide over the about section
TweenMax.to($("#menu"),".75", {left:0, ease: Power1.easeIn});
// move over the content
TweenMax.to($("#content-wrapper"),1, {x:500, ease: Power1.easeIn});
isOpen = true;
}
else{
// slide back the about section
TweenMax.to($("#menu"),".75", {left:aboutOffPosition, ease: Power1.easeIn});
// move back the content
TweenMax.to($("#content-wrapper"),".5", {x:0, ease: Power1.easeIn});
isOpen = false;
}
}
// burger icon
$('#burger-icon').click(openMenu);
Thanks!
As far as I can understand you want to disable scroll of content-wrapper when menu is open and at the same time scroll should be enable for menu.
you just need to remove min-height from the #content-wrapper and set overflow to hidden to hide the scroll.
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
overflow:hidden;
}
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
height: auto;
z-index: 1000;
padding-top: 50px;
}
I was able to fix this by adding a container(.app) around the content and applying this css to the project.
body {
// scroll fix
height: 100%;
overflow: hidden;
// end scroll fix
}
.app {
// scroll fix
overflow-y: scroll;
height: 100vh;
// end scroll fix
}
#about {
height: 100vh;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
}
I updated the codepen to reflect these changes.