I am working on this website where I want to add a form which opens once you press the login button. The form was created using an online form builder which provides an embed code for embedding into your website. I have provided the embed code along with the html/css for my website.
The HTML:
<div id="mySidenav" class="sidenav">
×
About
Contact
Help
</div>
<!-- <div id="main">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
-->
<div class="header">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<div class="header-right">
<a class="active" href="#home">Login</a>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}
</script>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: dodgerblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 40px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
margin-right: 30px;
}
#main {
transition: margin-left .3s;
padding: 20px;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: dodgerblue;
padding: 25px 20px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
embed code for the form:
<a name="form691431825" id="formAnchor691431825"></a>
<script type="text/javascript" src="https://fs3.formsite.com/include/form/embedManager.js?691431825"></script><script type="text/javascript">
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});</script>
First of all you need to rephrase the text of your post as you only make remarks without asking any question, having people to guess what it is you need.
Assuming you need a trigger to open your login window, here's what I did to make it work:
Modify the script with EmbedManager.embed(..); and put it inside a function called openLogin()
function openLogin() {
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});
}
Now you have a javascript function you can use to open your login screen. Once you have choosen an element (a,button,div,etc) you want to use as the trigger add propertiesname="form691431825" id="formAnchor691431825" onclick="javascript:openLogin()", remove the original a-element and your are good to go.
The result does not look too pretty, leaving you with the next fun puzzle to chew on...
Related
I got this code from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav and it works fine in mobile as is. So simple, yet effective. But my usage doesn't work in my mobile or my customer's mobile.
console says:
(index):66 Uncaught TypeError: Cannot read properties of null (reading 'style')
at openNav ((index):66)
at HTMLDivElement.onmouseover ((index):79)
Would anyone like to hazard a guess as to why this doesn't work?
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #96AD74;
background-color: #9C836E;
overflow-x: hidden;
transition: 0.5s;
padding-top: 30px;
letter-spacing: 1px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #E2FAC0;
display: block;
transition: 0.3s;
text-shadow: 1px 1px 0 #000;
}
.sidenav a:hover {
color: darkblue;
background: #808000;
background: #7E6EB5;
background: #FFAC1C;
text-shadow: none;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-shadow: none;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
<div id="mySidenav" class="sidenav" onmouseleave="closeNav();">
<div class="pcc">MENU</div>
home
coaching
biography
contact
</div>
If I understand correctly, you want to close the menu when the user touches anything outside of it on a phone.
Add the following to your JavaScript file:
document.addEventListener('click', function(e) {
var mySidenav = document.getElementById("mySidenav");
var openButton = document.getElementById("openButton");
if (mySidenav.style.width == "250px" && !mySidenav.contains(e.target) && e.target != openButton) {
closeNav();
}
});
This will make it so when you click (touch) on any element besides the open button, it will close the sidebar.
Also, don't forget to set the ID of the element opening the navbar to "openButton", for example in the W3School tutorial you linked, you should modify it like this:
<span id="openButton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
I am working on a HTML site, and I want to create a off-canvas menu for navigation.
However the code I've written won't work at all.
I have tried to re-write my script and the HTML/CSS document, I've also tried to make a local webbserver to host the html, css and the javascript tosee if that would change anything, but it didn't.
I have also tried to follow some coding guides on youtube and w3schools, but I can't get it to work. Please help me.
Thank you in advance!
<body>
<div id="main">
<div id="header">
<div id="hdt">
</div>
<div id="hdb">
<span style="cursor: pointer" onclick="openNav">
☰ Menu
</span>
<div id="mysidenav" class="sidenav">
×
Home
Parts
Services
About us
</div>
</div>
</div>
<div id="contain">
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("mysidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mysidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
</html>
CSS file:
#main {
width: 1500px;
height: 950px;
transition: margin-left .5s
}
#header {
width: 1500px;
height: 100px;
}
#hdt {
height: 75px;
background-color: white;
}
#hdb {
height: 25px;
background-color: limegreen;
border: 1px solid black;
transition: margin-left .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .exit {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#contain {
width: 1500px;
height: 700px;
}
#footer {
width: 1500px;
height: 150px;
background-color: black;
}
You forgot to include the opening <html> tag in your code. But I guess that's a copy & paste error ;)
To resolve your actual problem, simply change:
<span style="cursor: pointer" onclick="openNav">
☰ Menu
</span>
to:
<span style="cursor: pointer" onclick="openNav()">
☰ Menu
</span>
Here's a working fiddle:
https://jsfiddle.net/r71n6cs9/12/
<a id="mybutton" class="btn open-mod" href="#open-modal">👋 Basic CSS-Only Modal</a>
<div id="open-modal" class="modal-window">
<div>
Close
<h1>Voilà!</h1>
<div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
<div><small>Sponsor</small></div>
<a href="https://aminoeditor.com" target="_blank">👉 Amino: Live CSS Editor for Chrome</div>
</div>
</div>
I have a simple CSS based modal which i can to show on page load rather than when user click on the button on the link.
I tried few things but it's not working i use the link as well as a button to trigger the event but it doesn't work
$(window).load(function(){
// $(".open-mod").click();
$("#mybutton")[0].click()
});
$(document).ready(function(){
// $("#mybutton").trigger( "click" );
//$("#mybutton").click();
});
Not sure where i am doing it wrong...
https://codepen.io/anon/pen/ewZYwy
You haven't written a click function for your button.
$(document).ready(function(){
$("#mybutton").click();
});
$("#mybutton").on('click', function() {
$($(this).attr('href')).fadeToggle();
})
.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.25);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: none;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
background: #ffffff;
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
}
.modal-close:hover {
color: black;
}
/* Demo Styles */
html,
body {
height: 100%;
}
body {
font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-image: linear-gradient(to right, #7f53ac 0, #657ced 100%);
color: black;
}
a {
color: inherit;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 15px;
}
small {
color: #aaa;
}
.btn {
background-color: #fff;
padding: 1em 1.5em;
border-radius: 3px;
text-decoration: none;
}
.btn i {
padding-right: 0.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="mybutton" class="btn open-mod" href="#open-modal">👋 Basic CSS-Only Modal</a>
<div id="open-modal" class="modal-window">
<div>
Close
<h1>Voilà!</h1>
<div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
<div><small>Sponsor</small></div>
<a href="https://aminoeditor.com" target="_blank">👉 Amino: Live CSS Editor for Chrome</div>
</div>
</div>
just use
$(document).ready(function(){
$('#idofmodal').modal('show')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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 <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 <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 <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 <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 have implemented the following sidebar navigation into a simple admin. I've got it working and moved to the right side. I would like to have it appear and disappear using a single button rather than a separate close and open button. I tried modifying the JS with an onToggle function that if isOpen was null, it would open the panel and then set isOpen to true and then the next time it ran, it would delete isOpen. I'm very new at JS and this failed so I thought I'd ask here. How do I get this puppy appearing and disappearing with a single button?
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Thank you kindly.
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60px;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<script>
function openNav() {
var e = document.getElementById("mySidenav");
if (e.style.width == '250px')
{
e.style.width = '0px';
}
else
{
e.style.width = '250px';
}
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
This is the same code with little modifications in the openNav() method. For triggering the sideNavbar with a button, it needs to be visible before and after triggering the sideNavBar. So i have moved the view button to the top and i have modified the top property of sidenav to keep the trigger button visible even after activation
You can view this in action here: https://jsfiddle.net/ngohrvk1/
I know the question is tagged with JavaScript and you probably don't want to change the markup or add new elements. But if you could, here's a pure CSS solution that works.
body {
margin: 0;
}
.sidebar-toggle {
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding: 10px;
background: red;
color: white;
}
#sidebar-toggle-input {
display: none;
}
#sidebar-toggle-input+label:before {
content: "➡️";
}
#sidebar-toggle-input:checked + label:before {
content: "❌"
}
.sidebar {
position: fixed;
width: 200px;
transition: 0.3s;
background: blue;
height: 100vh;
top: 0;
left: 0;
transform: translateX(-100%);
}
#sidebar-toggle-input:checked ~ .sidebar {
transform: none;
}
<input type="checkbox" id="sidebar-toggle-input" />
<label class="sidebar-toggle" for="sidebar-toggle-input"></label>
<div class="sidebar"></div>
This code will help you out, I have created a function and saving data-isshown attribute on the element, to get whether the element is shown or not, we can decide this on the basis of the width as well but this is more generic approach
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
Whole code would look like this
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰ open</span>