How can i improve my javascript? codepen included

How can i improve my javascript? codepen included - javascript

I am using this code pen on my website for a menu button in mobile view: http://codepen.io/anon/pen/LNNaYp
Sometimes the button breaks when it is spam clicked ie. the 'X' state would appear when the menu is closed.
Anyway i want to know how i could improve my javascript because i know i could do it using jQuery, i've tried but failed.
HTML
<body>
<div class="showcase"><button type="button" role="button" aria-label="Toggle Navigation" id="buttonOne" class="lines-button x2">
<span class="lines"></span>
</button>
</div>
</body>
CSS
body {
background-color: #5DC1AF;
}
.showcase {
margin-top: 40px;
text-align: center;
}
.lines-button {
padding: 2rem 1rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.57143rem;
}
/*.lines-button:hover {
opacity: 1;
}*/
.lines-button:active {
transition: 0;
}
.lines {
display: inline-block;
width: 4rem;
height: 0.37143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: relative;
}
.lines:before,
.lines:after {
display: inline-block;
width: 4rem;
height: 0.37143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.28571rem center;
transform-origin: 0.28571rem center;
}
.lines:before {
top: 1rem;
}
.lines:after {
top: -1rem;
}
/*.lines-button:hover .lines:before {
top: 1.14286rem;
}
.lines-button:hover .lines:after {
top: -1.14286rem;
}*/
.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
button {
display: inline-block;
margin: 0 1em;
border: none;
background: none;
}
button span {
display: block;
}
.lines-button.x2 .lines {
transition: background 0.3s 0.5s ease;
}
.lines-button.x2 .lines:before,
.lines-button.x2 .lines:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease;
transition: top 0.3s 0.6s ease, transform 0.3s ease;
}
.lines-button.x2.close .lines {
transition: background 0.3s 0s ease;
background: transparent;
}
.lines-button.x2.close .lines:before,
.lines-button.x2.close .lines:after {
transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease;
transition: top 0.3s ease, transform 0.3s 0.5s ease;
top: 0;
width: 4rem;
}
.lines-button.x2.close .lines:before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x2.close .lines:after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
button:focus {
outline: none !important;
}
JS
var anchor = document.querySelectorAll('button');
[].forEach.call(anchor, function(anchor) {
var open = false;
anchor.onclick = function(event) {
event.preventDefault();
if (!open) {
this.classList.add('close');
open = true;
} else {
this.classList.remove('close');
open = false;
}
}
});

View in JSFiddle
Use following jQuery code
$(document).ready(function() {
$("button").click(function() {
$(this).toggleClass("close");
});
});

Related

Checkbox functioning, but not animating

I am using a dark mode toggle in the header navigation and mobile menu of my site.
Both are functioning as they should, except only 1 animates the toggle on/off as it clicked. I would also like the text beside the toggles to switch from "Dark" to "Light" as it is clicked. Any help would be appreciated.
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
}
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
/********** DARK THEME TOGGLE START **********/
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
}
[data-theme="dark"] .theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
color: #F8F0E3;
}
.theme-switch {
display: inline-block;
height: 18px;
position: relative;
width: 30px;
margin-top: -4px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider:before {
background-color: #000;
bottom: 1px;
content: "";
height: 12px;
left: 2px;
position: absolute;
transition: .4s;
width: 12px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider.round {
border-radius: 34px;
border: 2px solid #000;
}
.slider.round:before {
border-radius: 50%;
}
.header__toggle {
position: absolute;
top: 7px;
right: 20px;
}
#media screen and (max-width: 768px) {
.header__toggle {
position: absolute;
top: 0px;
right: 10px;
}
}
.is-light .site-toggle__link{
color:#fff!important;
}
[data-theme="dark"] .is-light .site-toggle__link{
color:#F8F0E3!important;
}
[data-theme="dark"] .site-toggle__link{
color: #000!important;
color:var(--colorNavText)
}
/********** DARK THEME TOGGLE END **********/
/********** DARK THEME MOBILE TOGGLE START **********/
.theme-switch-mobile-wrapper {
display: flex;
align-items: center;
}
.theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #ffffff;
letter-spacing: 3px;
}
[data-theme=dark] .theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #f8f0e3;
letter-spacing: 3px;
}
.theme-switch-mobile {
display: inline-block;
height: 21px;
position: relative;
width: 33px;
margin-top: -4px;
}
.theme-switch-mobile input {
display:none;
}
.slider-mobile {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider-mobile:before {
background-color: #000;
bottom: 1px;
content: "";
height: 15px;
left: 2px;
position: absolute;
transition: .4s;
width: 15px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider-mobile {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider-mobile:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider-mobile.round-mobile {
border-radius: 34px;
border: 2px solid #000;
}
.slider-mobile.round-mobile:before {
border-radius: 50%;
}
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}
#media screen and (max-width: 768px) {
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}
}
/********** DARK THEME MOBILE TOGGLE END **********/
<div class="theme-switch-wrapper header__toggle site-toggle__link">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p>DARK</p>
</div>
<div class="theme-switch-mobile-wrapper mobile__toggle">
<label class="theme-switch-mobile" for="checkbox">
<input type="checkbox" id="checkbox2" />
<div class="slider-mobile round-mobile"></div>
</label>
<p>DARK</p>
</div>

