Javascript/jQuery event handler isn't loading

Javascript/jQuery event handler isn't loading - javascript

I have a problem using jQuery where the blocks of code inside $(document).ready() won't load. I have looked into it and haven't been able to find a solution. I looked at it with the chrome "inspect element" tool thing in the Event Listeners tab there is nothing for the object that has an event linked to it.
I'm using brackets and Jslint gives me the error: "$ was used before it was defined" for the first line of code. Here is my HTML code and Js/jQuery code:
HTML
<head>
<script type="text/javascript" src="JS/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="JS/Java.js"></script>
<style>
#login{
display:;
font-size: 18;
left: 80%;
top: 28%;
}
#login:hover{
opacity: 0.4;
cursor: pointer;
}
#nav-icon{
width: 20px;
height: 15px;
position: relative;
top: 30%;
left: 90%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span{
display: block;
position: relative;
height: 1px;
width: 100%;
background: #ffffff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2) {
top: 6px;
}
#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon.open span:nth-child(1) {
top: 4.5px;
left: 100;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon.open span:nth-child(3) {
top: 3px;
left: 100;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menubar{
display:;
position: absolute;
top: 0;
height: 100%;
width: 15%;
left: 50%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 2;
font-family: main;
font-size: 20;
color: fff;
list-style: none;
line-height: 2;
}
</style>
</head>
<body>
<div id="HeaderContainer">
<div class=header id="login">
<li>Login</li>
</div>
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="menubar">
<li>Login</li>
<li>My Account</li>
<li>My Wishlist</li>
<li>My Orders</li>
</div>
</body>
Js/jQuery
$(document).ready(function () {
$('#nav-icon').click(function () {
$(this).toggleClass('open');
$('#menubar').animate({left: 'toggle'}, -30%);
$('#login').fadeToggle(fast);
});
});
The HTML and JS are in separate files and I know that both JS files are correctly linked to the HTML file. alert() placed on the first line before any other code works.
What I want to happen:
I want the hamburger menu (#nav-icon) to, when clicked, toggle the CSS class "open".
When I click it right now nothing happens.
Thanks in advance for any help you can offer!
PS: I'm new here so sorry if I messed anything up.

, -30% not appear to be valid duration at $('#menubar').animate({left: 'toggle'}, -30%); ?
$(document).ready(function () {
$('#nav-icon').click(function () {
$(this).toggleClass('open');
$('#menubar').animate({left: 'toggle'}, 1000);
$('#login').fadeToggle("fast");
});
});
#login {
display: ;
font-size: 18;
left: 80%;
top: 28%;
}
#login:hover {
opacity: 0.4;
cursor: pointer;
}
#nav-icon {
width: 20px;
height: 15px;
position: relative;
top: 30%;
left: 90%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: relative;
height: 1px;
width: 100%;
background: #ffffff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2) {
top: 6px;
}
#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon.open span:nth-child(1) {
top: 4.5px;
left: 100;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon.open span:nth-child(3) {
top: 3px;
left: 100;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menubar {
display: ;
position: absolute;
top: 0;
height: 100%;
width: 15%;
left: 50%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 2;
font-family: main;
font-size: 20;
color: fff;
list-style: none;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HeaderContainer">
<div class=header id="login">
<li>Login</li>
</div>
<div id="nav-icon">
<span>a</span>
<span>b</span>
<span>c</span>
</div>
</div>
<div id="menubar">
<li>Login</li>
<li>My Account</li>
<li>My Wishlist</li>
<li>My Orders</li>
</div>

this line is wrong.
$('#login').fadeToggle(fast);
there no such thing like fast in jQuery Correct way is something like this :
$('#login').fadeToggle('fast');
you have to use fast as string.

Related

Responsive menu not opening on IE 11

Why doesn't this JS code work in IE11? Burger menu does not open. Thought the problem was onclick, tried to do it via addEventListener, it still doesn't work.
//
I tried to use Babel, it didn't change anything, added only "use strict".
//
IE11 doesn't support toggle? It says here that the second argument is not supported only.
//
Can you tell me how to get the code to work?
document.querySelector(".animated-icon2").onclick = function (e) {
e.preventDefault();
this.classList.toggle("open");
document.querySelector(".sidebar-main").classList.toggle("show");
};
.sidebar-main{
display:none;
}
.sidebar-main.show{
display: block;
}
.mobile-menu{
position: absolute;
background-color: transparent;
border: none;
outline: 0;
top: 25px;
right: 50%;
display: block;
z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: #000;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
<header>
<button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
<div class="sidebar-main">
<h1>Header</h1>
</div>
</header>

The following JS code works for IE11.
The onclick event is executed for the button element in your HTML structure in IE11.
document.querySelector(".mobile-menu").onclick = function (e) {
e.preventDefault();
document.querySelector(".animated-icon2").classList.toggle("open");
document.querySelector(".sidebar-main").classList.toggle("show");
};
.sidebar-main{
display:none;
}
.sidebar-main.show{
display: block;
}
.mobile-menu{
position: absolute;
background-color: transparent;
border: none;
outline: 0;
top: 25px;
right: 50%;
display: block;
z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: #000;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
<header>
<button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
<div class="sidebar-main">
<h1>Header</h1>
</div>
</header>

This might work:
Add this to the top of the HTML file.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Your page may be forced to an IE compatibility mode for some reason, which makes it behave like an old version of IE. Adding the meta tag forces it back into IE11 mode.

How to close menu by clicking outside the div JavaScript/Jquery [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 5 years ago.
i'm actually searching how to close div when clicking outside, but i have no idea how to do it.
I have tried many things like using the attribute .removeClass with a boolean, add a removeEventListener or even with collapse but i didn't understand that one , but nothings worked for me... I'm really stucked.
Here's my code actually :
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function (e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function (e) {
hamburger.doToggle(e);
});
hamburger.nav.addEventListener('click', function (e) {
hamburger.doToggle(e);
});
}());
.nav2 {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #000000;
color: #ff4c4d;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 49vw;
z-index: 1;
opacity: 0.90;
z-index: 2;
}
.nav2.expanded { left: 0; }
.nav2 ul {
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
position: fixed;
top: 2rem;
width: 10vw;
z-index: 3;
}
.nav-toggle:hover { opacity: 0.8; }
.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #5080ff;
content: '';
height: 0.7vh;
width: 100%;
z-index: 4;
}
.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}
.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
background: #85faff;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
<ul class="link2">
<img src="./assets/img/bosewhite.png" class="bose-white">
<br>
<li><a class="link" href="#">Home</a></li><br>
<li><a class="link" href="#">Portfolio</a></li><br>
<li><a class="link" href="#">About</a></li><br>
<li><a class="link" href="#">Contact</a></li><br>
</ul>
</nav>

You can use bind to the click event on body and then check that the event path does not include the nav menu:
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
open: function (e) {
e.preventDefault();
this.navToggle.classList.add('expanded');
this.nav.classList.add('expanded');
},
close: function (e) {
e.preventDefault();
this.navToggle.classList.remove('expanded');
this.nav.classList.remove('expanded');
}
};
hamburger.navToggle.addEventListener('click', function (e) {
if (hamburger.nav.classList.contains('expanded')) {
hamburger.close(e);
} else {
hamburger.open(e);
}
});
hamburger.nav.addEventListener('click', function (e) {
hamburger.open(e);
});
document.addEventListener('click', function (e) {
if (e.path.indexOf(hamburger.navToggle) < 0 && e.path.indexOf(hamburger.nav) < 0) {
hamburger.close(e);
}
});
}());
.nav2 {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #000000;
color: #ff4c4d;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 49vw;
z-index: 1;
opacity: 0.90;
z-index: 2;
}
.nav2.expanded { left: 0; }
.nav2 ul {
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
position: fixed;
top: 2rem;
width: 10vw;
z-index: 3;
}
.nav-toggle:hover { opacity: 0.8; }
.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #5080ff;
content: '';
height: 0.7vh;
width: 100%;
z-index: 4;
}
.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}
.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
background: #85faff;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
<ul class="link2">
<img src="./assets/img/bosewhite.png" class="bose-white">
<br>
<li><a class="link" href="#">Home</a></li><br>
<li><a class="link" href="#">Portfolio</a></li><br>
<li><a class="link" href="#">About</a></li><br>
<li><a class="link" href="#">Contact</a></li><br>
</ul>
</nav>

