How can I fix this toggle function? - javascript

I am working an a project for setting up a basic responsive web page for myself. I have everything the way that I want it for my set up but I am having problems with my function to open and close the hamburger menu on screens with a max-width of less than 480px. If I take the method toggleMenu() off of my div with a menu class and I uncomment out the javascript code that is currently commented out and comment out the code that is currently active, everything works perfect on every click. However if I leave the code as is and run it in the browser the menu only toggles open on every other click, so the first time I click it nothing happens, the second time I click it, the menu opens up, the third time I click it nothing happens and finally when I click the fourth time the menu closes back up again. The other issue that I am having is currently I have to include an external script file or put a script inside of my html file rather than relying on my build.js file to import the code. My question is what am I missing to get my menu to open and close correctly while still calling a function from my menu class and how would I write this as a module that I can bundle and run from my build.js file. Any help is greatly appreciated and thank you in advance.
My HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bring in google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<!-- Bring in bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Bring in JSPopper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="src/js/index.js" defer></script>
<!-- Bring in my style sheet -->
<link rel="stylesheet" href="src/assets/css/basic-style.css">
<title>Basic Page Setup</title>
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<a href="#">
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="logo-image">
<span class="logo-text">LOGOHERE</span>
</a>
</div>
<ul class="nav-list" id="navi-list">
<li class="list-item">
About Us
</li>
<li class="list-item">
Contact
</li>
<li class="list-item">
Support
</li>
</ul>
<div class="menu" id="toggle-menu" onclick="toggleMenu()">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
<div class="main-content">
<p class="my-story">
Not many have a story like mine. At 2 years old I was diagnosed with leukemia
and went into chemotherapy. This brings a great many problems, not least among
them a compromised immune system. I caught a cold that turned into pneumonia
and I died. It didn’t stick. In that time I saw things that would influence my life
profoundly. I can’t explain what happened but when I woke up, the pneumonia was
gone along with the leukemia. I have also overcome Pancreatic Cancer, Crohn's Disease,
and Diabetes just to name a few of the hurdles I found myself lifted over. I give all glory
to God, but I tell you these things not to garner sympathy or convince you that my God is
real. I tell you this because I believe all these things made me a purposeful person. I got a
certification in Computer programming on purpose. I write clean code on purpose. I believe
you are reading this on purpose. Let me show you what I can do for you on purpose.
</p>
</div>
<div class="footer-container">
<div class="logo-copyright">
<span class="copyright">©</span>
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="footer-logo">
<span class="footer-text">WebTek</span>
</div>
<div class="webmaster-contact">
<span class="footer-info">This page created and designed by</span>
Thomas E. Kremer
</div>
</div>
<!-- <script src="dist/build.js" defer></script>
-->
<!-- <script src="src/js/index.js" defer></script> -->
</body>
</html>
My CSS File:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the logo image and text */
/* .company-logo {
text-decoration: none;
}
.logo-image {
width: 75px;
height: 75px;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 35px;
color: rgba(0, 0, 0, 1);
line-height: 32px;
letter-spacing: 0.03em;
} */
.logo-image {
width: 55px;
height: auto;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 36px;
line-height: 32px;
letter-spacing: 0.03em;
}
.navbar a{
text-decoration: none;
color: rgba(0, 0, 0, 1);
}
.navbar a:hover {
color: blue;
}
.navbar {
align-items: center;
background-color: #FFFFFF;
color: rgba(0, 0, 0, 1);
display: flex;
font-family: Poppins;
font-size: 25px;
justify-content: space-around;
}
.nav-list {
list-style-type: none;
}
.nav-list .list-item {
display: inline-block;
padding: 20px 10px;
}
/* Hide menu on larger screens */
.menu {
display: none;
}
.menu-line {
background-color: green;
width: 25px;
height: 3px;
margin-bottom: 4px;
}
/* Style the footer and footer elements */
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 55px;
height: 55px;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 25px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 21px;
}
.webmaster {
text-decoration: none;
}
.footer-info {
font-family: Poppins;
font-weight: 200;
font-size: 18px;
font-style: normal;
line-height: 32px;
letter-spacing: 0.03em;
}
.webmaster-contact {
margin-top: 13px;
}
.footer-container {
display: flex;
justify-content: space-evenly;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.my-story {
margin-top: 25px;
padding: 0 25px 0 25px;
font-family: Poppins;
font-weight: 200;
font-style: normal;
font-size: 16px;
}
/* Media query for smaller devices, hamburger menu */
#media all and (max-width: 480px) {
.navbar {
flex-direction: column;
position: relative;
}
.logo-container {
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Show menu */
.menu {
display: block;
position: absolute;
right: 10px;
top: 10px;
}
.nav-list {
list-style-type: none;
width: 100%;
text-align: center;
padding: 20px;
display: none;
/* padding-left: 0; */
}
.nav-list .list-item {
display: block;
border-top: 1px solid black;
padding: 10px;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content:inherit;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 20px;
}
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 45px;
height: 45px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 25px;
}
.logo-copyright {
display: inline-block;
margin: 0;
padding: 0;
}
.webmaster-contact {
display: inline-block;
margin: 0;
padding: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
}
My JavaScript File:
/* Toggle hamburger menu */
/* const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
}); */
function toggleMenu() {
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
}
So recap, I am trying to have the hamburger menu open and close with each click and run the script from my bundled build.js file rather than from within my html file or from another external javascript file, either as a module or as an onclick function. Thank you all again for the help in advance.

Your function toggleMenu() is setting an event listener on the first click, then the second click is triggering that listener!
Your first method works (commented out).
Use standalone JS - with no 'onclick' event:
// JS EVENT LISTENER METHOD (my preferred method)
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
// HTML EVENT METHOD
// When you call the named function from HTML `onclick="toggleMenu()"`
// the event listener is not required. You can just toggle
// the .active class as usual.
// <div class="menu" id="toggle-menu" onclick="toggleMenu()">
function toggleMenu() {
const naviList = document.getElementById('navi-list');
naviList.classList.toggle('active');
}
Using both methods together will cancel each other out! It's really toggling .active twice - too fast to see!
tested with codepen
addEventListener VS onclick comparison

Related

How can I make a YouTube embed iframe act like part of the html body for mouse coordinates?

I'm trying to make a mouse trailer for my site, but when hovering over a YouTube iframe the trailer does not follow it into the iframe area. (I'm using js to extract the x and y coordinates of the mouse from the body) I have like no idea how to make this work so any help or ideas would be much appreciated!
Code below:
there are ">"s next to important code
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homestyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>****************</title>
</head>
<body>
<div id="trailer">
</div>
<script src="homescript.js"></script>
<div class="navbaralign">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
<div id="toppage" class="toppage">
<div class="maintitle">
<h1>****************</h1>
<h2>Front-end web developer, music producer, and 3d animator/artist.</h2>
</div>
</div>
<div id="about" class="about">
<h3>About Me</h3>
</div>
> <div id="mywork" class="mywork">
> <iframe class="interactable" src="https://www.youtube.com/embed/B6ipLAQ7lM4" title="bowling alley
> animations be like" frameborder="0" allow=""></iframe>
> <iframe class="interactable" src="https://www.youtube.com/embed/kJniNIlKIDE" title="Ktashi - HOLD
> ON" frameborder="0" allow=""></iframe>
> </div>
</body>
</html>
css
html {
scroll-behavior: smooth;
}
#trailer {
height: 20px;
width: 20px;
background-color: #ffffff;
border-radius: 20px;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 500ms ease;
}
body:hover > #trailer {
opacity: 1;
}
body {
background-color: #FF4722;
margin: 0;
}
h1 {
font-family: Inter;
font-weight: 900;
color: #FFFFFF;
font-size: 48px;
line-height: 48px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h2 {
font-family: Inter;
font-weight: 300;
color: #FFF9D1;
font-size: 24px;
line-height: 24px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h3 {
font-family: Inter;
font-weight: 600;
color: #ffffff;
font-size: 24px;
line-height: 12px;
text-align: left;
}
.toppage {
height: 100vh;
display: grid;
place-items: center;
}
.navbaralign {
display: flex;
justify-content: center;
}
.navbar {
display: flex;
justify-content: space-between;
height: 5vh;
padding: 0;
list-style: none;
align-items: center;
background-color: #000000;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.50);
margin: 0;
position: fixed;
top: 1vh;
width: 80%;
border-radius: 6vh;
padding: 2.5vh;
box-sizing: border-box;
padding-top: 3vh;
padding-bottom: 3vh;
}
.maintitle {
display: grid;
place-items: center;
user-select: none;
}
a {
text-decoration: none;
color: #ffffff;
font-family: Inter;
font-weight: 600;
font-size: 18px;
transition: color 500ms ease;
background-color: linear-gradient(#ffffff, #000000)
}
a:hover {
color: #FFF9D1;
}
#media (max-width: 700px) and (orientation: portrait) {
.navbar {
flex-direction: column;
height: 20vh;
}
}
.mywork {
display: flex;
gap: 2vw;
padding: 2vw;
background-image: linear-gradient(#FF4722, #000000)
}
iframe {
aspect-ratio: 16 / 9;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
.interactable {
transition: background-size 500ms ease, opacity 500ms ease;
}
.interactable:hover {
background-size: 105%;
opacity: 0.8;
}
js
const trailer = document.getElementById("trailer");
window.onmousemove = e => {
const x = e.clientX - trailer.offsetWidth / 2,
y = e.clientY - trailer.offsetHeight / 2;
const keyframes = {
transform: `translate(${x}px, ${y}px)`
};
trailer.animate(keyframes, {
duration: 800,
fill: "forwards"
});
};
I've tried adding
pointer-events: none;
to the iframes' class in css and I had a feeling that that wouldn't work. I was right. but I honestly have no idea what else could work. 😅
For security reasons, browsers don't allow you to get information about interactions made on cross-domain iframes. In this case, youtube.com is a different domain than the original website(ie cross-domain), and thus you can't get mouse information while the user is interacting with youtube. This is done to prevent things like embedding banking websites and getting the user's interactions made on logins etc... You can normally get around this by putting a transparent div over the original iframe, but that would also block any mouse interaction with the youtube iframe in the process. This would mean that while the circle would follow the mouse while you were over the youtube window, you would be unable to start the video since you couldn't interact with the youtube page. There isn't really a way to get around this issue, since it is caused by your web browser's security. Hopefully, this helps :)

How to close dropdown when clicked off of dropdown menu? [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);

Second dropdown button in navigation bar showing the same content as the previous button?

My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.

Classes not being removed from links under div dropdown

I am working on a personal website.
In this site I would like to have the navigation links become active when I scroll to the part of the page relating to that navigation link, all other active links should then have the nav-active class removed.
I have it working partially, the navigation links are highlighting correctly. I do not understand why the active highlighting is not removed when the scrolling moves into the links that are under a div dropdown button.
Can anyone point me in the right direction and also point me to some tutorials/reading (not too advanced) on the relevant information about this issue?
My pen is here:
https://codepen.io/pjsmyth/pen/ZvaZBO/
Thanks in advance
Pete
Code below:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).addClass('nav-active');
$(this).siblings().removeClass('nav-active');
$(this).children().removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>
I think you wish the .dropbtn to highlight when a .scroll under it is highlighted...
There could be a couple ways to do it.
But since the sections (div) have fixed offsets, you can get them all in an array, on load... And then compare them with the scrolled position.
When we have a "match", get its id from another array holding the ids and quit that loop right away.
Here is the script:
$(document).ready(function() {
var scrollLink = $('.scroll');
var dropbtn = $(".dropbtn");
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Get all section position and id
var sectionArr = [];
var sectionId = [];
$("body>div").each(function(){
console.log($(this).attr("id") + " " + $(this).offset().top);
sectionArr.push($(this).offset().top-20);
sectionId.push($(this).attr("id"));
});
// Add the full page height to the array for the comparison of the last section
sectionArr.push($("body").height());
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
// Remove the class everywhere
scrollLink.removeClass('nav-active');
dropbtn.removeClass('nav-active');
// Compare the scrolled position with the offsets stored in array until we find.
for(i=0;i<sectionArr.length;i++){
var target = $(".scroll[href='#"+sectionId[i]+"']");
// if the scrolled position is more than a section position, BUT less than the next
if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
// add the highlight class
target.addClass("nav-active");
if(target.parent().is(".dropdown-content")){
// add the highlight class to the dropdown button
target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
}
break; // Exit the loop on match
}
} // End for loop
}); // End on scroll
}); // End ready
CodePen
Note that you could adjust the "trigger point" so the menu highlighting occurs when more than the half of the section is displayed, which I really think would be nicer!
Just update this line:
sectionArr.push($(this).offset().top-20 - ($(this).height()/2));
That's because your DOM is in the incorrect order. In your DOM, "About" is the last DOM element with .scroll, and since About is also valid for sectionOffset <= scrollbarLocation and is the last item to be processed it overwrites the class manipulation for the other navigation elements that are on screen.
I partially fixed it in this demo here.
Your conditional selection logic is a little confused. The way you have it set up now, if the sectionOffset is less than the scrollbarLocation then you try to set the nav-active class on the current link and remove it from the siblings, children and parent links.
The problem is that if the current link is itself a child link, then the links you want to unset are going to be siblings of the link, siblings of the parent of the link or children of the siblings of the parent link.
You could cover all of those cases manually, but then your code becomes convoluted and brittle. What if, at some point in the future, you want to add additional layers of link nesting? You'd have to manually account for that.
Luckily, since you're already looping through all of your links on a scroll event, there's an easier way. Just check to see if a section has scrolled off of the screen and remove the nav-active class of it's associated link by changing your each callback:
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
Updated CodePen
Here it is as a snippet:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>