You can use Vataliy's Answer, but this just change animation of one toggle. My answer change both toggle animation but no have much differences.
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
const toggles = document.querySelectorAll('#checkbox2, #checkbox');
toggleSwitch.addEventListener('change', switchTheme, false);
function switchTheme(e) {
console.log(toggles);
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
toggles.forEach((toggle) => {
toggle.checked = true;
});
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
toggles.forEach((toggle) => {
toggle.checked = false;
});
}
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
https://codepen.io/naxsi-the-bashful/pen/NWvNMQv?editors=1111
access codepen cause localStorage operations can't be running on SO snippets –

You have mistakes in js and html.
In label <label class="theme-switch-mobile" for="checkbox2" <input type="checkbox" id="checkbox2"/> </label>
const toggleSwitch = document.querySelectorAll('.theme-switch input, .theme-switch-mobile input'); instead of const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
querySelectorAll instead of querySelector
then
toggleSwitch.forEach(e => { e.addEventListener('change', switchTheme, false) } );
const toggleSwitch = document.querySelectorAll('.theme-switch input, .theme-switch-mobile input');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.forEach(e => {
e.addEventListener('change', switchTheme, false)
}
);
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
//localStorage.setItem('theme', 'dark'); //add this
}
else {
document.documentElement.setAttribute('data-theme', 'light');
//localStorage.setItem('theme', 'light'); //add this
}
}
//const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
const currentTheme = null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
/********** DARK THEME TOGGLE START **********/
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
}
[data-theme="dark"] .theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
color: #F8F0E3;
}
.theme-switch {
display: inline-block;
height: 18px;
position: relative;
width: 30px;
margin-top: -4px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider:before {
background-color: #000;
bottom: 1px;
content: "";
height: 12px;
left: 2px;
position: absolute;
transition: .4s;
width: 12px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider.round {
border-radius: 34px;
border: 2px solid #000;
}
.slider.round:before {
border-radius: 50%;
}
.header__toggle {
position: absolute;
top: 7px;
right: 20px;
}
#media screen and (max-width: 768px) {
.header__toggle {
position: absolute;
top: 0px;
right: 10px;
}
}
.is-light .site-toggle__link{
color:#fff!important;
}
[data-theme="dark"] .is-light .site-toggle__link{
color:#F8F0E3!important;
}
[data-theme="dark"] .site-toggle__link{
color: #000!important;
color:var(--colorNavText)
}
/********** DARK THEME TOGGLE END **********/
/********** DARK THEME MOBILE TOGGLE START **********/
.theme-switch-mobile-wrapper {
display: flex;
align-items: center;
}
.theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #ffffff;
letter-spacing: 3px;
}
[data-theme=dark] .theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #f8f0e3;
letter-spacing: 3px;
}
.theme-switch-mobile {
display: inline-block;
height: 21px;
position: relative;
width: 33px;
margin-top: -4px;
}
.theme-switch-mobile input {
display:none;
}
.slider-mobile {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider-mobile:before {
background-color: #000;
bottom: 1px;
content: "";
height: 15px;
left: 2px;
position: absolute;
transition: .4s;
width: 15px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider-mobile {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider-mobile:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider-mobile.round-mobile {
border-radius: 34px;
border: 2px solid #000;
}
.slider-mobile.round-mobile:before {
border-radius: 50%;
}
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}
#media screen and (max-width: 768px) {
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}
}
/********** DARK THEME MOBILE TOGGLE END **********/
<div class="theme-switch-wrapper header__toggle site-toggle__link">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p>DARK</p>
</div>
<div class="theme-switch-mobile-wrapper mobile__toggle">
<label class="theme-switch-mobile" for="checkbox2">
<input type="checkbox" id="checkbox2" />
<div class="slider-mobile round-mobile"></div>
</label>
<p>DARK</p>
</div>

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>

