jQuery window .scroll dysfunction - javascript

I'm including the whole code here, it's the bones of a parallax website (all css) with a scrolling menu (jQuery) that displays the current position based on div ID.
The parallax CSS and menu jQuery work perfectly fine when separated, but there's a dysfunction when combined.
I narrowed it down to the window.scroll by logging it in the console and seeing that any time the mouse pointer is hovering over the main content frame (.parallax) while scrolling, nothing is logged. Is there some way to make sure the window's attributes and scroll position are logged regardless of what's in the body section?
jQuery(document).ready(function() {
console.log('got here');
jQuery(window).scroll(function() {
console.log('Log this');
});
});
$(document).ready(function() {
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
var lastId,
sideMenu = $(".ssb00"),
menuItems = sideMenu.find("a"),
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function(e) {
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top;
$(window).stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(window).scroll(function() {
var fromTop = $(this).scrollTop();
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
$(function() {
var scroll = 0;
$(window).scroll(function(event) {
var moved = $(this).scrollTop();
var headerSize = 20
if (moved > headerSize) {
$('.ssb00').css({
'opacity': '1',
'right': '10px'
})
$('.ssb01').css({
'opacity': '0',
})
}
if (moved === 0) {
$('.ssb00').css({
'opacity': '0',
'right': '-40px'
})
$('.ssb01').css({
'opacity': '1',
})
}
if (moved > headerSize) {}
headerSize = moved;
});
});
});
#charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.ssb00 {
z-index: 100;
position: absolute;
width: 100px;
height: 100%;
top: 100px;
opacity: 0;
}
#menLogo {
z-index: 110;
position: fixed;
top: 0;
left: 8px;
height: 100px;
width: 100px;
background-image: url(img/Logo-300x244.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssb00_inWrap {
height: 200px;
position: relative;
top: calc(50vh - 150px);
}
.m00 {
height: 33px;
}
.m00 div {
position: absolute;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.m01 {
text-align: left;
right: 0;
width: 16px;
}
.m01:before {
content: '•';
}
.m02 {
left: 200px;
width: calc(100% - 26px);
opacity: 0;
text-align: right;
}
.ssb00_inWrap:hover .m02 {
left: 0px;
opacity: 1;
}
.ssb00 a {
color: #fff;
}
.ssb00 a:hover {
color: #6ccef5;
}
.active .m02 {
left: 0px;
opacity: 1;
}
.active a {
color: #1b75ba;
}
.ssb01 {
z-index: 100;
background: rgba(255, 255, 255, .9);
border-bottom: 1px solid #f0f0f0;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.ssb01 .nav {
font-weight: bold;
width: 560px;
height: 30px;
position: absolute;
right: 0;
bottom: 10px;
text-align: left;
}
.ssb01 a {
color: #1b75ba;
text-decoration: none;
margin: 0px 15px;
}
.ssb01 a:hover {
color: #6ccef5;
}
.ssb01 a:active {
color: #fff;
}
.ssb01__info {
position: absolute;
height: 45px;
padding: 14px 20px;
left: 110px;
top: 15px;
color: #666;
opacity: 1;
}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
.debug {
position: fixed;
top: 0;
left: .5em;
z-index: 999;
background: rgba(0, 0, 0, .85);
color: #fff;
padding: .5em;
border-radius: 0 0 5px 5px;
}
.debug-on .parallax__group {
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
.debug-on .parallax__layer {
box-shadow: 0 0 0 2px #000;
opacity: 0.9;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax {
font-size: 200%;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#Xabout {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xabout .parallax__layer--back {
background: #6ba1ff;
}
#aboutGal {
z-index: 5;
/* slide over group 2 */
}
#aboutGal .parallax__layer--base {
background: #c4daff;
}
#Xconcept {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xconcept .parallax__layer--back {
background: #7ae570;
}
#conceptGal {
z-index: 4;
/* slide over group 2 and 4 */
}
#conceptGal .parallax__layer--base {
background: #adffa5;
}
#Xbroadcast {
z-index: 2;
/* slide under group 3 and 5 */
}
#Xbroadcast .parallax__layer--back {
background: #f0f760;
}
#broadcastGal {
z-index: 3;
/* slide over group 4 and 6 */
}
#broadcastGal .parallax__layer--base {
background: #fcffbc;
}
#Xdigital {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdigital .parallax__layer--back {
background: #42e2f4;
}
#digitalGal {
z-index: 3;
/* slide over group 7 */
}
#digitalGal .parallax__layer--base {
background: #aaf6ff;
}
#Xdesign {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdesign .parallax__layer--back {
background: #e59172;
}
#designGal {
z-index: 3;
/* slide over group 7 */
}
#designGal .parallax__layer--base {
background: #ffe1d6;
}
#Xcontact {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xcontact .parallax__layer--back {
background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div id="menLogo"></div>
<div class="ssb01 trans">
<div class="ssb01__info">
<span>bill o'day</span>
<br />
<span>creative director | art</span>
</div>
<div class="nav">
About
Concept
Broadcast
Digital
Design
Contact
</div>
</div>
<div class="ssb00 trans">
<div class="ssb00_inWrap">
<div class="m00 men-1 active">
<a href="#about">
<div class="m01 mm-1"></div>
<div class="m02 mm-1">About</div>
</a>
</div>
<div class="m00 men-2 active">
<a href="#concept">
<div class="m01 mm-2"></div>
<div class="m02 mm-2">Concept</div>
</a>
</div>
<div class="m00 men-3 active">
<a href="#broadcast">
<div class="m01 mm-3"></div>
<div class="m02 mm-3">Broadcast</div>
</a>
</div>
<div class="m00 men-4 active">
<a href="#digital">
<div class="m01 mm-4"></div>
<div class="m02 mm-4">Digital</div>
</a>
</div>
<div class="m00 men-5 active">
<a href="#design">
<div class="m01 mm-5"></div>
<div class="m02 mm-5">Design</div>
</a>
</div>
<div class="m00 men-6 active">
<a href="#contact">
<div class="m01 mm-6"></div>
<div class="m02 mm-6">Contact</div>
</a>
</div>
</div>
</div>
<div class="parallax">
<div id="Xabout" class="parallax__group">
<div id="about" class="parallax__layer parallax__layer--base">
<div class="title">hello</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">ABOUT BG</div>
</div>
</div>
<div id="aboutGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT GAL</div>
</div>
</div>
<div id="Xconcept" class="parallax__group">
<div id="concept" class="parallax__layer parallax__layer--base">
<div class="title">concepts</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Concepts BG</div>
</div>
</div>
<div id="conceptGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONCEPTS GAL</div>
</div>
</div>
<div id="Xbroadcast" class="parallax__group">
<div id="broadcast" class="parallax__layer parallax__layer--base">
<div class="title">broadcast</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">BROADCAST BG</div>
</div>
</div>
<div id="broadcastGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BROADCAST GAL</div>
</div>
</div>
<div id="Xdigital" class="parallax__group">
<div id="digital" class="parallax__layer parallax__layer--base">
<div class="title">digital</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DIGITAL BG</div>
</div>
</div>
<div id="digitalGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DIGITAL GAL</div>
</div>
</div>
<div id="Xdesign" class="parallax__group">
<div id="design" class="parallax__layer parallax__layer--base">
<div class="title">design</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DESIGN BG</div>
</div>
</div>
<div id="designGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DESIGN GAL</div>
</div>
</div>
<div id="Xcontact" class="parallax__group">
<div id="contact" class="parallax__layer parallax__layer--base">
<div class="title">contact</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">CONTACT BG</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
I've changed my JS .scroll commands to focus on the .parallax div since that's really what should be measured, and it logs just fine now. BUT clicking on the items in the side menu still scrolls to positions as if it has a 30% view of the whole thing.
So I think the issue now is particularly with this line:
offsetTop = href === "#" ? 0 : $(href).offset().top;
The scrollTop and offsetTop results seem to be off. I'm trying to figure it out but I'm very slow. Any help would be appreciated.

