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>
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/
Just like this example build by tcoloredbox of latex.
My problems are:
how to make the title, the Loi image part, be adjusted by sentence length?
how to make the position of the title, still the Loi image part, has a changeable position? Can pure css work this out?
if I want the title sentence be changed when I click/hover the title, how should I do that?
Ok, I have relaize that the math equations are indeed a problem, here is a new post about the problem:
The new post.
Something like this?
https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16
/* For demo only */
body {
padding: 60px;
}
/* Example */
.box {
position: relative;
border: 1px solid #000;
border-radius: 10px;
padding: 10px;
}
.box:not(:last-child) {
margin-bottom: 40px;
}
.box__title {
position: absolute;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 30px;
border-radius: 8px;
background-color: #000;
padding: 0 6px;
}
.box__title--top-left {
top: -52px;
left: 10px;
}
.box__title--top-right {
top: -52px;
right: 10px;
}
.box__title--bottom-left {
bottom: -52px;
left: 10px;
}
.box__title--bottom-right {
bottom: -52px;
right: 10px;
}
<div class="box">
<h6 class="box__title box__title--top-left">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--top-right">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--bottom-left">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--bottom-right">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
I have this test page.
As you can see from the demo, I want the menu bar with the links to disappear to the right when the burger icon is not toggled, but overflow: hidden; doesn't seem to work.
Also, I noticed that if I hide the menu on the LEFT, so with a negative value: transform: translatex(-120%); instead of: transform: translatex(120%); I don't have this problem even without specifying overflow: hidden;.
I also tried giving a width to the body, 'cause I thought "how can it know where to stop 'spilling' content if I don't tell it?", but quiz-show wrong answer sound. :)
What am I doing wrong?
(By the way, this is the first time posting a snippet with some JS inside! Feel powerful :) )
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
header {
margin-bottom: -180px;
}
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(120%);
transition: .5s;
overflow: hidden;
}
.nav1.active {
transform: translatex(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
overflow: hidden;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
Check out this snippet:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
header {
margin-bottom: -180px;
overflow-x: hidden;
}
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(120%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
overflow: hidden;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
</body>
</html>
You need to understand that <header> is overflowing not <nav class="nav1" id="nav1">. Also overflow is happening horizontally only.
Inside CSS, you just need to remove overflow: hidden; from your .nav1 and add overflow-x: hidden; to your header.
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 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.