Adding another nav item using javascript and css

I have created a burger menu, and copied this code https://codepen.io/woodwoerk/pen/BoEGYZ?q=burger+menu&limit=all&type=type-pens. However in this example there is three items in the drop down menu and in my website I have four. I tried adding another item to the drop down and changing the css and js however now I have a blank space where the new item has been added.
Here is what the menu looks like in the browser
Not sure how I can fix this to show all four items in the drop down. Below is the code I have
var Menu = {
el: {
menu: $('.menu'),
menuTop: $('.menu-top'),
menuSecond: $('.menu-second'),
menuClose: $('.menu-close'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom'),
menuText: $('.menu-text')
},
init: function() {
Menu.bindUIactions();
},
bindUIactions: function() {
Menu.el.menu.on('click', function(event) {
Menu.activateMenu(event);
event.preventDefault();
});
},
activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-expand expand');
Menu.el.menuSecond.toggleClass('menu-second-expand expand');
Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
Menu.el.menuBottom.toggleClass('menu-bottom-expand expand');
Menu.el.menuText.toggleClass('menu-text-expand');
Menu.el.menuClose.toggleClass('menu-close-visible');
}
};
//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
e.stopPropagation();
});
Menu.init();
span {
display: inline-block;
vertical-align: middle;
color: white;
}
ul {
display: block;
list-style-type: none;
text-align: right;
}
a {
color: #FFF;
}
a:hover {
opacity: 0.7;
}
.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float:right;
}
.menu-close {
font-size: 0em;
opacity: 0;
text-align: center;
font-weight: bold;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-close-visible {
font-size: 2em;
opacity: 1;
-webkit-transition: 0.2s 0.4s;
transition: 0.2s 0.4s;
}
.menu-global {
z-index: -1;
position: absolute;
left: 0;
height: 10px;
width: 100%;
background-color: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-global:hover {
left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.menu-top {
top: 0;
}
.menu-second {
top: 18px;
}
.menu-middle {
top: 36px;
}
.menu-bottom {
top: 54px;
}
.menu-text{
opacity: 0;
font-size: 0em;
padding: 10px 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.expand {
box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu-top-expand {
top: 50px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.3s, left 0.1s;
transition: all 0.5s 0.3s, left 0.1s;
}
.menu-second-expand {
top: 100px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.2s, left 0.1s;
transition: all 0.5s 0.2s, left 0.1s;
}
.menu-middle-expand {
top: 150px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 200px;
height: 150px;
background: #FFE082;
-webkit-transition: all 0.5s, left 0.1s;
transition: all 0.5s, left 0.1s;
}
.menu-text-expand{
color: #000000;
opacity: 0.8;
padding: 10px;
font-size: 1.3em;
-webkit-transition: all 0.2s 0.7s, font-size 0.1s;
transition: all 0.2s 0.7s, font-size 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-second"><span class="menu-text">View Holiday Gallery</span></li>
<li class="menu-global menu-middle"><span class="menu-text">View Itinerary</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">Settings</span></li>
</ul>

If you are adding another menu element you need to make sure you add all the proper required additions in your code. From hacking through it i got this:
First add the item in the html, and refer to it as bottom2 from now on:
<li class="menu-global menu-bottom2"><span class="menu-text">My ExtraElement</span></li>
notice the class is now unique: menu-bottom2. That is so the the margin from top would be properly aggregated to display it below the first .menu-bottom element.
now for the css add this:
.menu-bottom2 {
top: 54px;
}
and this:
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
and finally the javascript:
in the menu.el:
menuBottom2: $('.menu-bottom2'),
in the menu.activateMenu:
Menu.el.menuBottom2.toggleClass('menu-bottom2-expand expand');
and here is the full codepen:
https://codepen.io/anon/pen/vdKYxb

CSS Background-image not displaying on squarepace website

so my background image won't display properly on my Squarespace website mydietgoal(dot)com/legalities
It only holds the black background color I set but nothing more. The code i've tested, when plugged into codepen works perfectly but not when i plug it into my site.
The javascript works perfectly fine on both. But in the CSS area where i plug my image links, they don't appear.
(The rest of the code is repeated for the next 2 div containers, if it could be solved with just the first that'd be great)
Thank you so much,
Chris
Codepen: i.imgur.com/M8Jwoy6.png?1
My site: mydietgoal(dot)com/legalities
<style>
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: 80px 70px;
}
.cont__inner {
position: relative;
height: 100%;
}
.cont__inner:hover .el__bg:after {
opacity: 1;
}
.el {
position: absolute;
left: 0;
top: 0;
width: 19.2%;
height: 100%;
background: #252525;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
will-change: transform, width, opacity;
}
.el:not(.s--active) {
cursor: pointer;
}
.el__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.el__inner {
overflow: hidden;
position: relative;
height: 100%;
transition: transform 1s;
}
.cont.s--inactive .el__inner {
transform: translate3d(0, 100%, 0);
}
.el__bg {
position: relative;
width: calc(100vw - 140px);
height: 100%;
transition: transform 0.6s 0.7s;
will-change: transform;
}
.el__bg:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
transition: transform 1s;
transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
transform: translate3d(0, -100%, 0) scale(1.2);
}
.el.s--active .el__bg:before {
transition: transform 0.8s;
}
.el__bg:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.5s;
}
.cont.s--el-active .el__bg:after {
transition: opacity 0.5s 1.4s;
opacity: 1 !important;
}
.el__preview-cont {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: ease-in-out 0.3s;
}
.cont.s--inactive .el__preview-cont {
opacity: 0;
transform: translateY(10px);
}
.cont.s--el-active .el__preview-cont {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
.el__heading {
color: #ffffff;
text-transform: uppercase;
font-size: 18px;
}
.el__preview-cont:hover {
opacity: 0;
}
.el__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.1s;
}
.el.s--active .el__content {
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: all 0.5s 1.4s;
}
.el__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
.el__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
transition: all 0s 0.45s;
cursor: pointer;
}
.el.s--active .el__close-btn {
z-index: 5;
opacity: 1;
pointer-events: auto;
transition: all 0s 1.4s;
}
.el__close-btn:before,
.el__close-btn:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
transition: opacity 0s;
}
.el.s--active .el__close-btn:before,
.el.s--active .el__close-btn:after {
opacity: 1;
}
.el__close-btn:before {
transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(-45deg) translateX(0);
}
.el__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 4vw;
text-color: #f57200;
line-height: 0.85;
font-weight: bold;
transition: transform 0.5s, opacity 0.3s 1.4s;
transform: translate3d(0, 1vw, 0);
}
.el:hover .el__index {
transform: translate3d(0, 0, 0);
}
.cont.s--el-active .el__index {
transition: transform 0.5s, opacity 0.3s;
opacity: 0;
}
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back,
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back {
color: #2f3840;
opacity: 0;
transition: opacity 0.25s 0.25s;
}
.el:hover .el__index-back {
transition: opacity 0.25s;
opacity: 0;
}
.el__index-overlay {
overflow: hidden;
position: relative;
transform: translate3d(0, 100%, 0);
transition: transform 0.3s 0.1s;
color: transparent;
}
.el__index-overlay:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #f57200;
transform: translate3d(0, -100%, 0);
transition: transform 0.3s 0.1s;
}
.el:hover .el__index-overlay {
transform: translate3d(0, 0, 0);
}
.el:hover .el__index-overlay:before {
transform: translate3d(0, 0, 0);
}
.el:nth-child(1) {
transform: translate3d(0%, 0, 0);
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
transform: scale(0.5) translate3d(0%, 0, 0);
transition: transform 0.95s, opacity 0.95s;
}
.el:nth-child(1) .el__inner {
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
transform: translate3d(0%, 0, 0);
}
.el:nth-child(1) .el__bg:before {
transition-delay: 0s;
background-image: url("https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59d53a662278e77f4c59a518/1507146344134/background-security-my-diet-goal-privacy-policy-hd.jpg");
}
</style>

