Modals not showing properly

Modals not showing properly - javascript

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

Related

How can I show only a desired section and hide all others with vanilla Java Script?

I'm doing a landing page that builds the navigation menu dynamically with JS, and each item in the menu links with one section of the page.
Initially, all sections are hidden (CSS display: none), and then when the user clicks the menu item, the respective section appears.
The problem is that when I've already clicked on the menu to go to a certain section and then I click to go to another, both sections appear, and what I want is to only the section that I click appear, and the others hide.
For example, I click on section 2 then it appears. And when I click on section 4, section 2 disappears and section 4 appears.
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Antic+Slab&family=Henny+Penny&display=swap" rel="stylesheet">
</head>
<body>
<div class="grid__container">
<header class="page__header">
<nav class="navbar__menu">
<!--Mobile menu - won't appear on Desktop view-->
<div class="mobile__menu" onclick="toggleMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul id="navbar__list" class="menu__list"></ul>
</nav>
</header>
<div class="banner__hero">
<h1 class="heading__page">Landing Page </h1>
<div class="banner__center">
<ul class="motives__list__banner">
<li class="motives__item">Great motive</li>
<li class="motives__item">Great motive</li>
<li class="motives__item">Great motive</li>
<li class="motives__item">Great motive</li>
</ul>
<!--This review will only appear here on Desktop view-->
<q class="quote__review"><b>Great review from one of your customers</b><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus.
</q>
</div>
<button type="button" class="page__button">Buy here!</button>
<p class="introduction__text">Why someone would buy your product? (up to 5 lines)</p>
<button type="button" class="page__button" id=buttonContent>More info here!</button>
</div>
<!--The sections will only appear when the appropriate button is clicked-->
<main class="page__main">
<section id="section1" data-nav="More motives" class="your-active-class section__box">
<h2 class=" heading__section">More motives</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue.</p>
<p>Nunc molestie leo non cursus volutpat. Nam aliquam volutpat finibus. Cras rhoncus nec nisl sit amet pretium. Nullam scelerisque neque urna. Nam eget volutpat augue, eget lobortis enim.</p>
</section>
<section id="section2" data-nav="Images" class="section__box section__2">
<h2 class="heading__section">Images/ Screenshots of your product</h2>
<img src="img/product.jpg" alt="Product" class="product__image">
<p>Morbi porttitor auctor enim, sit amet sagittis odio suscipit eu. Vestibulum rutrum mollis dolor, non tristique lacus luctus ac. Integer in ipsum eget nisl pellentesque imperdiet ac vel sapien. Mi dui, sagittis in erat id, rutrum efficitur nisi. Fusce varius risus enim, vitae accumsan eros tincidunt sit amet. Phasellus blandit finibus eros eu suscipit.
</p>
</section>
<section id="section3" data-nav="Reviews" class="section__box section__3">
<h2 class="heading__section">Good reviews of your product</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt.</p>
<p>Morbi porttitor auctor enim, sit amet sagittis odio suscipit eu. Vestibulum rutrum mollis dolor,non tristique lacus luctus ac. Integer in ipsum eget nisl pellentesque imperdiet ac vel sapien.</p>
<p>Nunc molestie leo non cursus volutpat. Nam aliquam volutpat finibus. Cras rhoncus nec nisl sit amet pretium. Nullam scelerisque neque urna. Nam eget volutpat augue, eget lobortis enim. Proin hendrerit eu risus sed tempus. Nunc non lacinia sem, nec suscipit arcu.</p>
</section>
<section id="section4" data-nav="Maybe later" class="section__box section__4">
<h2 class="heading__section">Maybe later?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue.</p>
<p>Morbi porttitor auctor enim, sit amet sagittis odio suscipit eu. Vestibulum rutrum mollis dolor,non tristique lacus luctus ac. Integer in ipsum eget nisl pellentesque imperdiet ac vel sapien.</p>
<p>Nunc molestie leo non cursus volutpat. Nam aliquam volutpat finibus. Cras rhoncus nec nisl sit amet pretium. Nullam scelerisque neque urna. Nam eget volutpat augue, eget lobortis enim.</p>
<button type="button" class="page__button">Let's keep
talking</button>
</section>
</main>
<footer class="page__footer">
<h1 class="heading__section">Add me!</h1>
<p class="contact-text">Github</p>
<p class="contact-text">Linkedin</p>
</footer>
</div>
<script src="js/app.js"></script>
</body>
This is my CSS:
/*
============================
Universal layout
============================
*/
body {
max-width: 100%;
box-sizing: border-box;
font-family: "Antic Slab", serif;
font-size: 16px;
color: #1f2932;
background: linear-gradient(to bottom, #ffefba, #ffffff);
padding: 0px;
margin: 0px;
}
p {
text-align: justify;
}
.grid__container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content;
grid-template-areas:
"nav"
"banner"
"main"
"footer";
max-width: 100%;
}
.page__header {
grid-area: nav;
width: 100%;
}
.menu__list {
font-family: "Henny Penny", cursive;
list-style-type: none;
}
.menu__link {
text-decoration: none;
color: #000000;
font-size: 1.3rem;
border-radius: 25px;
padding: 5px;
border-bottom: 2px inset #000000;
}
.banner__hero {
text-align: center;
grid-area: banner;
border-bottom: 2px dotted #000000;
}
.motives__item {
list-style-image: url(../img/tick-mark.svg);
font-weight: bold;
}
.heading__page {
font-family: "Henny Penny", cursive;
font-size: 4rem;
text-align: center;
}
.page__button {
border: 2px inset #000000;
padding: 12px;
margin: 20px 0;
font-size: 2rem;
background-color: #ffff00;
text-align: center;
cursor: pointer;
}
.page__button:hover {
font-weight: bold;
background-color: #9acd32;
}
.introduction__text {
text-align: center;
}
.page__main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: justify;
max-width: 100%;
padding: 0 10px 0 5px;
gap: 5px;
height: 100%;
}
.heading__section {
font-family: "Henny Penny", cursive;
text-align: center;
}
.product__image {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Setting the display to none, will change onclick with JS */
.your-active-class,
.section__2,
.section__3,
/*
The review will only appear in this part if the user is on a desktop.
Otherwise, it will appear, in the section of reviews (3).
*/
.quote__review {
display: none;
}
.section__4 {
text-align: center;
display: none;
}
.page__footer {
grid-area: footer;
width: 100%;
text-align: center;
display: block;
border-top: 2px dotted #000000;
}
.contact {
text-decoration: underline;
color: #000000;
font-size: 1.2rem;
}
.contact-text {
text-align: center;
}
/*
============================
Mobile layout
============================
*/
#media screen and (max-width: 599px) {
.mobile__menu {
display: inline-block;
cursor: pointer;
}
/* Creating the sandwich menu */
.bar1,
.bar2,
.bar3 {
width: 2rem;
height: 0.3rem;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.menu__list {
display: none;
overflow: hidden;
position: relative;
padding: 0px;
}
.menu__link {
display: block;
margin-bottom: 10px;
padding: 12px;
font-size: 1.3rem;
border-radius: 25px;
border-bottom: 2px inset #000000;
width: 50%;
}
.motives__list__banner {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 40%;
font-size: 1.3rem;
}
.motives__item::marker {
font-size: 4rem;
}
.introduction__text {
font-size: 1.2rem;
}
.product__image {
width: 100%;
}
}
/*
============================
Tablet layout
============================
*/
#media screen and (min-width: 600px) and (max-width: 900px) {
.mobile__menu {
display: inline-block;
cursor: pointer;
}
/* Creating the sandwich menu */
.bar1,
.bar2,
.bar3 {
width: 2rem;
height: 0.3rem;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.menu__list {
display: none;
overflow: hidden;
position: relative;
padding: 0px;
}
.menu__link {
display: block;
margin-bottom: 10px;
padding: 12px;
font-size: 1.3rem;
border-radius: 25px;
border-bottom: 2px inset #000000;
width: 50%;
}
.motives__list__banner {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.motives__item {
font-size: 1.6rem;
}
.motives__item::marker {
font-size: 4rem;
}
.page__button {
font-size: 2.5rem;
}
.product__image {
width: 80%;
}
}
/*
============================
Desktop layout
============================
*/
#media screen and (min-width: 901px) {
.mobile__menu,
.change .bar1,
.change .bar2,
.change .bar3 {
display: none;
}
.menu__list {
display: flex;
justify-content: space-between;
font-family: "Henny Penny", cursive;
list-style-type: none;
background-color: #ffefba;
}
.menu__link {
text-decoration: none;
color: #000000;
font-size: 1.3rem;
border-radius: 25px;
padding: 5px;
border-bottom: 2px inset #000000;
}
.menu__link:hover {
background-color: #657482;
}
.banner__center {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.motives__list__banner {
text-align: left;
width: 20%;
margin-left: auto;
}
.motives__item {
font-size: 2rem;
}
.motives__item::marker {
font-size: 4rem;
}
.quote__review {
display: block;
margin-right: auto;
font-style: italic;
width: 40%;
height: 100%;
}
.introduction__text {
font-size: 1.5rem;
}
.product__image {
width: 50%;
}
}
And this is my JS:
// Global variables
const sections = document.getElementsByTagName("section");
const fragment = document.createDocumentFragment();
const navBar = document.querySelector("#navbar__list");
const button = document.querySelector("#buttonContent");
// Function that creates dynamically the NavBar
function createNavBar () {
for (section of sections) {
const newElement = document.createElement('li');
newElement.innerHTML = `<a class="menu__link" id="menu__${section.id}" href="#${section.id}"> ${section.dataset.nav}</a>`;
fragment.appendChild(newElement);
}
navBar.appendChild(fragment);
}
// Calling the function
createNavBar();
// Showing the sections content only when the linked Nav button is clicked
const menuLink = document.querySelectorAll(".menu__link");
const navList = document.querySelector('.navbar__menu');
navList.addEventListener('click', function showContent (event) {
let currentSelection = event.target.id;
let sectionNumber = currentSelection.slice(-1);
let element = document.querySelector('#section'+sectionNumber);
element.style.display = "block";
})
// Function to display the menu list on Mobile & Tablet layouts
// Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon
function toggleMenu() {
if (navBar.style.display === "block") {
navBar.style.display = "none";
} else {navBar.style.display = "block"}
}
// If the button 'More info here' is clicked, all the content appears.
button.addEventListener ('click', function () {
for (section of sections) {
section.style.display = 'block';
}
})

Did it with the help of #Randy Casburn and #Chris G in the comments:
const sections = document.getElementsByTagName("section");
function showSection () {
navList.addEventListener('click', function showContent (event) {
for (section of sections) {
section.style.display = "none";
let currentSelection = event.target.id;
let sectionNumber = currentSelection.slice(-1);
let element = document.querySelector('#section'+sectionNumber);
element.style.display = "block";
}
})
}
showSection();

Links in my hamburger menu detach themselves from navbar while scrolling down

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/

Onload my website wont load images from gallery but when clicking slider arrows images appear

Website link: https://tomspink.co.uk/portfolio-lovevelo
When clicking on the slider the images will load in, I am not sure why they don't load in on-load. I am using the owl slide: https://owlcarousel2.github.io/OwlCarousel2/
Any help would be great! :)
.owl-carousel .owl-pagination {
text-align: center;
}
.owl-carousel .owl-pagination .owl-page {
border-radius: 8px;
width: 8px;
height: 8px;
display: inline-block;
margin: 0 4px;
position: relative;
background: rgba(255, 255, 255, .7);
display: inline-block;
overflow: hidden;
height: 6px;
width: 6px;
margin: 6px 4px;
text-indent: -200%;
z-index: 1000;
border-radius: 6px;
box-shadow: 0 0 1px rgba(17, 17, 17, .4);
transition: all .3s cubic-bezier(0, 0, .58, 1);
}
.owl-carousel .owl-pagination .owl-page.active {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.image-slider {
position: relative;
}
.image-slider img {
width: 100%;
}
.image-slider.owl-carousel .owl-prev,
.image-slider.owl-carousel .owl-next {
background: rgba(0, 0, 0, .1);
position: absolute;
border-radius: 8px;
height: 50px;
width: 50px;
top: 50%;
margin-top: -25px;
text-align: center;
line-height: 50px;
font-size: 16px;
display: block;
color: #fff;
transition: .2s linear;
}
.image-slider.owl-carousel .owl-prev:hover,
.image-slider.owl-carousel .owl-next:hover {
background: rgba(0, 0, 0, .3);
}
.image-slider.owl-carousel .owl-prev {
left: 15px;
}
.image-slider.owl-carousel .owl-next {
right: 15px;
}
.image-slider .owl-pagination {
margin-top: -28px;
}
.image-slider .owl-dots {
margin-top: 20px;
}
.tms-slides {
text-align: center;
}
.tms-slides .tms-icons h2 {
line-height: 1;
font-size: 32px;
margin: 0 0 20px;
}
.tms-slides blockquote {
border: 0;
line-height: 1.8;
font-size: 22px;
padding: 20px 0;
margin: 0;
}
<section class="module portfolio-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portfolio-content">
<div class="gallery">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Intro-Artwork-1920x1280-2.jpg" alt=""></div>
<figcaption class="gallery-caption">KWD Chartered Surveyors</figcaption>
</figure>
</div>
<div class="portfolio-content">
<div class="image-slider owl-carousel fadeOut">
<img src="assets/images/portfolio/LV-carousel-mac-wtr.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-gall.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-404.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-about.jpg" alt="">
</div>
</div>
<div class="gallery gallery-columns-2">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Letter-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business card</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Business-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business Card & Letterhead</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Aenean vitae bibendum erat. Maecenas lobortis libero sed pellentesque aliquam. Morbi non rhoncus nulla, volutpat bibendum sem. Vestibulum sed justo in lorem vulputate ullamcorper. Sed sollicitudin felis a mi consectetur mattis. Maecenas luctus, ex non vestibulum efficitur, neque urna faucibus justo, in porta massa magna id ex. Duis ac eleifend odio. Pellentesque id metus pharetra, lobortis massa a, porttitor nisi. Aliquam erat volutpat. Nullam nibh nulla, porta ac orci sit amet, accumsan porta sem. Cras pharetra, lectus et semper gravida, ligula sem posuere orci, id tincidunt risus sapien non leo. Quisque ac aliquet nisi. Nam placerat tempus leo, non dictum dui vestibulum vel.

Parallax effect - force text block to behave like background-attachment: fixed

I'm attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and text block) while keeping the text block fixed relative to its parent container.
I've put together a static example of what I'm trying to achieve using screenshots of each section: static example. Of course I'd like the content to be dynamic rather than flat images.
Here's a simple version of my code thus far:
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
The parallax effect is achieved using CSS background-attachment: fixed and works just fine; the trouble is with the text blocks. I'd like to keep them "pinned" in place and centered within their section. If they are set to position: fixed they of course overlap each other and all show up in the first section. If they are set to any other position attribute, they will simply scroll like any other element.
Now, I realize that setting an element's position to fixed means it can no longer be relative to its parent element; it escapes the flow so to speak, but I'm trying to determine if there's a way to achieve the effect with some advanced CSS or even a JS alternative.
I've tried numerous HTML/CSS combinations (wrappers within wrappers, etc.) and I've also attempted various javascript solutions such as rellax, jarallax, and ScrollMagic, but everything I've come across is far too robust for my needs. I've searched around for the better part of the day hoping to find an example of what I'm attempting, but no luck.

In a previous question I did a similar effect with image and using some JS so am going to use the same technique to reproduce this using content as I don't think there is a pure CSS solution. So the idea is to simulate the fixed position by using absolute position and adjusting the top property dynamically on scroll.
Here is an example where I also adjusted some of the CSS to make it easier. I will also rely on CSS variables to make the JS code very light so we can manage everything with CSS.
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}
:root {
--scroll-var: 0px
}
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: relative; /*Mandatory for the overflow effect*/
height: 100vh;
}
section.first {
background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
/* the first section so top start from 0*/
top: calc((0 * 100vh) + var(--scroll-var));
}
section.second {
background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
/* the second section so we need to remove the height of top section
to have the same position so -100vh and we do the same for the other sections
*/
top: calc((-1 * 100vh) + var(--scroll-var));
}
section.third {
background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
top: calc((-2 * 100vh) + var(--scroll-var));
}
section.fourth {
background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
top: calc((-3 * 100vh) + var(--scroll-var));
}
.content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.copy {
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
max-width: 300px;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details
$( document ).ready(function() {
$(document).scroll(function() {
// get the position of my first slide, so I know where did I move
var rect = $(".first")[0].getBoundingClientRect();
// get height of viewport
var screenHeight = $( window ).height();
// setting offset for every .copy element on page, so they share
// the same offset from top (are on top of each other)
// Now you just need to figure out exact math here
$(".copy").offset({ top: screenHeight*1.5-rect.bottom});
});
});
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* added overflow hidden, so that my boxes don't flow out of the slide */
overflow: hidden;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

Coloring of tabs with Dynamics

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>

We Keep Coding

JavaScript is the programming language of the Web.

Modals not showing properly - javascript

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

Related

How can I show only a desired section and hide all others with vanilla Java Script?

Links in my hamburger menu detach themselves from navbar while scrolling down

Onload my website wont load images from gallery but when clicking slider arrows images appear

Parallax effect - force text block to behave like background-attachment: fixed

Coloring of tabs with Dynamics

Categories

Resources