How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section - javascript

Description/Approach
I'm trying to merge the two pens:
https://codepen.io/ramsaylanier/pen/xcdiq?q=section&limit=all&type=type-pens
and
https://codepen.io/jasonpaul/pen/NxjvjW?q=collapse&order=popularity&depth=everything&show_forks=false
Ideally, I would like to make the four sections appear in a quadrant-like form (two sections in the first row and two sections in the bottom row). Each section should have a collapsable listbox. When the user clicks on the listbox the section shouldn't expand as well. Clicks in the listbox and in the section should be independent.
Regarding the clicks I think I have to tell the toggleClass to ignore clicks on .collapsible. Not sure how.
$('.section').on('click', function(){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").collapsible({accordion: false});
Code
https://codepen.io/szeconku/pen/oqBPvO
I need to figure out how to make clicks in the listbox independent of the clicks in the section and how to add a second row. Any help is appreciated.

Codepen updated : https://codepen.io/anon/pen/oqBrbq
$('.section').on('click', function(e){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").click(function(e){
e.stopPropagation();
});
.section {
background-size: cover;
position: absolute;
height: calc( 50% - 2px);
width: 50vw;
overflow: hidden;
/*#include skew(-10deg, 0deg);*/
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
border-left: 2px solid white;
border-right: 2px solid white;
cursor: pointer;
}
.section::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-color: #3498DB;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.section::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -15%;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
width: 130%;
height: 100%;
opacity: 0.3;
z-index: -1;
-moz-transform: skew(10deg, 0deg);
-ms-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg);
transform: skew(10deg, 0deg);
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
overflow: hidden;
}
.section:hover {
width: 47%;
z-index: 30;
}
.section:hover::after {
background-size: 50%;
}
.section:hover:last-of-type {
left: 53%;
}
.section.expanded {
width: 100% !important;
left: 0px;
height: 100%;
z-index: 100;
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
}
.section.expanded::after {
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
background-size: 50%;
background-position: left;
}
.section.expanded:hover:last-of-type {
left: 0px;
}
.section.expanded:hover::after {
background-size: 50%;
background-position: left;
}
.section-1 {
left: 0;
top: 0;
}
.section-1::before {
background-color: #1DB45D;
}
.section-2 {
left: 50%;
top: 0;
}
.section-2::before {
background-color: #3498DB;
}
.section-3 {
left: 0;
bottom: 0;
}
.section-3::before {
background-color: #9B59B6;
}
.section-4 {
left: 50%;
bottom: 0;
}
.section-4::before {
background-color: #F06D3A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="section-1 section">
<h1>Title 1</h1>
<div class="container">
<ul class="collapsible" data-collapsible="expandable">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Bullet 1</div>
<div class="collapsible-body">
<p>Bullet 1 text</div>
</ul>
</div>
</section>
<section class="section-2 section">
<h1>Title 2</h1>
</section>
<section class="section-3 section">
<h1>Title 3</h1>
</section>
<section class="section-4 section">
<h1>Title 4</h1>
</section>
</div>

Related

How to condition styling child by hover on parent only?

In the code below when I hover on the gray button [the parent]
it perform some style on the child div bar
and that is what I need, I don't want child to be hovered itself
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?
Would this fix your issue?
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .baz:not(:hover) .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript, so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
This works because the events mouseover and mouseout events are explicitly added to foo, rather than to its grandchild bar (and bar never visibly overlaps foo).
Working Example:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.foo.hovered .bar {
transform: scaleX(1);
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

Automatically close menu after link is clicked

At the moment, my navigation bar houses links to sections on the one page and doesn't have any links to other pages. When a link is clicked it automatically goes to the corresponding div on that page however, part of the target div is covered by the navigation bar which remains open until the close button is clicked.
My question is, is there a way to force the header to close once a link has been clicked?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});

add this jquery function in your js file :
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
here is snippet for understanding:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>

How to get text to animate to look as if it is going under another layer

For a comparable example, view this site. If you look on the left side, you will see rotated text that loops through different lines of text. This is what I am trying to accomplish. The text in this example starts by the white line and then once it starts moving up, it looks as if it goes under a layer to make it seem like it is going out of place.
How could I modify my code to handle this?
Right now the white line and the text do not appear in line and I cannot figure out how I can make it look like the text is moving under another layer.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr {
visibility: visible;
-webkit-animation-name: dgAgnCurr;
animation-name: dgAgnCurr
}
.digitalAgency .agencyText.next {
visibility: hidden;
-webkit-animation-name: dgAgnNext;
animation-name: dgAgnNext
}
#-webkit-keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#-webkit-keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