Tumblr style UserHoverCard

Hi everyone i have one problem with ajax hover. I am trying to make a userHoverCard like tumblr. But the hover animation not working when i use it with ajax.
This is working DEMO without ajax only css. In this demo you can see when you hover image then .p-tooltip will open with animation effect.
But if you click this DEMO from my test page then you can see when you hover an image then .p-tooltip will not open with animation effect.
HTML
<div class="p-tooltip"></div>
<div class="summary" data-id="25">
</div>
<div class="summary" data-id="20">
</div>
<div class="summary" data-id="25">
</div>
This is my ajax code:
$(document).ready(function() {
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from get_profile.php
$.ajax({
url: 'get_profile.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide().fadeIn('fast');
}
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
setTimeout(function(){
hideProfileTooltip();
},2000);
});
});
And here is CSS code:
.summary {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.profile-ava {
width: 50px;
height: 50px;
background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
border-radius: 3px;
background-size: 50px 50px;
display: block;
}
.summary a:hover:before {
content: '';
position: absolute;
display: block;
bottom: -10px;
left: 0;
height: 10px;
width: 100%;
z-index: 2;
}
.p-tooltip {
position: absolute;
margin-top: 10px;
top: 100%;
left: 50%;
margin-left: -140px;
width: 280px;
max-height: 120px;
border-radius: 5px;
overflow: hidden;
background-color: #F0F0F0;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.profile-header {
height: 120px;
background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
background-size: auto 120px;
background-position: 50%;
}
.profile-navigation {
position: absolute;
top: 0;
left: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.profile-nick {
color: #fff;
margin: 0;
padding: 0.4em 0;
font-size: 0.8em;
font-weight: bold;
}
.profile-action {
float: right;
background-color: #eee;
padding: 0.4em;
border-radius: 2px;
color: inherit;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
}
.p-tooltip .profile-ava {
margin: -40px auto 0;
width: 80px;
height: 80px;
background-size: 80px;
border: 3px solid #F0F0F0;
border-radius: 5px;
}
.profile-info {
text-align: center;
padding: 10px;
opacity: 0;
}
.profile-title {font-size: 1.6em; margin: 0;}
.profile-description {
margin: 0;
font-size: 0.8em;
}
.profile-items {margin: 0px; padding: 10px;}
.profile-items:after {
content: '';
display: table;
clear: both;
}
.profile-items li {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
float: left;
display: block;
border-radius: 3px;
}
.profile-items li:not(:first-child) {margin-left: 10px;}
.profile-items li:nth-child(1) {
background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}
.profile-header {
-webkit-transform: translate(0, -50px);
-moz-transform: translate(0, -50px);
transform: translate(0, -50px);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-info {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
-webkit-transform: scale(0.5) translate(0, -10px);
-moz-transform: scale(0.5) translate(0, -10px);
transform: scale(0.5) translate(0, -10px);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-items li {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0;
}
.profile-items li:nth-child(2) {
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.summary:hover .p-tooltip {
visibility: visible;
opacity: 1;
max-height: 600px;
}
.summary:hover .profile-header,
.summary:hover .profile-info,
.summary:hover .p-tooltip .profile-ava,
.summary:hover .profile-items li {
-webkit-transform: translate(0,0) scale(1);
-moz-transform: translate(0,0) scale(1);
transform: translate(0,0) scale(1);
opacity: 1;
}
Anyone can help me please!

Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.
FIDDLE
.summary {
margin: -50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 0;
}
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 1;
}
.loaded .summary-mask {
z-index: -1;
}
HTML
<div class="the-container">
<div class="summary-mask"></div>
<div class="summary" data-id="100">
<div class="user-container"></div>
</div>
</div>
JS
var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> Follow <p class="profile-nick"> Page Name </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
success: function (returnHtml) {
e.find('.user-container').html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});

When you are showing the card, it only contains the loading message. When the content arrives and you put it in the card, that isn't a CSS change, so the transition isn't activated.
If you wait until the content has arrives to show the card, there is something to animate.

We Keep Coding

JavaScript is the programming language of the Web.

How can i improve my javascript? codepen included - javascript

View in JSFiddle Use following jQuery code $(document).ready(function() { $("button").click(function() { $(this).toggleClass("close"); }); });

Related

Checkbox functioning, but not animating

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

Adding another nav item using javascript and css

CSS Background-image not displaying on squarepace website

Tumblr style UserHoverCard

Categories

Resources