So, you need to listen to .parallax scrolling right?
And you didn't tried this ?
$(".parallax").scroll(function() { // Added, just to console.log the scroll events.
console.log('Log this Parallax');
});
In your script, I got rid of the multiple ready wrappers.
$(document).ready(function() { is the same as $(function() {
One is a short hand of the other.
Multiple subsequent wrapper like this are useless... And nested ones too.
I also changed this (And this is what fixes your side menu offset on scroll back up) :
$(".parallax").scroll(function() { // Changed $(window) to $(".parallax")
var fromTop = $(window).scrollTop(); // Changed $(this) to $(window)
// ...
I also fixed the side menu links click handler like this:
menuItems.click(function(e) {
var href = $(this).attr("href"); // changed the coma to a semi-colon.
var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top;
$(".parallax").stop().animate({ // Changed $(window") to $(".parallax")
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
There is still a small glitch on the appearance of the menus (top and side)...
That is because you use opacity instead of display to control show/hide.
That also is the source of the white band at the bottom of the page.
I left some work for you ;)
See it on CodePen and on the below snippet (but click the "Full page" link).
$(document).ready(function() {
console.log('got here');
$(window).scroll(function() {
//console.log('Log this');
});
$(".parallax").scroll(function() { // Added, just to console.log the scroll events.
//console.log('Log this Parallax');
});
//});
//$(document).ready(function() {
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
var lastId,
sideMenu = $(".ssb00"),
menuItems = sideMenu.find("a"),
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function(e) {
var href = $(this).attr("href"); // changed the coma to a semi-colon.
var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top;
$(".parallax").stop().animate({ // Changed $(window") to $(".parallax")
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(".parallax").scroll(function() { // Changed $(window) to $(".parallax")
var fromTop = $(window).scrollTop(); // Changed $(this) to $(window)
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
//$(function() {
var scroll = 0;
$(window).scroll(function(event) {
var moved = $(this).scrollTop();
var headerSize = 20
if (moved > headerSize) {
$('.ssb00').css({
'opacity': '1',
'right': '10px'
})
$('.ssb01').css({
'opacity': '0',
})
}
if (moved === 0) {
$('.ssb00').css({
'opacity': '0',
'right': '-40px'
})
$('.ssb01').css({
'opacity': '1',
})
}
if (moved > headerSize) {}
headerSize = moved;
});
//});
});
#charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.ssb00 {
z-index: 100;
position: absolute;
width: 100px;
height: 100%;
top: 100px;
opacity: 0;
}
#menLogo {
z-index: 110;
position: fixed;
top: 0;
left: 8px;
height: 100px;
width: 100px;
background-image: url(img/Logo-300x244.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssb00_inWrap {
height: 200px;
position: relative;
top: calc(50vh - 150px);
}
.m00 {
height: 33px;
}
.m00 div {
position: absolute;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.m01 {
text-align: left;
right: 0;
width: 16px;
}
.m01:before {
content: '•';
}
.m02 {
left: 200px;
width: calc(100% - 26px);
opacity: 0;
text-align: right;
}
.ssb00_inWrap:hover .m02 {
left: 0px;
opacity: 1;
}
.ssb00 a {
color: #fff;
}
.ssb00 a:hover {
color: #6ccef5;
}
.active .m02 {
left: 0px;
opacity: 1;
}
.active a {
color: #1b75ba;
}
.ssb01 {
z-index: 100;
background: rgba(255, 255, 255, .9);
border-bottom: 1px solid #f0f0f0;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.ssb01 .nav {
font-weight: bold;
width: 560px;
height: 30px;
position: absolute;
right: 0;
bottom: 10px;
text-align: left;
}
.ssb01 a {
color: #1b75ba;
text-decoration: none;
margin: 0px 15px;
}
.ssb01 a:hover {
color: #6ccef5;
}
.ssb01 a:active {
color: #fff;
}
.ssb01__info {
position: absolute;
height: 45px;
padding: 14px 20px;
left: 110px;
top: 15px;
color: #666;
opacity: 1;
}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
.debug {
position: fixed;
top: 0;
left: .5em;
z-index: 999;
background: rgba(0, 0, 0, .85);
color: #fff;
padding: .5em;
border-radius: 0 0 5px 5px;
}
.debug-on .parallax__group {
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
.debug-on .parallax__layer {
box-shadow: 0 0 0 2px #000;
opacity: 0.9;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax {
font-size: 200%;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#Xabout {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xabout .parallax__layer--back {
background: #6ba1ff;
}
#aboutGal {
z-index: 5;
/* slide over group 2 */
}
#aboutGal .parallax__layer--base {
background: #c4daff;
}
#Xconcept {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xconcept .parallax__layer--back {
background: #7ae570;
}
#conceptGal {
z-index: 4;
/* slide over group 2 and 4 */
}
#conceptGal .parallax__layer--base {
background: #adffa5;
}
#Xbroadcast {
z-index: 2;
/* slide under group 3 and 5 */
}
#Xbroadcast .parallax__layer--back {
background: #f0f760;
}
#broadcastGal {
z-index: 3;
/* slide over group 4 and 6 */
}
#broadcastGal .parallax__layer--base {
background: #fcffbc;
}
#Xdigital {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdigital .parallax__layer--back {
background: #42e2f4;
}
#digitalGal {
z-index: 3;
/* slide over group 7 */
}
#digitalGal .parallax__layer--base {
background: #aaf6ff;
}
#Xdesign {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdesign .parallax__layer--back {
background: #e59172;
}
#designGal {
z-index: 3;
/* slide over group 7 */
}
#designGal .parallax__layer--base {
background: #ffe1d6;
}
#Xcontact {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xcontact .parallax__layer--back {
background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div id="menLogo"></div>
<div class="ssb01 trans">
<div class="ssb01__info">
<span>bill o'day</span>
<br />
<span>creative director | art</span>
</div>
<div class="nav">
About
Concept
Broadcast
Digital
Design
Contact
</div>
</div>
<div class="ssb00 trans">
<div class="ssb00_inWrap">
<div class="m00 men-1 active">
<a href="#about">
<div class="m01 mm-1"></div>
<div class="m02 mm-1">About</div>
</a>
</div>
<div class="m00 men-2 active">
<a href="#concept">
<div class="m01 mm-2"></div>
<div class="m02 mm-2">Concept</div>
</a>
</div>
<div class="m00 men-3 active">
<a href="#broadcast">
<div class="m01 mm-3"></div>
<div class="m02 mm-3">Broadcast</div>
</a>
</div>
<div class="m00 men-4 active">
<a href="#digital">
<div class="m01 mm-4"></div>
<div class="m02 mm-4">Digital</div>
</a>
</div>
<div class="m00 men-5 active">
<a href="#design">
<div class="m01 mm-5"></div>
<div class="m02 mm-5">Design</div>
</a>
</div>
<div class="m00 men-6 active">
<a href="#contact">
<div class="m01 mm-6"></div>
<div class="m02 mm-6">Contact</div>
</a>
</div>
</div>
</div>
<div class="parallax">
<div id="Xabout" class="parallax__group">
<div id="about" class="parallax__layer parallax__layer--base">
<div class="title">hello</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">ABOUT BG</div>
</div>
</div>
<div id="aboutGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT GAL</div>
</div>
</div>
<div id="Xconcept" class="parallax__group">
<div id="concept" class="parallax__layer parallax__layer--base">
<div class="title">concepts</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Concepts BG</div>
</div>
</div>
<div id="conceptGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONCEPTS GAL</div>
</div>
</div>
<div id="Xbroadcast" class="parallax__group">
<div id="broadcast" class="parallax__layer parallax__layer--base">
<div class="title">broadcast</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">BROADCAST BG</div>
</div>
</div>
<div id="broadcastGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BROADCAST GAL</div>
</div>
</div>
<div id="Xdigital" class="parallax__group">
<div id="digital" class="parallax__layer parallax__layer--base">
<div class="title">digital</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DIGITAL BG</div>
</div>
</div>
<div id="digitalGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DIGITAL GAL</div>
</div>
</div>
<div id="Xdesign" class="parallax__group">
<div id="design" class="parallax__layer parallax__layer--base">
<div class="title">design</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DESIGN BG</div>
</div>
</div>
<div id="designGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DESIGN GAL</div>
</div>
</div>
<div id="Xcontact" class="parallax__group">
<div id="contact" class="parallax__layer parallax__layer--base">
<div class="title">contact</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">CONTACT BG</div>
</div>
</div>
</div>
</body>
</html>

Related

Vanilla JS - Infinite Auto play Slider

I'm going to make a responsive slider that automatically plays.The code I had at first is this.
It's working properly.
However, I'm going to separate the code because it doesn't play automatically.
I tried to auto-play the slides through setInterval(slider,3000), but it didn't work properly.
Realizing that it is a problem caused by all the content in the 'function slider', I separated the button from the press to create two functions, but it did not work. I don't know what to do...
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 300px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active ~ .slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background:#222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>
Because you are using event inside movement() function to see which button was pressed, you can supply a "dummy" object with the direction instead:
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
setInterval(function()
{
movement({target:{id:"next"}});
}, 3000);
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 300px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active~.slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background: #222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>

removeClass with conditions

If you click either image a unique modal appears for each.
I used a function that hides the apple modal if you click away.
How do I keep the apple modal showing if I click any of the .alt-btn's?
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.button {
height: 30px;
cursor: pointer
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>
You just have to add '.alt-btn' here:
if ($(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button, .alt-btn").is(e.target))
{
if(!$(".apple-modal").hasClass("keep-active"))
$(".modal").removeClass("active");
}
Here is working example:
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button, .alt-btn").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.button {
height: 30px;
cursor: pointer
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>
EDIT: ==>
It is not an issue. I thought you need to close it when opener button is second time pressed. If you don't need to close then you have to remove.
data-close="apple"
from
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
see the code example below:
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button, .alt-btn").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.button {
height: 30px;
cursor: pointer
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>

Closing a Lightbox Window by Clicking on the Background Area?

I have developed a lightbox feature which I am trying to figure out how to close the lightbox preview window by clicking on the background area behind the image displayed, (while keeping the image unaffected).
Here's a demo snippet. There's a button toggle control at the upper, right-hand corner to close the lightbox window, but I would like to be able to close the window by clicking on the background area surrounding the image as well. Any input?
UPDATE: The Solution
Finally got this working, thanks to Marouen Mhiri. Updated my original snippet here:
var $scrollTop = 0;
$('.pic > img').click(function() {
var $body = $('body');
$scrollTop = $(window).scrollTop();
$body.css('position', 'fixed');
$body.css('top', '-' + $scrollTop + 'px');
$body.css('background-position', '0 -' + $scrollTop + 'px');
var srcToCopy = $(this).attr('src');
$body.find('.imgsrc').attr('src', srcToCopy);
$body.addClass('no-scroll');
$('#view').addClass("target");
});
$('#customlightbox-controls').on('click', function() {
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
});
$('.customlightbox-imgwrap').on('click', function(e) {
if(!$(e.target).hasClass('imgsrc')){
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
}
});
body {
background-color: #58d68d;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
height: auto;
width: 100%;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 150px
}
a {
display: inline-block;
line-height: 0;
}
.container {
text-align: center;
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
cursor: pointer;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox.target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#customlightbox-controls {
top: -3px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Instance 4 -->
<div class="container">
<div class="pic">
<img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
</div>
</div>
<!-- Lightbox Instance 5 -->
<div class="container">
<div class="pic">
<img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
</div>
</div>
<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate"></a>
</div>
This question stems from a previous question, answered here.
just use the click event of the div containing the lightbox and fire the event only if the clicked area doesn't contain the image:
$('.customlightbox-imgwrap').on('click', function(e) {
if(!$(e.target).hasClass('imgsrc')){ // check if target is not the image displayed
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
}
});
Hiding the lightbox by clicking on the background
It is possible by adding #view to the following code.
Before
$('#customlightbox-controls').on('click', function()
After
$('#customlightbox-controls, #view').on('click', function()
var $scrollTop = 0;
$('.pic > img').click(function() {
var $body = $('body');
$scrollTop = $(window).scrollTop();
$body.css('position', 'fixed');
$body.css('top', '-' + $scrollTop + 'px');
$body.css('background-position', '0 -' + $scrollTop + 'px');
var srcToCopy = $(this).attr('src');
$body.find('.imgsrc').attr('src', srcToCopy);
$body.addClass('no-scroll');
$('#view').addClass("target");
});
$('#customlightbox-controls, #view').on('click', function() {
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
});
body {
background-color: #58d68d;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
height: auto;
width: 100%;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 150px
}
a {
display: inline-block;
line-height: 0;
}
.container {
text-align: center;
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
cursor: pointer;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox.target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#customlightbox-controls {
top: -3px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Instance 4 -->
<div class="container">
<div class="pic">
<img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
</div>
</div>
<!-- Lightbox Instance 5 -->
<div class="container">
<div class="pic">
<img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
</div>
</div>
<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate"></a>
</div>

center a div underneath another on click

I am trying to center a div programmatically underneath another one when a certain div is clicked. I have tried everything with no avail so i need some help. Below is code i wrote. This the jsfiddle link for what i am trying to do http://jsfiddle.net/U3pVM/18656/
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="box" ng-click="do($event)">
<p> HEY THERRE </p>
</div>
<div class="box2" ng-show="show">
</div>
</div>
</div>
function TodoCtrl($scope) {
$scope.show =false;
$scope.do = function(evt) {
var $this = $(evt.target);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var centerX = offset.left ;
var centerY = offset.top + height;
$('.box2').css({
'position': 'absolute',
'top': centerY,
'left': centerX
});
$scope.show = !$scope.show;
console.log(evt);
console.log(centerX, centerY);
};
}
Use position: relative on the .box2 element. Also, add margin: 0 auto; to position it horizontally center.
This will cut down your JS code for positioning the element.
Demo
function TodoCtrl($scope) {
$scope.show = false;
$scope.do = function(evt) {
$scope.show = !$scope.show;
};
}
.box {
top: 10px;
right: 400px;
width: 150px;
height: 150px;
background: orange;
color: white;
z-index: 10;
margin: 0 auto;
}
.box2 {
position: relative;
width: 300px;
height: 150px;
background: green;
opacity: 1;
z-index: 9;
margin: 0 auto;
}
.box2.ng-hide-add {
transition: all linear 5.5s;
}
.box2.ng-hide {
opacity: 0;
}
.box2 {
animation: slideDown .5s;
}
#keyframes slideDown {
0% {
transform: translateY(-20%);
}
100% {
transform: translateY(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="box" ng-click="do($event)">
<p>HEY THERRE</p>
</div>
<div class="box2" ng-show="show"></div>
</div>
</div>
You can also remove your controller as follow:
Demo
.box {
top: 10px;
right: 400px;
width: 150px;
height: 150px;
background: orange;
color: white;
z-index: 10;
margin: 0 auto;
}
.box2 {
position: relative;
width: 300px;
height: 150px;
background: green;
opacity: 1;
z-index: 9;
margin: 0 auto;
}
.box2.ng-hide-add {
transition: all linear 5.5s;
}
.box2.ng-hide {
opacity: 0;
}
.box2 {
animation: slideDown .5s;
}
#keyframes slideDown {
0% {
transform: translateY(-20%);
}
100% {
transform: translateY(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div>
<div class="box" ng-init="show=false" ng-click="show=!show">
<p>HEY THERE</p>
</div>
<div class="box2" ng-show="show"></div>
</div>
</div>

CSS next & previous clip path animation

Following on from a related question that I posted last week, I have created a custom carousel that uses clip-path to provide a snippet of the next and previous slides. This is currently working functionally, but I now need to apply some animations when showing/hiding the slides.
In the related question, only the "next slide" functionality was needed, and a solution that was provided was to clip the "active" slide. However now since we need to do next and previous slides, I have applied the clip to the next and previous slides instead. Code as follows:
$(document).ready(function() {
$('.slide').click(function() {
var current = $(this);
var prev = current.prev('.slide');
var next = current.next('.slide');
$('.slide').removeClass('active next prev');
if (current.hasClass('prev')) {
current.addClass('active').removeClass('prev');
} else {
current.addClass('active').removeClass('next');
}
if (prev.length) {
prev.addClass('prev');
} else {
$('.slide:last').addClass('prev');
}
if (next.length) {
next.addClass('next');
} else {
$('.slide:first').addClass('next');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
}
.slide.next {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
.slide.prev {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>
Here is a JSFiddle of all the above code: https://jsfiddle.net/795f88nm/
As you will see the carousel works fine. I just need to add in animations, as follows:
When clicking the next slide (bottom right corner) it should gradually reveal the slide upwards. The "new" next slide should gradually appear from the bottom corner.
When clicking the previous slide (top left corner) it should gradually reveal the slide downwards. The "new" previous slide should gradually appear from the top corner.
I'm not very good at doing animations, so could do with some help on this.
Basically you can use animation with your clip-path
$(document).ready(function() {
$('.slide').click(function() {
var current = $('.slide.active');
var prev = $('.slide.prev');
var next = $('.slide.next');
if ($(this).hasClass('prev')) {
prev.removeClass('prev').addClass('next');
current.removeClass('active').addClass('prev');
next.removeClass('next').addClass('active');
} else if ($(this).hasClass('next')) {
next.removeClass('next').addClass('prev');
current.removeClass('active').addClass('next');
prev.removeClass('prev').addClass('active');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
transition: all 2s ease;
}
.slide.next {
transition: all 2s ease;
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
animation: polygons_next 2s alternate;
}
.slide.prev {
transition: all 2s ease;
clip-path: polygon(44% 0, 0 30%, 0 0);
animation: polygons_prev 2s alternate;
}
#keyframes polygons_next {
0% {
clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
}
100% {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
}
#keyframes polygons_prev {
0% {
clip-path: polygon(100% 0, 0 100%, 0 0);
}
100% {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banners">
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>

Categories