Get rid of the CSS animations and use a simple transition. No need to overcomplicate things. You're simply going from translate -100% to 0% to 100% so you don't really need animation keyframes.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
transition:.45s ease-in-out; /* added this */
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
transform: translateY(-100%); /* added this */
}
.digitalAgency .agencyText.curr {
visibility: visible;
transform: translateY(0%); /* added this */
}
.digitalAgency .agencyText.next {
visibility: hidden;
transform: translateY(100%); /* added this */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

prevent effect hover from occurring until previous effect has completed

Currently if I hover over an element it displays the animation I am looking for, and hides the other elements on the page.
The issue I am facing is that if I hover over many of the divs quickly it queues, and hides the divs one after an other. I want to just allow one div to be hidden when hovered on, and when all animations are complete allow the functionality work again.
See jsfiddle here
If you hover quickly over the divs you will see that they appear/disappear and this keeps repeating. I want more control over this, and to only allow the effect to happen again, once the animation is complete.
Please also see code below for convenience.
I tried adding
if(!$(".wrapper").is(":animated")){....
but unfortunately this didn't work.
html
<div class="box-1">
<div class="wrapper">
<div class="background-out label-1 label"></div>
<div class="background-over label-1 label"></div>
<div class="background-info">
<div class="text">Bla bla bla.</div>
</div>
</div>
</div>
<div class="box-2">
<div class="wrapper">
<div class="background-out label-2 label"></div>
<div class="background-over label-2 label"></div>
<div class="background-info">
<div class="text">Bla bla bla</div>
</div>
</div>
</div>
css
.box-1 {
position: absolute;
top: 40%;
left: 40%;
}
.box-2 {
position: absolute;
top: 10%;
left: 40%;
}
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-out,
.background-over,
.background-info {
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}
.background-info {
position: absolute;
left: 100px;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: #f8f8f8;
}
.background-info .text {
font-size: 12px;
letter-spacing: 1px;
text-align: center;
width: 80%;
margin-left: 10%;
margin-top: 5px;
}
.background-out {
transition-timing-function: linear;
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transition: opacity 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
opacity: 1;
}
.background-over {
background-color: transparent;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.label-1 {
background: yellow;
}
.label-2 {
background: pink;
;
}
.label {
animation-duration: 1s;
animation-name: slidein;
}
JS
$('.wrapper').hover(function() {
$('.wrapper').not(this).fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).fadeIn('slow');
});

You need to use the jQuery .stop() method to prevent the animations queuing.
https://jsfiddle.net/po34gv6v/11/
$('.wrapper').hover(function() {
$('.wrapper').not(this).stop().fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).stop().fadeIn('slow');
});
see: https://api.jquery.com/stop/

Why are the CSS transforms not displayed?

I'm trying to make a navigation panel slide in on the click of a nav button in the main menu. Needless to say, it's not working. I've made this work before, so I'm not sure what's going on. Help?
HTML
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i class="account-control fa fa-user"></i>
</div>
<div class="wrapper">
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li>Billing</li>
<li>Support</li>
<li>Servers</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</nav>
</div>
<!-- Copyright -->
<footer>
<form action="" class="search">
<input type="search" name="search" placeholder="Search">
</form>
<p class="copyright">asdf</p>
</footer>
</div>
</div>
Relevant CSS
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
top: 100px;
z-index: 0;
overflow: hidden;
}
#content {
position: relative;
left: 0;
z-index: 5;
height: 100%;
overflow: auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.sidebar-open #content {
-webkit-transform: translate(200px, 0);
-moz-transform: translate(200px, 0);
transform: translate(200px, 0);
}
/* Header */
.header {
background-color: #222222;
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index: 1;
}
#nav-button {
font-size: 24px;
color: white;
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav-button.open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.account-control {
font-size: 24px;
color: white;
position: absolute;
right: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Navigation */
#sidebar {
position: absolute;
top: 100px;
left: 0;
visibility: hidden;
width: 200px;
height: 100%;
background: #222222;
opacity: 1;
z-index: 1;
-webkit-transform: all 0.5s;
-moz-transform: all 0.5s;
transform: all 0.5s;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sidebar-open #sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
#sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sidebar-open #sidebar:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-moz-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-items {
max-height: 100%;
position: relative;
overflow: auto;
bottom: 60px;
}
.mainmenu ul {
margin: 0;
}
.mainmenu ul li a {
padding: 0 40px;
width: 100%;
line-height: 60px;
display: inline-block;
color: #202020;
text-decoration: none;
}
.mainmenu ul li a :hover, .mainmenu ul li a .active {
background: #e1e1e1;
}
JavaScript
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Yes, I am using FontAwesome. :)

Your biggest issue that solves your original question is due to overflow: hidden; on .wrapper.
Here it is removed: DEMO. But that opens up a whole new world of problems. I advise you to go back and refactor your code.

Have you tried to empty your cache?
Ctrl-Shift-Del so your browser will reload your css.
Note: If this happens to your users, try changing the link to your css in your header like this:
<link rel="stylesheet" href="css/main.css?v=2">

Develop Reference

JavaScript is the programming language of the Web.

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section - javascript

Related

How to condition styling child by hover on parent only?

Automatically close menu after link is clicked

How to get text to animate to look as if it is going under another layer

prevent effect hover from occurring until previous effect has completed

Why are the CSS transforms not displayed?

Categories

Resources