REACT - Child position with respect of scale of parent

REACT - Child position with respect of scale of parent - javascript

I have a situation, where I have a parent div in which there can be any number of children divs, now I am applying scale on the parent div, so since the scale is applied on parent it looks that the child element is displacing from its position, I want the children divs to follow parent scale how to manage this situation, here are some portion of my code..
<div className="image-viewer">
<div className="image-wrapper">
<div class="zoom-2 image-outer">
<img class="map-image" src="map.png"/>
<div class="booth" style="left: 617px; top: 178px;"> </div>
<div class="booth" style="left: 735px; top: 160px;"> </div>
</div>
</div>
</div>
In the above code the child elements have there left and top defined dynamically by mouse click position on map image. I have four predefined zoom levels from css which I am supplying dynamically on Zoom In/Out buttons.
Below are my css
.image-viewer .image-wrapper {
position: relative;
width: 92vw;
height: 92vh;
margin: 4vh 4vw;
overflow: hidden;
}
.image-viewer .image-outer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.image-viewer .image-outer .map-image {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
background-size: contain!important;
background-position: center!important;
background-repeat: no-repeat !important;
transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
animation: image-fade-in 0.4s ease;
-webkit-animation: image-fade-in 0.4s ease;
}
.image-viewer .image-outer.zoom-1 {
cursor: default;
}
.image-viewer .image-outer.zoom-2 .map-image {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
.image-viewer .image-outer.zoom-3 .map-image {
transform: scale3d(2, 2, 1);
-webkit-transform: scale3d(2, 2, 1);
}
.image-viewer .image-outer.zoom-4 .map-image {
transform: scale3d(2.5, 2.5, 1);
-webkit-transform: scale3d(2.5, 2.5, 1);
}
.image-viewer .image-outer.zoom-5 .map-image {
transform: scale3d(3, 3, 1);
-webkit-transform: scale3d(3, 3, 1);
}
.booth{
width:9px;
height:9px;
border-color:white;
border-width:1px;
border-style:solid;
position:absolute;
z-index:999;
background-color: red;
transition: all .2s ease-in-out;
}
.booth:hover{
cursor: pointer;
transform: scale(2.0);
}
Here is my jsFiddle - https://jsfiddle.net/veda_in/o2qLt4q8/33/

Just change this.
.image-viewer .image-outer.zoom-2 .map-image {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
to :
.image-viewer .image-outer.zoom-2 {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
The problem here is when you are scaling map image, image is scaling but class zoom-2 width is not scaling, which is container for both booth element and map image.
.image-viewer .image-outer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
So either you scale zoom-2 div class or add zoom-2 class to map-image and define map-image relative.

Related

Event listener not firing for some reason

I've adapted the code from Simply-Nav (great lightweight mobile nav – thanks obscuredetour) so that the background semi-transparent overlay fades in as opposed to sliding in with the nav.
Got that working fine, but what I've lost now is the ability to click/tap the semi-transparent overlay (on the right hand side) to close the whole nav.
The event listener is still there – pageOverlay.addEventListener('click', toggleNav); – but it's not firing pageOverlay.classList.remove('-open');.
The overlay div is no longer a child of the parent <ul class="nav-list">, so I don't know if that has something to do with it.
I've tried creating a transparent overlay over the overlay div, and add an eventlistener to that, but that hasn't worked.
Here's the code, if anyone has any ideas, I'd be really grateful for any help. I'm still a novice, so no doubt it's something obvious. Thanks so much.
/*
simply-nav.js - v1.2.1
https://github.com/obscuredetour/simply-nav
Licensed MIT © Jeffrey Summers
*/
// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {
const sideNav = document.querySelector('.nav-list'),
toggleNavBtn = document.querySelector('.toggle-nav'),
burger = document.querySelector('.burger'),
pageOverlay = document.querySelector('.overlay'),
navLinks = document.querySelectorAll(".link"),
body = document.querySelector('body'),
html = document.querySelector('html');
// Disable page scroll
function disablePageScroll() {
if (sideNav.classList.contains('-open')) {
body.classList.add('_disableScroll');
html.classList.add('_disableScroll');
} else {
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
};
// Nav funtion (toggle)
function toggleNav() {
sideNav.classList.toggle('-open');
pageOverlay.classList.toggle('-open');
burger.classList.toggle('open');
disablePageScroll();
};
// To default
toDefaults = () => {
// Close nav menu
sideNav.classList.remove('-open');
pageOverlay.classList.remove('-open');
burger.classList.remove('open');
// Make sure scrolling is enabled
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
// Event listeners
toggleNavBtn.addEventListener('click', toggleNav);
pageOverlay.addEventListener('click', toggleNav);
// (on mobile) close nav menu when link is clicked
// this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
navLinks.forEach(el => {
el.addEventListener('click', (event) => {
toDefaults();
});
});
// when browser is resized (past breakpoint) reset to defaults
(function() {
window.addEventListener("resize", resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
// Window resized width
let width = window.innerWidth;
// If resized greater than BREAKPOINT (default: 800px), then reset nav functions
if (width >= 800) {
toDefaults();
}
}
}());
})();
/*******HAMBURGER TOGGLE*******/
.toggle-nav {
background-color: transparent;
cursor: pointer;
box-shadow: none;
border: 0;
outline: none;
margin: 0;
padding: 3vh;
}
.logo-link {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-link>.logo {
max-width: 60px;
width: 100%;
height: auto;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: max-height 0.2s ease-in-out;
-webkit-transition: max-height 0.2s ease-in-out;
}
/*******HAMBURGER TOGGLE*******/
.nav-list {
background-color: transparent;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 10vh;
bottom: 0;
left: -50rem;
width: 60%;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
z-index: 6;
}
.nav-list.-open {
width: 100%;
left: 0;
padding-bottom: 4.5rem;
}
.nav-list.-open>.list.-left {
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-list>.list.-left {
background: rgba(50, 31, 101, 0.95);
position: relative;
width: 60%;
height: 100%;
}
.overlay {
margin: 0;
padding: 0;
display: block;
min-height: 100vh;
background: rgb(0 0 0 / 65%);
position: absolute;
bottom: 0;
width: 100%;
top: 10vh;
cursor: pointer;
z-index: 5;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.toggle-overlay {}
.overlay.-open {
visibility: visible;
opacity: 1;
}
/****** LIST ITEMS ******/
.nav-list>.list>.item {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}
.nav-list>.list>.item:last-child {
border-bottom: 0;
}
.nav-list>.list>.item>.link {
border-color: transparent;
text-decoration: none;
padding: 1.5rem 1rem 1.5rem 1rem;
flex-basis: 100%;
display: block;
background: transparent;
font-size: 1.5rem;
padding-left: 1.5rem;
color: #e0e0e0;
transition: all 0.3s ease-in-out;
}
.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
color: #e90052;
}
._disableScroll {
overflow-y: hidden !important;
}
/***********BURGER BUTTON STYLES***********/
.burger {
height: 3em;
width: 3em;
position: relative;
font-size: 10px;
cursor: pointer;
-webkit-transition: .2s all;
-o-transition: .2s all;
transition: .2s all;
}
.burger:after {
content: '';
display: block;
position: absolute;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
}
.burger>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger>.burger-lines:before {
left: 0;
top: 1em;
}
.burger>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-offset>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
-webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
-o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
width: 2em;
}
.burger.-squeeze.-offset .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset .burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
-webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
-o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open .burger-lines {
background-color: transparent;
}
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open .burger-lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger.-squeeze.open .burger-lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.burger-lines,
.burger-lines:after,
.burger-lines:before {
pointer-events: none;
display: block;
content: '';
width: 100%;
border-radius: 0.25em;
background-color: #e0e0e0;
height: 0.25em;
position: absolute;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.burger.-squeeze>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze>.burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.open>.burger-lines {
background-color: transparent;
}
.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open>.burger-lines:before {
transform: rotate(-45deg);
}
.burger.-squeeze.open>.burger-lines:after {
transform: rotate(45deg);
}
<header>
<button class="toggle-nav" type="button">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="navigation">
<div class="list -left">
<li class="item">
<a class="link" href="#">Menu item 1</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 2</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 3</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 4</a>
</li>
</div>
</ul>
<div class="overlay"></div>
</header>

That actually looks like a css problem. The tag <ul class="nav-list -open"> has a width of 100%, and for that reason it fills up the whole screen, not allowing the mouse click to get to the overlay element. You should:
remove width: 100% on the -open class (the source of the problems)
remove width: 60% on the .list.-left (The child of the nav doesn't fill it, it doesn't make too much sense...)
set left: -80rem instead of 50rem in .nav-list (to fully hide it)
That would make it work.

Jquery SVG circle navigation

The navigation works well, but the active status should show in a better way:
-- If the circle was active it stay active.(
-- Going back the a class active goes.
so, if page down remain active if page up(going back) remove active class.
At the moment just a a class active works,
I hope makes sense. Please ask question, this is a really nice animation but need a bit of more work.
I will post the code with a Demo.
Also . FIDDLE
$(document).ready(function() {
var $half = $(".circle .half"),
halfLen = $half[0].getTotalLength(),
$nav = $(".circle .active-nav"),
navLen = $nav[0].getTotalLength(),
$pages = $(".pages"),
scrolling = false,
curPage = 1,
numOfPages = $(".page").length,
headingH = $(".heading").height(),
SPHASE1 = 500,
SPHASE2 = 300,
SPHASE3 = 900,
SDELAY = SPHASE1 + SPHASE2 + SPHASE3,
SDUR = 500,
SDOTS = SDELAY + SDUR,
DOTTRANSTIME = 300,
SDOTSRDY = SDOTS + DOTTRANSTIME + (numOfPages - 2) * 100,
PAGETRANSITION = 500;
TweenMax.to($half, .5, {strokeDasharray: halfLen, strokeDashoffset: halfLen, ease:Power1.easeOut}, 0)
TweenMax.to($nav, .5, {strokeDasharray: navLen, strokeDashoffset: navLen, ease:Power1.easeOut}, 0)
$half.delay(SDELAY).velocity({strokeDashoffset: 0}, {duration: SDUR, easing: "ease-in"});
setTimeout(function() {
$(".nav-el").addClass("showing visible");
}, SDOTS);
setTimeout(function() {
$(".nav-el").removeClass("showing").addClass("white");
$(".nav-el-1").addClass("active");
$(".heading").removeClass("invisible");
$pages.removeClass("removed");
setTimeout(function() {
activateHandlers();
}, PAGETRANSITION + 300);
}, SDOTSRDY);
function pagination(page) {
scrolling = true;
curPage = page;
$(".nav-el").removeClass("active");
$(".nav-el-" + page).addClass("active");
var newNavLen = navLen - navLen / 5 * (page - 1);
$nav.velocity({strokeDashoffset: newNavLen}, {duration: PAGETRANSITION});
$(".numbers").css("transform", "translateY("+ (0 - (page - 1) * headingH) +"px)");
$pages.css("transform", "translate3D(0,"+ (0 - (page - 1) * 100) +"%,0)");
setTimeout(function() {
scrolling = false;
}, PAGETRANSITION);
if($(".nav-el-").hasClass('active')){
console.log('if active')
}else{
console.log('else active')
}
}
function activateHandlers() {
$(document).on("click", ".nav-el", function() {
var pg = +$(this).attr("data-page");
pagination(pg);
});
$(window).resize(function() {
headingH = $(".heading").height();
});
}
var diff = 0;
});
#font-face {
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
font-family: Polar;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
}
.instant {
transition: all 0 0 !important;
}
html, body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
background: #90CAF9;
}
#media (max-width: 960px) {
html, body {
font-size: 50%;
}
}
#media (max-width: 768px) {
html, body {
font-size: 40%;
}
}
#media (max-width: 480px) {
html, body {
font-size: 30%;
}
}
.scene {
position: relative;
height: 100%;
}
.circle {
z-index: 4;
position: fixed;
top: calc(50% - 20rem);
left: calc(50% - 20rem);
width: 40rem;
height: 40rem;
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.rotater {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 500rem;
height: 500rem;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: #020202;
border-radius: 50%;
}
.rotater.phase1 {
width: 0.1rem;
height: 0.1rem;
transition: width 0.5s, height 0.5s;
}
.rotater.phase2 {
width: 2.5rem;
height: 2.5rem;
transition: width 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), height 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater.phase3 {
width: 1rem;
height: 1rem;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
transform: translateX(-50%) translateY(-50%) rotate(180deg);
transition: width 0.1s, height 0.1s, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s;
transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
opacity: 0;
}
.rotater.phase3 .rotater--line {
max-width: 20rem;
}
.rotater.phase3 .rotater--line:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.rotater--line {
position: absolute;
top: calc(50% - 0.1rem);
left: 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
width: 20rem;
max-width: 0;
height: 0.2rem;
background: #020202;
transition: max-width 0.5s 0.1s;
will-change: max-width;
}
.rotater--line:after {
content: "";
position: absolute;
top: -0.4rem;
left: 19.4rem;
width: 1rem;
height: 1rem;
background: #020202;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater--line.left {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.nav-elems {
z-index: 5;
position: fixed;
top: calc(50% - 20rem);
left: calc(50% - 20rem);
width: 40rem;
height: 40rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.heading {
position: absolute;
top: 50%;
left: 50%;
font-size: 9rem;
width: 40rem;
height: 9rem;
line-height: 1;
font-family: Polar;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.5);
margin-left: -3rem;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
overflow: hidden;
transition: opacity 0.3s 0.7s, -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.heading.invisible {
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0);
transform: translateX(-50%) translateY(-50%) scale(0);
}
.numbers {
position: absolute;
top: 0;
right: 5rem;
width: 1rem;
display: inline-block;
vertical-align: top;
height: 90rem;
line-height: 1;
word-break: break-all;
transition: -webkit-transform 0.7s;
transition: transform 0.7s;
transition: transform 0.7s, -webkit-transform 0.7s;
will-change: transform;
}
.nav-el {
position: absolute;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #020202;
-webkit-transform: scale(0);
transform: scale(0);
transition: background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s;
transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
cursor: pointer;
}
.nav-el:after {
content: "";
position: absolute;
top: calc(50% - 0.2rem);
left: calc(50% - 0.2rem);
width: 0.4rem;
height: 0.4rem;
background: #020202;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.nav-el.visible {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-el.white {
background: #fff;
}
.nav-el.active, .nav-el:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.nav-el.active:after, .nav-el:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-el-1 {
left: 19.5rem;
top: -0.4rem;
}
.nav-el-1.showing {
transition-delay: 0s;
}
.nav-el-2 {
left: 38.42602rem;
top: 13.35056rem;
}
.nav-el-2.showing {
transition-delay: 0.1s;
}
.nav-el-3 {
left: 31.19693rem;
top: 35.59944rem;
}
.nav-el-3.showing {
transition-delay: 0.2s;
}
.nav-el-4 {
left: 7.80307rem;
top: 35.59944rem;
}
.nav-el-4.showing {
transition-delay: 0.3s;
}
.nav-el-5 {
left: 0.57398rem;
top: 13.35056rem;
}
.nav-el-5.showing {
transition-delay: 0.4s;
}
.pages {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.7s;
transition: transform 0.7s;
transition: transform 0.7s, -webkit-transform 0.7s;
will-change: transform;
}
.pages.removed {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.pages.removed .scroll-down {
-webkit-transform: scale(0);
transform: scale(0);
}
.page {
position: relative;
width: 100%;
height: 100%;
}
.page:after {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.page.page-1 {
position: relative;
background: #F44336;
}
.page.page-2 {
background: #009688;
}
.page.page-3 {
background: #3F51B5;
}
.page.page-4 {
background: #FFA726;
}
.page.page-5 {
background: #795548;
}
.page.page-6 {
background: #607D8B;
}
.page.page-7 {
position: relative;
background: #000000;
padding: 10rem;
}
.scroll-down {
position: absolute;
bottom: 5rem;
left: 50%;
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
font-size: 5rem;
font-family: Polar;
color: #fff;
transition: -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
#media (max-width: 768px) {
.scroll-down {
display: none;
}
}
#media (max-height: 610px) and (min-width: 769px) {
.scroll-down {
display: none;
}
}
.check-out {
z-index: 10;
position: relative;
font-size: 5rem;
font-family: Polar;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.2.0/velocity.min.js"></script>
<div class="scene">
<svg class="circle" viewBox="0 0 400 400">
<path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M1,200 a199,199 0 0,1 398,0"/>
<path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M399,200 a199,199 0 0,1 -398,0"/>
<path class="active-nav" stroke="#fff" stroke-width="2" fill="none" d="M200,1 a199,199 0 0,1 0,398 a199,199 0 0,1 0,-398"/>
</svg>
<div class="rotater">
<div class="rotater--line left"></div>
<div class="rotater--line right"></div>
</div>
<div class="nav-elems">
<div data-page="1" class="nav-el nav-el-1"></div>
<div data-page="2" class="nav-el nav-el-2"></div>
<div data-page="3" class="nav-el nav-el-3"></div>
<div data-page="4" class="nav-el nav-el-4"></div>
<div data-page="5" class="nav-el nav-el-5"></div>
</div>
<div class="pages removed">
<div class="page page-1">
<p class="scroll-down">Scroll down</p>
</div>
<div class="page page-2"></div>
<div class="page page-3"></div>
<div class="page page-4"></div>
<div class="page page-5"></div>
</div>
</div>

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

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>

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.

REACT - Child position with respect of scale of parent - javascript

Related

Event listener not firing for some reason

Jquery SVG circle navigation

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

prevent effect hover from occurring until previous effect has completed

Why are the CSS transforms not displayed?

Categories

Resources