Apply CSS animation class for many instance in one page

I try to make share button for social media with animated button in CSS. But I want some button to display in one page. For different content. But I found this didn't work for second button. If the second button is clicked, the first button that animated instead of second. My Question is how to make the CSS applied to every button in my page?
This is the fiddle :
https://jsfiddle.net/2s6w4hq7/
This is my HTML :
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
and this is the CSS :
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
.toggle {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
display: block;
cursor: pointer;
color: #fff;
background-color: #3D3D3D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
}
.toggle:hover {
background-color: #0a0a0a;
}
.toggle:after {
position: relative;
display: block;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
content: "\f1e0";
line-height: 50px;
font-size: 29px;
text-align: center;
left: -2px;
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
background-color: #fff;
content: "";
height: 3px;
width: 30px;
position: absolute;
left: 10px;
top: 23px;
}
.toggle-input:checked + .toggle:after {
-webkit-animation: bar1 0.3s forwards;
animation: bar1 0.3s forwards;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
-webkit-animation: bar2 0.3s forwards;
animation: bar2 0.3s forwards;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.network-list li {
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
list-style-type: none;
opacity: 0;
}
.network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.network-list .facebook {
left: 50px;
top: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.3s;
transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.15s;
transition: all 0.15s ease 0.15s;
}
.network-list a {
color: #fff;
position: relative;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-indent: 120%;
text-decoration: none;
}
.network-list a:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
font-size: 26px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 50px;
text-indent: 0;
}
.network-list .twitter a {
background-color: #00C3F3;
border-radius: 50%;
}
.network-list .twitter a:before {
content: "\f099";
}
.network-list .twitter a:hover:before {
box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
background-color: #2C609B;
border-radius: 50%;
}
.network-list .facebook a:before {
content: "\f09a";
}
.network-list .facebook a:hover:before {
box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
background-color: #EC3F25;
border-radius: 50%;
}
.network-list .googleplus a:before {
content: "\f0d5";
}
.network-list .googleplus a:hover:before {
box-shadow: inset 0 0 0 2px #EC3F25;
}
input:checked ~ .network-list li {
opacity: 1;
top: 0;
}
input:checked ~ .network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.4s;
transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
left: 50px;
top: 0;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.6s;
transition: all 0.25s ease 0.6s;
}
#-webkit-keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#-webkit-keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
#keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}

