I am learning JavaScript and have tried to make a modal window open when a button is pressed. I'm using an event listener, but I keep getting an error saying that this block of code is undefined: btnOpenModal.addEventListner('click', openModal);
Any help is most appreciated. Thank you in advance.
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelector('.show-modal');
const openModal = function () {
// console.log('Button clicked');
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
const closeModal = function () {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
btnOpenModal.addEventListner('click', openModal);
btnCloseModal.addEventListner('click', closeModal)
*{
margin: 0;
padding: 0; box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
.show-modal {
font-size: 2rem;
font-weight: 600;
padding: 1.75rem 3.5rem;
margin: 5rem 2rem;
border: none;
background-color: #fff;
color: #444;
border-radius: 10rem;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
p{
font-size: 1.8rem;
}
/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */
.hidden {
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
<button class="show-modal">Show modal</button>
<div class="modal hidden">
<button class="close-modal">×</button> <h1>I'm a modal window </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
ea
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p> </div>
<div class="overlay hidden"></div>
enter link description here
This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>
I'm trying to create a "hover to reveal content" div
Like this:
html {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: red;
}
hr {
transition: width 1s;
width: 5rem;
margin: 0 auto 0 auto;
}
#container {
width: 50%;
height: 100%;
padding: 5rem;
background-color: white;
margin: auto;
}
.expand {
width: 100%;
height: 1rem;
padding: 1rem 0 1.1rem 0;
background: inherit;
transition: height 0.5s;
text-align: center;
}
.wrapper:hover>.expand {
height: auto;
}
.wrapper:hover>hr {
width: 100%;
}
.text {
margin: 1rem 0 0 0;
overflow: hidden;
height: 0;
transition: height 0.5s;
}
.wrapper:hover .text {
height: 16rem;
transition: height 1s;
}
<div id="container">
<div class="wrapper">
<hr>
<div class="expand">
Hover to Learn more
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<hr>
</div>
</div>
But I'm facing a few problems:
As you can see when running the sample code it opens perfectly but
when hovering out of the div there is no closing transition
I have to manually add a value height:16rem instead of automatically assigning the height required
.wrapper:hover .text {
height: 16rem;
transition: height 1s;
}
(this becomes and issue when the browser is resized)
my best guess is that both the issues arise because of the height:auto source
so I'm guessing it's almost impossible to fix via css but is there any javascript solution (ideally using Vanilla js)?
One way I have worked around this exact challenge was to avoid trying to transition a dynamic element's height. You can still achieve a similar 'feel' by using something like:
.wrapper {
transition: transformY(0);
opacity: 0;
height: 0;
}
.wrapper:hover {
transition: transformY(10px);
height: auto; // Don't animate this property
opacity: 1;
}
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}
.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
#keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
pointer-events: none;
}
<body>
<div id="overlay"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">×</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>
From the above code if you click on the button it makes a modal appear by setting it's display to block, now what i want is that when you click outside the modal the modal will disappear, can anyone help with a code for that. i have tried
var modal = document.getElementById('modal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
but that doesn't work
i have checked other question on stack overflow about this but none of them work
You already have all the pieces, you just need to put it all together. Remove the pointer-events: none; from the overlay CSS so we can click on it. Then add the onclick="modalclose()" to your overlay. Thats it.
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}
.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
#keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
<body>
<div id="overlay" onclick="modalclose()"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">×</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>
You can find where is the click happem, like this
window.addEventListener("click", function(e) {
if (document.getElementById("modalWindow").contains(e.target)) {
alert("clicked inside");
} else {
alert("clicked outside");
}
});
Modals are pretty simple in nature. Most basic example would be consisting of modal itself, close button inside (or sometimes outside modal) and backdrop.
basic modal setup
Now what you want to do is close modal whenever backdrop or close button is clicked. Now there is a design decision to be made, you can include modal inside a backdrop, or keep them on the same level in DOM. From your example I can see that you went with second option. In this case all you need to do is add onClick event to backdrop.
<div id="overlay" onclick="modalclose()"></div>
In case you would have modal inside backdrop you would additionally need to stop event propagation, because any click inside modal would trigger it's parents (including backdrop) onClick events.
var modalElement = document.getElementById('modal');
modalElement.addEventListener('click', function(event){
event.stopPropagation();
});
My ultimate goal is to have a webpage that looks something like this. Here is what I currently have.
My question is how to get the background to stick so that when the user scrolls, the rest of the text covers up the image. I saw this post and tried to play around with background-attachment: fixed but couldn't get anything to work, mainly because I have two backgrounds I'd like to use: the main picture (the kitten), and the texture I use for the background. I'm open to JavaScript or JQuery solutions if that's what it takes since I'm already using it for other features.
Here's the HTML:
<div id='cssmenu'>
<ul>
<li id="menu-one" class="active"><span>Home</span></li>
<li id="menu-two"><span>Wedding Info</span></li>
<li id="menu-three"><span>Direcitions</span></li>
<li id="menu-four"><span>Registry</span></li>
<li id="menu-five" class='last'><span>RSVP</span></li>
</ul>
</div>
<div class="before_content"></div>
<div id="item-one">
<!--<h2 class="names" name='top'>Bob + Suzy</h2>-->
<img src="http://placekitten.com/g/1000/400" alt="Snow" class="background">
</div>
<div id="item-two">
<h3 class="date">Wedding Info</h3>
<p>Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div id="item-three">
<h3 class="date">Directions</h3>
<p>Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div id="item-four">
<h3 class="date">Registry</h3>
<p>Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div id="item-five">
<h3 class="date">RSVP</h3>
<p>Paragraph 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<footer>
Some footer text
</footer>
<script language="javascript" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/scroll.js"></script>
</body>
CSS:
#font-face {
font-family: 'Abraham Lincoln';
src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}
#font-face {
font-family: 'Ingleby';
src: url(../fonts/Ingleby/Ingleby_regular);
}
body {
font-family: 'Ingleby';
background-image: url(../Images/background.jpg);
background-repeat: repeat;
width: 100%;
margin: 0px;
padding: 0px;
}
.clearfix:after {
display: block;
clear: both;
}
h2.names {
font-size: 36px;
text-align: center;
font-family: 'Abraham Lincoln';
}
h3.date {
font-size: 28px;
text-align: center;
font-family: 'Abraham Lincoln';
}
h4 {
font-size: 20px;
text-align: center;
font-family: 'Abraham Lincoln';
}
p {
width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.background {
width: 100%;
background-attachment: fixed;
display: block;
margin: 0px auto;
margin-top: 0px;
}
footer {
text-align: right;
font-size: 12px;
height: 30px;
background-color: rgb(59, 58, 76);
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
}
footer a {
text-align: right;
text-decoration: none;
display: block;
width: 960px;
margin-left: auto;
margin-right: auto;
color: black;
font-size: 12px;
padding-top: 12px;
}
footer a:hover {
text-decoration: underline;
}
#map-canvas {
height: 50%;
margin-top: 200px;
padding: 200px;
}
/* ------------ */
/* PICTURES */
/* ------------ */
.wrapper {
width: 720px;
margin: 0px auto;
display: block;
}
.grow {
-webkit-transition: all .2s ease-in-out; /* Safari and Chrome */
-moz-transition: all .2s ease-in-out; /* Firefox */
-ms-transition: all .2s ease-in-out; /* IE 9 */
-o-transition: all .2s ease-in-out; /* Opera */
transition: all .2s ease-in-out;
margin: 20px;
}
.grow:hover {
-webkit-transform: scale(1.1); /* Safari and Chrome */
-moz-transform: scale(1.1); /* Firefox */
-ms-transform: scale(1.1); /* IE 9 */
-o-transform: scale(1.1);
transform: scale(1.1);
z-index: -100;
}
/* ------------ */
/* NEW MENU */
/* ------------ */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
font-size: 14px;
}
ul {
text-align: center;
}
#cssmenu {
line-height: 1;
background: rgb(43, 41, 59) ;
/*
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%); */
border-bottom: 5px solid rgb(117, 144, 112 );
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
/*
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
*/
color: white;
display: block;
font-family: "Ingleby";
font-size: 50px;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgb(117, 144, 112 );
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
/*
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
*/
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: white;
/*
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
*/
background: #403D57;
/*
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
*/
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
/* Make menu bar stay at top */
#cssmenu {
position: fixed;
top: 0;
width: 100%;
}
h2 {
margin-top: 75px;
}
JavaScript:
$(document).ready(function(){
var itemFour = $("#item-four");
var position = itemFour.offset();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $("#item-five").offset().top - 75) {
$("li").removeClass('active');
$("#menu-five").addClass('active');
} else if (scroll >= $("#item-four").offset().top - 75) {
$("li").removeClass('active');
$("#menu-four").addClass('active');
} else if (scroll >= $("#item-three").offset().top - 75) {
$("li").removeClass('active');
$("#menu-three").addClass('active');
} else if (scroll >= $("#item-two").offset().top - 75) {
$("li").removeClass('active');
$("#menu-two").addClass('active');
} else {
$("li").removeClass('active');
$("#menu-one").addClass('active');
}
});
$("#menu-one").click(function() {
$('html, body').animate({
scrollTop: $("#item-one").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-two").click(function() {
$('html, body').animate({
scrollTop: $("#item-two").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-three").click(function() {
$('html, body').animate({
scrollTop: $("#item-three").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-four").click(function() {
$('html, body').animate({
scrollTop: $("#item-four").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-five").click(function() {
$('html, body').animate({
scrollTop: $("#item-five").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
});
basically:
<div class="imageCover" style="background-image:url(http://placekitten.com/1000/400)"></div>
CSS:
.imageCover{
height:500px;
background: none 50% / cover fixed;
}
Regarding your jQuery, this is all you need:
$(function(){
var $menuLi = $("[id^=menu-]");
var $itemEl = $("[id^=item-]");
$(window).on("scroll resize", function() { // check also on resize!
var scroll = $(window).scrollTop();
var currId = $itemEl.filter(function(i, e){ // Filter items
return $(e).offset().top >= scroll - 75; // retrieve a match
})[0].id.split("-")[1]; // get it's suffix (i.e: "two")
$("#menu-"+currId).addClass("active").siblings().removeClass("active");
});
$menuLi.click(function() {
var num = this.id.split("-")[1]; // get "one", "two"...
var y = $("#item-"+ num).offset().top-74;
$('html, body').animate({scrollTop: y }, 'slow');
});
});
A better approach using #href to #id
jsBin demo
Hash-Link the Menu A HREF to the desired article ID elements like:
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="imageCover" style="background-image:url(image1.jpg)"></div>
<article id="home"><h1>Home</h1><p>Content</p></article>
<div class="imageCover" style="background-image:url(image2.jpg)"></div>
<article id="home"><h1>About</h1><p>Content</p></article>
<div class="imageCover" style="background-image:url(image3.jpg)"></div>
<article id="home"><h1>Contact</h1><p>Content</p></article>
where i.e. the hash href="#about" relates to the id="about" article.
CSS:
nav{
background: hsla(0, 0%, 100%, 0.9);
position:fixed;
width:100%;
box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.4);
}
#menu li, #menu a{
display: inline-block;
}
#menu a{
padding: 15px 25px;
text-decoration: none;
border-right:1px solid #fff;
color:#000;
}
#menu a.active{
background: #dca;
}
.imageCover{
height:500px;
background: none 50% / cover fixed;
}
article{
margin: 0 auto;
padding: 50px;
width: 80%;
max-width: 1140px;
}
than inside jQuery you watch the window scrollTop and filtering the current positions you set the active class to the related Menu Link:
var $link = $("#menu a");
var $arti = $("article");
$(window).on("scroll resize", function() {
var scroll = $(this).scrollTop();
var id = $arti.filter(function(i, el){
return $(el).offset().top >= scroll;
})[0].id;
$link.removeClass("active");
$("#menu a[href$="+id+"]").addClass("active");
});
$link.click(function( e ) {
e.preventDefault(); // Don't follow link!
var y = $( $(this).attr("href") ).offset().top;
$('html, body').stop().animate({scrollTop: y }, 'slow');
});
You can add an illusion that will make the images position the way you want by using some parallax scroll effect. Here's one of the many links where you can find tutorials and examples on how to add a parallax effect to your elements using a combination of background fixed positions, scroll speed, etc: https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/