Need help to change hover to OnClick using Javascript

I want to have something like a dropdown menu. I now have a hover in css but I know I have to use javascript to make it clickable. Can anyone help me making it clickable?
This is my current html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron">
<p>What will you be making for dinner tonight?</p>
<li class="inspiration">
Give me some inspiration!
<div class="recipe">
With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!
<ul>
<iframe width="392" height="220" src="https://www.youtube.com/embed/SfcSo-j-doc?rel=0&showinfo=0" frameborder="20px" allowfullscreen></iframe>
<ul>
</div>
</li>
</div>
</body>
</html>
and my css:
.inspiration {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
color: #012556;
font-size: 20px;
}
.inspiration:hover {
background: #555;
color: #012556;
font-size: 20px;
}
.inspiration:hover .recipe {
display: block;
opacity: 1;
visibility: visible;
}
.inspiration .recipe {
display: block;
padding: 0;
color: #fff;
position: center;
width: 1000px;
padding-top: 20px;
padding-bottom: 20px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
.jumbotron {
background-image:url(http://www.superiorequipmentsupplies.com/wp-content/themes/superior_v1.73/library/images/hero-residential.jpg);
height: 640px;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 42px;
font-family: 'Shift', sans-serif;
font-weight: bold;
text-align: center;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align: center;
}
I still don't get what to put in my javascript file
Add onclick in your li element
<li class="inspiration" onclick="functionname()">
Using event listeners, and the getComputedStyle() to get the styles and getPropertyValue() to get the visibility property. then using the if else as a toggle for opening and closing the menu dropdown. the css should be visibility: hidden for recipe class
<script>
var inspiration = document.getElementsByClassName("inspiration");
var expandMenu = function() {
var recipe = document.getElementsByClassName("recipe");
var CSSprop = window.getComputedStyle(recipe,null).getPropertyValue("visibility");
if(CSSprop == "visible"){
recipe[0].style.visibility = "hidden";
}else {
recipe[0].style.visibility = "visible";
}
}
inspiration[0].addEventListener("click", expandMenu);
</script>
Using Jquery syntax you can do this.
Add the following code to <head> tag and from css remove hover.
<script>
$(document).ready(function(){
$(".inspiration").click(function(){
$("#recepe").toggle();
});
});
</script>

Categories

Resources