You need to use different id for each button and match the <label>'s for attribute to that same id:
For example:
https://jsfiddle.net/2s6w4hq7/1/
<input class="toggle-input" id="toggle-input-1" type="checkbox" />
<label for="toggle-input-1" class="toggle"></label>
<input class="toggle-input" id="toggle-input-2" type="checkbox" />
<label for="toggle-input-2" class="toggle"></label>

this is simple. you just change your id name of the input and call same name in label.
ie.
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
change your code with above code.

You just need to define different ID's for Checkbox and label under div of class share-button.
Please refer below code:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>

overlay issue with menu

I'm having the issue with the overlay of a menu, when I open the menu the content in the background is still visible, i have tried playing with the z-index but it doesn't help.
The paragraph is seen in light gray when you open the menu .
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: -2;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

If you want to have different colors per paragraph, I suggest you to use a pseudo-element inside your .overlay element. You'll be able to colorize it, and it will hide your content:
.overlay {
position: relative;
...
}
.overlay.is-visible:after {
content: '';
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Whole snippet:
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
position: relative;
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible:after {
content: '';
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

Below code is working for your.
$("#menu").click(function () {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
z-index:2
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
position:absolute;
top:0px;
}
.overlay-2 {
width: 100%;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: 1;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="overlay-2">Hello, <br> this is the para that is still visible when you open the menu</div>
<div class="overlay"></div>
Or
You want single div with .overlay then write below line in css.
.overlay.is-visible {
color:transparent;
}

In the js code:
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(".overlay p").toggle('display');
$(this).toggleClass('open');
});
And in the html add p tag to content :
<div class="overlay"><p>Hello, <br> this is the para that is still visible when you open the menu</p></div>

How to scale a div on clicking a button

Code:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
});
});
.ham-layer {
height: 50px;
width: 50px;
background: #fff;
margin: 0px;
top: 0;
left: 0;
position: fixed;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0;
}
#nav-icon {
position: fixed;
left: 35px;
top: 0px;
width: 32px;
height: 20px;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span {
background: #111111;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 1px;
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 2px;
}
#nav-icon.open .ham-layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
opacity: 1;
}
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="ham-layer"></div>
<!-- <i class="fa fa-bars hamburger"></i> -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
<p id="_intro" class="text-center"></p>
<hr width=40%>
<p id="belowIntro" class="text-center"></p>
</div>
</div>
</div>
</section>
I wanted to make it so that when the hamburger icon is clicked, the layer scales itself up thus showing the menu. But the scaling part is not happening. What should I do so that this happens? Right now the hamburger icon is animating but the circular div isn't expanding.

It is because your .ham-layer is not inside of your #nav-icon. Your last CSS selector #nav-icon.open .ham-layer implies that .ham-layer is somewhere inside of your #nav-icon div.

We Keep Coding

JavaScript is the programming language of the Web.

Javascript/jQuery event handler isn't loading - javascript

this line is wrong. $('#login').fadeToggle(fast); there no such thing like fast in jQuery Correct way is something like this : $('#login').fadeToggle('fast'); you have to use fast as string.

Related

Responsive menu not opening on IE 11

How to close menu by clicking outside the div JavaScript/Jquery [duplicate]

Apply CSS animation class for many instance in one page

overlay issue with menu

How to scale a div on clicking a button

Categories

Resources