I'm having this issue where I have a navbar and a hamburger menu which displays some links on click.
The links are fixed positioned, and body is set to overflow-x: hidden and overflow-y: scroll, but when I try to scroll down the page in mobile, it doesn't work; whereas the whole thing scrolls down too if I remove the overflow-x attribute.
I just need to find the way to make the page scroll when the menu is closed and to not do it and not detach from the navbar while it's open. I had to set the overflow-x: hidden because in mobile it scrolled to the right where the nav-links were hidden.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const menu = document.querySelector('.menu');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.3s ease-in forwards ${index/7+.5}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
.nav-up {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
background-color: #f4f8ff;
}
.brand {
color: #740000;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 2px;
font-size: 1.5rem;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
text-decoration: none;
font-family: "Gilda Display", serif;
color: black;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 35px;
height: 3px;
margin: 5px;
background-color: black;
border-radius: 2px;
transition: all 0.3s ease;
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
overflow-y: scroll;
}
.nav-links {
z-index: 100;
position: fixed;
right: 0;
height: 90vh;
top: 10vh;
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
background-color: #f4f8ff;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#media screen and (min-width: 769px) {
.hide {
display: none;
}
.logo {
margin: 1rem;
}
.nav-links {
width: 60%;
}
}
#hero {
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero {
background: green;
height: 80vh;
}
.title {
font-family: "Gilda Display", serif;
color: #ede8e6;
text-align: center;
margin: 2rem;
letter-spacing: 2px;
height: 200px;
animation: title-effect 2s ease-in forwards;
position: relative;
}
#keyframes title-effect {
from {
top: -2rem;
}
to {
top: 7rem;
}
}
.btn-ver {
padding: 0.5rem 1rem;
font-size: 1rem;
font-family: "Gilda Display", serif;
background: rgba(161, 175, 179, 0.76);
border: 1px solid #909ea2;
color: black;
cursor: pointer;
letter-spacing: 1px;
animation: btn-effect 2s ease-in forwards;
}
.btn-ver:hover {
background: rgba(183, 201, 206, 0.76);
}
#keyframes btn-effect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#second-section {
height: 80vh;
background-color: whitesmoke;
}
<nav class="nav-up">
<div class="logo">
<p class="brand">Hello, world</p>
</div>
<ul class="nav-links">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
<li>SEVEN</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section class="hero" id="hero">
<div class="title">
<h1>TITLE</h1>
</div>
<div class="btn">
<button class="btn-ver" id="verBtn">BUTTON</button>
</div>
</section>
<section class="section2" id="second-section">
<div class="wrapper-2">
<div class="title-2">
<h3 id="sf-t">TITLE TWO</h3>
</div>
<div class="par" id="parag">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, litora nunc dignissim massa ornare vitae et vel, netus aptent dictumst class magna at. Nulla dictumst aliquam nostra est suspendisse massa condimentum cubilia ac mauris mi, montes in aenean
accumsan tempus scelerisque arcu eget eleifend id. Curabitur non gravida iaculis eu vehicula ac mauris porttitor, vivamus feugiat nec laoreet egestas pretium mus, diam sagittis elementum orci accumsan ad venenatis.Varius vel parturient magnis
nibh mus rutrum odio volutpat quisque curae, egestas dictumst conubia lectus primis himenaeos sagittis hendrerit felis, urna euismod aliquet bibendum facilisis nec ut aliquam luctus. Tincidunt magna ullamcorper odio conubia accumsan massa proin
eleifend malesuada leo ante, primis platea nascetur laoreet rutrum suscipit pretium potenti sodales class blandit, nostra elementum posuere augue condimentum dictum fringilla auctor sapien eros. Class sodales vehicula mattis eros odio lectus ultrices
augue magnis imperdiet, primis sollicitudin litora rutrum lacinia lobortis tempor sociosqu.</p>
</div>
</div>
</section>
I got it working. Change the nav-links position from fixed to absolute.
.nav-links {
z-index: 100;
position: absolute;
right: 0;
height: 90vh;
top: 10vh;
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
background-color: #f4f8ff;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
Working example https://jsfiddle.net/nmkzo04x/
Related
I have the following code:
// Projects Script
document.addEventListener("DOMContentLoaded", function (event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") { readMoreButton.textContent = "Read Less"; }
else { readMoreButton.textContent = "Read More"; }
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
})
})
})
#import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-y: auto;
overflow-x: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 3px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
height: auto;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
border-radius: 10px;
}
<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
<figcaption>
<h3>Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
<div class="read-more">Read More</div>
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>
</figcaption>
</figure>
When you run the above code, see how the scrollbar is there on the box? I would like that to be hidden, but only appear after the user clicks the read more button. So, the expected output should be the scrollbar hidden on the box, but I would like the y-axis scrollbar to only appear after the user clicks read more button.
The way to accomplish that would be to remove the unnecessary space on the box. For example, I set the height of the image to 258 px because the whole box height is that, and so I wanted to remove the extra space so that the scrollbar does not appear. It should only appear after the user clicks read more button. Any suggestions?
Just make overflow-y hidden by default, and auto when toggled.
Get the scrolled-container of the button by closest* method, then toggle its class the same way you toggled the hiddenContents.
* closest nethod has 95.3% support rate as of today, so you may need an alternative, depends on your clients nature.
// Projects Script
document.addEventListener("DOMContentLoaded", function(event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more");
const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") {
readMoreButton.textContent = "Read Less";
} else {
readMoreButton.textContent = "Read More";
}
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
readMoreButton.closest(".snip1311").classList.toggle("reading");
})
})
})
#import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311.reading {
overflow-y: auto;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-x: hidden;
overflow-y: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 3px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden {
display: none;
}
.read-more {
cursor: pointer;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
height: auto;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
border-radius: 10px;
}
<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" />
<figcaption>
<h3>Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
<div class="read-more">Read More</div>
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur
urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>
</figcaption>
</figure>
I have a navigation menu that is using anchor tags. I am making a one-page website but the navigation on the mobile menu scrolls to the section and then keeps jumping back to the top when I open or close it. I've tried return false and preventDefault and nothing is working. I've read through many other similar questions and none of the answers seem applicable to this bit of code. All of my sections are built the same as the one I've posted. I know it's gotta be a simple answer but I'm having a block. Thank you in advance!
<nav>
<ul id="mySidenav" class="sidenav">
×
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#blog">Blog</a></li>
<li><a class="nav-link" href="#bio">About the Developer</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="home" id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fas fa-bars"></i></span>
<h1>This is the content.</h1>
<section id="home">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ultricies leo hendrerit fringilla. Donec vestibulum ut arcu eget porttitor. Sed eget dictum diam. Pellentesque et libero vitae eros molestie accumsan. Quisque ante sem, tristique vitae justo eget, rhoncus dictum ipsum. Suspendisse gravida volutpat justo, non auctor quam feugiat id. Aenean dapibus eget sem sit amet rhoncus. Nulla facilisi. Aliquam erat volutpat. Suspendisse ac ex diam.</p>
</section>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
return false;
}
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
UPDATE:
It has something to do with either the scripts, the fixed property, or the anchor tag. I have no idea how to go about keeping the page from jumping when I open and close the menu on mobile though. I've been researching this for hours now and am getting incredibly frustrated.
CSS:
#media only screen and (max-width: 768px) {
body {
display: block;
}
header {
grid-column: 1 / 3;
width: 95vw;
height: 50vh;
}
header img {
max-height: 50vh;
}
.hamburger {
position: sticky;
top: 0;
}
.sidenav {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #213c50;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
nav ul {
text-decoration: none;
list-style: none;
font-size: 25px;
transition: 0.3s;
padding-inline-start: 0;
}
nav ul li a {
background-color: #213c50;
color: #fff;
text-decoration: none;
}
.closebtn {
position: absolute;
size: 20px;
margin-left: 200px;
}
#main {
padding: 1rem;
}
#main h1, h2, p {
padding-bottom: 2rem;
transition: margin-left .5s;
padding-left: 3rem;
}
section {
padding: 2rem;
padding: bottom 20rem;
margin: 0 0 3rem 0;
}
#home {
min-height: 50vh;
color: #fff;
background-color: #213c50;
}
#projects {
min-height: 50vh;
color: #000;
background-color: #fb806f;
}
#blog {
min-height: 50vh;
color: #000;
background-color: #53a181;
}
#bio {
min-height: 50vh;
color: #000;
background-color: #fb806f;
}
#contact {
min-height: 50vh;
color: #fff;
background-color: #213c50;
}
}
Im doing some modals for a web but they don't show properly on my PC. I played with this code (https://codepen.io/joshuaward/pen/jYZXGo) to do it, adding the information that I would use and changing the font and all went good but when I transfered it to Sublime Text and save it, this is what looks like.
modals
JAVASCRIPT:
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
I just added a google font (and changed font family in CSS file) + added charset utf-8 (because the information is in spanish) in the top of the original code in the HTML file.
Hi the problem is the code from where you are copying the stuff is using the SCSS
https://codepen.io/joshuaward/pen/jYZXGo
You need to convert or compile the SCSS to CSS
using this link https://www.cssportal.com/scss-to-css/
Below code is for converted CSS from SCSS and working fine.
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
background-color: slategray;
}
button {
cursor: pointer;
}
body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.trigger {
margin: 0 0.75rem;
padding: 0.625rem 1.25rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.24);
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
font-size: 0.875rem;
font-weight: 300;
}
.trigger i {
margin-right: 0.3125rem;
}
.trigger:hover {
box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.25), 0 0.625rem 0.625rem rgba(0, 0, 0, 0.22);
}
.modal {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 0vh;
background-color: transparent;
overflow: hidden;
transition: background-color 0.25s ease;
z-index: 9999;
}
.modal.open {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.25s;
}
.modal.open > .content-wrapper {
transform: scale(1);
}
.modal .content-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 50%;
margin: 0;
padding: 2.5rem;
background-color: white;
border-radius: 0.3125rem;
box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
transform: scale(0);
transition: transform 0.25s;
transition-delay: 0.15s;
}
.modal .content-wrapper .close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: none;
background-color: transparent;
font-size: 1.5rem;
transition: 0.25s linear;
}
.modal .content-wrapper .close:before, .modal .content-wrapper .close:after {
position: absolute;
content: '';
width: 1.25rem;
height: 0.125rem;
background-color: black;
}
.modal .content-wrapper .close:before {
transform: rotate(-45deg);
}
.modal .content-wrapper .close:after {
transform: rotate(45deg);
}
.modal .content-wrapper .close:hover {
transform: rotate(360deg);
}
.modal .content-wrapper .close:hover:before, .modal .content-wrapper .close:hover:after {
background-color: tomato;
}
.modal .content-wrapper .modal-header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 0 1.25rem;
}
.modal .content-wrapper .modal-header h2 {
font-size: 1.5rem;
font-weight: bold;
}
.modal .content-wrapper .content {
position: relative;
display: flex;
}
.modal .content-wrapper .content p {
font-size: 0.875rem;
line-height: 1.75;
}
.modal .content-wrapper .modal-footer {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 1.875rem 0 0;
}
.modal .content-wrapper .modal-footer .action {
position: relative;
margin-left: 0.625rem;
padding: 0.625rem 1.25rem;
border: none;
background-color: slategray;
border-radius: 0.25rem;
color: white;
font-size: 0.87rem;
font-weight: 300;
overflow: hidden;
z-index: 1;
}
.modal .content-wrapper .modal-footer .action:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transition: width 0.25s;
z-index: 0;
}
.modal .content-wrapper .modal-footer .action:first-child {
background-color: #2ecc71;
}
.modal .content-wrapper .modal-footer .action:last-child {
background-color: #e74c3c;
}
.modal .content-wrapper .modal-footer .action:hover:before {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<button data-modal-trigger="trigger-1" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 1
</button>
<button data-modal-trigger="trigger-2" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 2
</button>
<button data-modal-trigger="trigger-3" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 3
</button>
<div data-modal="trigger-1" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 1</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-2" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 2</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-3" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 3</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
I think you missed add CSS file link or put the SCSS code if you using only HTMl then use css not scss
I try with your code in subline it's work fine
Here i upload link in W3Schoolenter link description here
I'm building a CSS lightbox gallery. I want to pretty up part of its operation using CSS transition animations. What I'm attempting to do is this: When you hover over the base image, it animates with a "pulse" to let you know you can interact with it. When you click on it, it spins and zooms and fades out towards the viewer, as if it's turning into the block of information that will fade in in the lightbox that is supposed to appear. The box that comes up is not purely an image. It's a span of text with an image. Then when you click the (X) close button or click anywhere on the page, the lightbox disappears abruptly without fading out and all the original images are back in place.
What's actually happening is you click on the base image, it spins, zooms, and fades like it should, but in the background, the other images to its right slide over to take its place. Then when you click the lightbox away, everything is back in place. I don't want the other images to move over and fill where the first one was. How do I keep everything from shifting, so that when you click on image1 and it animates away, the other images stay put? This way if you click on image2, image 3, 4, and 5 etc don't slide over, or whatnot.
I'm using some Javascript to make my click animations happen, that I borrowed/learned from another Stack Overflow question that was answered. If you can find a better way to achieve what I want, please help and add it.
As a side question, how can I make the lightbox come up such that if you click on the (X) close button or outside the text box, it closes the lightbox, but if you click inside the text box, nothing happens and the lightbox stays where it is? This way people can click and highlight to copy text inside of the text box if they want.
I cannot seem to reproduce any of the click animation through the snippet code, so just so you can see what's actually happening, here's a link to the original test code on my personal web account where you can see the actual click animation and what's going wrong: http://www.cafenocturne.com/testpage/biogallery/
Here's a snippet of the code I'm working with.
$(window).load(function() {
$(".ClickAnim").click(function() {
$(this).addClass("rotOutZm");
setInterval(function() {
$(".ClickAnim").removeClass("rotOutZm");
}, 2000);
});
});
/* Just some base styles not needed for example to function */
*,
html {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
height: 100%;
}
body,
form,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
margin: 0;
padding: 0;
}
body {
background-color: #606061;
color: WHITE;
overflow: hidden;
}
img {
border: none;
}
p {
font-size: 12px;
margin: 0 0 1em 0;
}
h2 {
padding: 10px 0 0 20px;
}
.clear + h2 {
padding: 0 0 0 20px;
}
.clear {
height: 0 !important;
line-height: 0 !important;
clear: both !important;
font-size: 1px !important;
margin: 0;
padding: 0;
float: none !important;
}
/* animations */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*rotateOut+Zoom */
#keyframes rotOutZm {
100% {
margin: -50px;
/* image is 100x100px size so... */
-webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
#-webkit-keyframes rotOutZm {
100% {
margin: -50px;
/* image is 100x100px size so... */
-webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
.rotOutZm {
-webkit-transform-origin: center;
-webkit-animation: rotOutZm forwards 1.8s;
transform-origin: center;
animation: rotOutZm forwards 1.8s;
}
/* pulse */
#-webkit-keyframes pulse1 {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes pulse1 {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
/* fadeIn */
#-webkit-keyframes fadeIn1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn1 {
-webkit-animation-name: fadeIn1;
animation-name: fadeIn1;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/* Bio styles */
ul {
padding: 20px 0 20px 20px;
float: left;
}
ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px 0 0;
}
.pulse1:hover {
-webkit-animation: pulse1 0.8s;
/* Safari 4+ */
-moz-animation: pulse1 0.8s;
/* Fx 5+ */
-o-animation: pulse1 0.8s;
/* Opera 12+ */
animation: pulse1 0.8s;
/* IE 10+, Fx 29+ */
}
ul li img,
ul li label {
display: block;
cursor: pointer;
}
ul li input {
display: none;
}
ul li input:checked + .overlay {
display: table;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
.overlay label {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.overlay img {
display: inline;
border: none;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: WHITE;
}
.overlay label > img,
.content01 {
border: 1px solid GRAY80;
-moz-box-shadow: 5px 5px 10px BLACK;
-webkit-box-shadow: 5px 5px 10px BLACK;
box-shadow: 5px 5px 10px BLACK;
}
.content01 {
display: block;
width: 460px;
padding: 20px;
background: WHITE;
color: BLACK;
margin: 0 auto;
text-align: left;
cursor: auto;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.content01 .inner_content {
display: block;
height: 500px;
overflow-y: auto;
}
.content01 .inner_content span {
display: block;
margin-bottom: 12px;
font-size: 12px;
}
.overlay .inner_content {
height: 265px;
}
.content01 img:first-child {
float: left;
display: block;
margin: 0 10px 0 0;
}
.content01 img {
float: right;
margin: 0 10px;
padding: 0;
}
input[id^='bio'] {
cursor: pointer;
height: 265px;
}
.content02 {
width: 820px;
padding: 0;
}
#close {
display: none;
}
.closebutton {
background: #606061;
color: #FFFFFF;
cursor: pointer;
height: 24px;
line-height: 24px;
overflow: hidden;
position: absolute;
right: -12px;
text-align: center;
top: -12px;
width: 24px;
border: 2px solid;
border-color: #c18c8b #c05a58 #cc514e #a67776;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
-moz-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
-webkit-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
}
.closebutton:hover {
background: #f43530;
text-shadow: 1px 1px 1px GRAY80;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<h2>Static Content</h2>
<ul>
<li>
<label class="animated pulse1" for="bio">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Hideto" />
</label>
<input type="radio" id="bio" name="Staff" />
<div class="overlay animated fadeIn1">
<label for="close"> <span class="content01">
<strong class="closebutton" title="Close bio">X</strong>
<span class="inner_content">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
</span>
</span>
</label>
</div>
</li>
<li>
<label class="animated pulse1" for="bio2">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Kieran" />
</label>
<input type="radio" id="bio2" name="Staff" />
<div class="overlay animated fadeIn1">
<label for="close"> <span class="content01">
<strong class="closebutton" title="Close bio">X</strong>
<span class="inner_content">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
<span>OTHER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
</span>
</span>
</label>
</div>
</li>
</ul>
<div class="clear"> </div>
<input type="radio" id="close" name="Staff" />
</body>
</html>
I have dabbled on your link. If you put a width and height (same width and height of image) on the that is wrapping the image it will keep the space there, instead of moving the next image in its place.
ul li label{
width: 100px;
height: 102px;
}
I have a question, (Below) I am trying to make the links to the two tabs that rollup accordion style to shade the one that isn't selected. I have accomplished this but now I need to darken to two links once they are both closed.
Could you point me in the right direction?
WDH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- <script type="text/javascript" src="../../../jQ_161/jquery-1.6.1.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){
$(".divOneDropdown").show();
$(".clickOnePara").click(function() {
$(".divOneDropdown").slideToggle(777);
if ( $(".divTwoDropdown").css("display") != "none" ) {
$(".divTwoDropdown").slideUp(777);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickTwoPara").click(function() {
$(".divTwoDropdown").slideToggle(777);
if ( $(".divOneDropdown").css("display") != "none" ) {
$(".divOneDropdown").slideUp(777);
}
});
});
</script>
<script type="text/javascript">
function flickColor1() {
document.getElementById("dropButtonTxt1").style.color="white";
document.getElementById("dropButtonTxt2").style.color="gray";
}
function flickColor2() {
document.getElementById("dropButtonTxt2").style.color="white";
document.getElementById("dropButtonTxt1").style.color="gray";
}
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickOnePara{
background-color: transparent;
width: 200px;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
background-color: transparent;
width: 200px;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
.divTwoDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
#contained{
/*border: black solid 2px;*/
width: 800px;
height: 700px;
position: relative;
margin: auto;
}
#topNavs{
position: relative;
left: 0px;
/*width: 100%;*/
padding-bottom: 0px;
}
#contentDrops{
padding-top: 20px;
}
/* Below is the Dropdown Nav Styles */
#dropButtons{
}
#dropNavButton1{
height: 31px;
left: 121px;
padding-left: 37px;
position: absolute;
width: 504px;
z-index: 5;
}
#dropNavButton1 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton1 a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
#dropNavButton1 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropNavButton2{
height: 31px;
left: 376px;
padding-left: 37px;
position: absolute;
width: 503px;
z-index: 5;
}
#dropNavButton2 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton2 a:hover {
background-position: -252px 0;
}
#dropNavButton2 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropButtonTxt1{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
#dropButtonTxt2{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
/* Photo Gallery - Text not associated with above sprite */
#dropNavButton1 a:link{
color: #FFFFFF;
}
#dropNavButton1 a:visited{
color: #FFFFFF;
}
/* Contact - Text not associated with above sprite */
#dropNavButton2 a:link{
color: #FFFFFF;
}
#dropNavButton2 a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
/* Dropdown Nav Styles END */
/* Complimentary Consultation Button - START */
.compConsult{
background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;
background-color: #000000;
height: 38px;
left: 33%;
padding-left: 0;
position: relative;
width: 262px;
z-index: 5;
}
.compConsult a {
display: block;
height: 31px;
width: 248px;
text-decoration: none;
}
.compConsult a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
.compConsult a:active {
background-position: -504px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsult a:link{
color: #FFFFFF;
}
.compConsult a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsultTxt{
font-family: 'LaneB';
font-size: 18px;
padding-top: 6px;
position: absolute;
right: 16px;
width: 230px;
}
/* Complimentary Consultation Button - END */
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<div id="dropNavButton1">
<p class="clickOnePara"><span id="dropButtonTxt1">PROCEDURE AND RECOVERY</span></p>
</div>
<div id="dropNavButton2">
<p class="clickTwoPara"><span id="dropButtonTxt2">SAFETY AND SIDE EFFECTS</span></p>
</div>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est,
consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc,
et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus
et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui.
Curabitur tincidunt pretium quam, a iaculis velit porta nec.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Curabitur dignissim leo sed dolor dapibus quis auctor dui
vestibulum.
<br /><br />
Sed ac laoreet odio. Mauris nec cursus dui.
</p>
</div>
<div class="divTwoDropdown">
<p>
Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Sed elit enim, congue et laoreet a, molestie in neque.
<br /><br />
In placerat tellus nunc, et placerat arcu.
</p>
</div>
</div>
</div>
</body>
</html>
I believe I understand what you are asking for. Give this a shot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".divOneDropdown").show();
$(".divTwoDropdown").hide();
ChangeColor()
$(".clickOnePara").click(function () {
$(".divOneDropdown").slideToggle(777,
function () {
ChangeColor();
}
);
$(".divTwoDropdown").hide();
});
$(".clickTwoPara").click(function () {
$(".divTwoDropdown").slideToggle(777,
function () {
ChangeColor();
}
);
$(".divOneDropdown").hide();
});
});
function ChangeColor() {
if ($('.divOneDropdown').is(':visible')) {
document.getElementById("dropButtonTxt1").style.color = "white";
document.getElementById("dropButtonTxt2").style.color = "gray";
}
else if ($('.divTwoDropdown').is(':visible')) {
document.getElementById("dropButtonTxt1").style.color = "gray";
document.getElementById("dropButtonTxt2").style.color = "white";
}
else {
document.getElementById("dropButtonTxt1").style.color = "gray";
document.getElementById("dropButtonTxt2").style.color = "gray";
}
}
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
#contained { background-color: lightgray; }
.clickOnePara{
background-color: transparent;
width: 200px;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
background-color: transparent;
width: 200px;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
.divTwoDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
#contained{
/*border: black solid 2px;*/
width: 800px;
height: 700px;
position: relative;
margin: auto;
}
#topNavs{
position: relative;
left: 0px;
/*width: 100%;*/
padding-bottom: 0px;
}
#contentDrops{
padding-top: 20px;
}
/* Below is the Dropdown Nav Styles */
#dropButtons{
}
#dropNavButton1{
height: 31px;
left: 121px;
padding-left: 37px;
position: absolute;
width: 504px;
z-index: 5;
}
#dropNavButton1 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton1 a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
#dropNavButton1 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropNavButton2{
height: 31px;
left: 376px;
padding-left: 37px;
position: absolute;
width: 503px;
z-index: 5;
}
#dropNavButton2 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton2 a:hover {
background-position: -252px 0;
}
#dropNavButton2 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropButtonTxt1{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
#dropButtonTxt2{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
/* Photo Gallery - Text not associated with above sprite */
#dropNavButton1 a:link{
color: #FFFFFF;
}
#dropNavButton1 a:visited{
color: #FFFFFF;
}
/* Contact - Text not associated with above sprite */
#dropNavButton2 a:link{
color: #FFFFFF;
}
#dropNavButton2 a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
/* Dropdown Nav Styles END */
/* Complimentary Consultation Button - START */
.compConsult{
background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;
background-color: #000000;
height: 38px;
left: 33%;
padding-left: 0;
position: relative;
width: 262px;
z-index: 5;
}
.compConsult a {
display: block;
height: 31px;
width: 248px;
text-decoration: none;
}
.compConsult a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
.compConsult a:active {
background-position: -504px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsult a:link{
color: #FFFFFF;
}
.compConsult a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsultTxt{
font-family: 'LaneB';
font-size: 18px;
padding-top: 6px;
position: absolute;
right: 16px;
width: 230px;
}
/* Complimentary Consultation Button - END */
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<div id="dropNavButton1">
<p class="clickOnePara">PROCEDURE AND RECOVERY</span></p>
</div>
<div id="dropNavButton2">
<p class="clickTwoPara">SAFETY AND SIDE EFFECTS</span></p>
</div>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est,
consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc,
et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus
et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui.
Curabitur tincidunt pretium quam, a iaculis velit porta nec.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Curabitur dignissim leo sed dolor dapibus quis auctor dui
vestibulum.
<br /><br />
Sed ac laoreet odio. Mauris nec cursus dui.
</p>
</div>
<div class="divTwoDropdown">
<p>
Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Sed elit enim, congue et laoreet a, molestie in neque.
<br /><br />
In placerat tellus nunc, et placerat arcu.
</p>
</div>
</div>
</div>
</body>
</html>