We Keep Coding

vertical and horizontal scroll using JavaScript

I'm working on the layout of a website and I want my slider to move horizontally while scrolling vertically. In short, I want to flip my scroll. How can I do that?
My code:
$(function () {
var Page = (function () {
var $navArrows = $("#nav-arrows"),
$nav = $("#nav-dots > span"),
$document = $(document),
slitslider = $("#slider").slitslider({
onBeforeChange: function (slide, pos) {
$nav.removeClass("nav-dot-current");
$nav.eq(pos).addClass("nav-dot-current");
}
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(":last").on("click", function () {
slitslider.next();
return false;
});
$navArrows.children(":first").on("click", function () {
slitslider.previous();
return false;
});
$nav.each(function (i) {
$(this).on("click", function (event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass("nav-dot-current");
$dot.addClass("nav-dot-current");
}
slitslider.jump(i + 1);
return false;
});
});
},
NextSlid = function () {
slitslider.next();
return false;
},
PreviousSlid = function () {
slitslider.previous();
return false;
};
return { init: init, NextSlid: NextSlid, PreviousSlid, PreviousSlid };
})();
Page.init();
$(window).on("wheel", function (e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) {
Page.NextSlid();
} else {
Page.PreviousSlid();
}
});
$(".container").each(function () {
console.log("cont");
let $window = $(document),
$body = $(".main");
let $nested = $(this),
$nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function (e) {
console.log("resize");
$nested.removeClass("sticky").css({ left: 0 });
let placeholderHeight = $nestedPlaceholder.css({ height: "" }).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
const main = document.querySelector(".main");
const scrollEvent = () => {
console.log(main.scrollTop);
console.log("scroll");
let scrollTop = main.scrollTop;
// console.log("scrollTop = " + scrollTop);
console.log("upperMargin = " + upperMargin);
console.log("scrollTop =" + scrollTop);
console.log("lowerMargin =" + lowerMargin);
// && scrollTop < lowerMargin
if (scrollTop >= upperMargin) {
$nested.addClass("sticky");
console.log("addClass --------------");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition =
(verticalScrollPosition / verticalScrollRange) *
horizontalScrollRange;
$nested.css({ left: -horizontalScrollPosition });
} else {
// $nested.removeClass("sticky");
console.log("removeClass +++++++++++++");
}
};
main.addEventListener("scroll", scrollEvent);
$window.resize();
});
});
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: green;
}
.main {
width: 100%;
height: 100%;
background-color: yellow;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.nav-arrows {
display: none;
}
.sl-slider-wrapper {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-of-type(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-of-type(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
background: #fff;
}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
background: #ddd;
}
.sl-slide-vertical .sl-slide-inner {
background: #ccc;
}
.demo-1 .sl-slider-wrapper {
position: relative;
width: 100vw;
height: 100vh;
/* top: 0;
left: 0; */
}
.demo-2 .sl-slider-wrapper {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
padding: 100px 30px 10px 30px;
width: 80%;
max-width: 960px;
color: #fff;
margin: 0 auto;
position: relative;
z-index: 100;
}
.demo-2 .sl-slider h2 {
font-size: 100px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote {
font-size: 28px;
padding-top: 10px;
font-weight: 300;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote cite {
font-size: 16px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 30px;
display: inline-block;
}
.demo-2 .bg-img {
padding: 200px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150, 150, 150, 0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150, 150, 150, 0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150, 150, 150, 0.4);
cursor: pointer;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-2 .nav-dots span {
background: rgba(150, 150, 150, 0.1);
margin: 6px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
}
/* Content elements */
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150, 150, 150, 0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 [data-icon]:after {
content: attr(data-icon);
font-family: "AnimalsNormal";
color: #999;
text-shadow: 0 0 1px #999;
position: absolute;
width: 220px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 100px;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
box-shadow: inset 0 0 0 10px #f7f7f7;
border-radius: 50%;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p {
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244, 244, 244, 0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: "\201C";
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
background: #db84ad;
}
.demo-1 .bg-3 .deco {
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.demo-1 .bg-3 [data-icon]:after {
color: #fff;
text-shadow: 0 0 1px #fff;
box-shadow: inset 0 0 0 10px #b55381;
}
.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.demo-1 .bg-3 blockquote:before {
color: #c46c96;
}
/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
background: #5bc2ce;
}
.demo-1 .bg-4 .deco {
border-color: #379eaa;
}
.demo-1 .bg-4 [data-icon]:after {
text-shadow: 0 0 1px #277d87;
color: #277d87;
}
.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.demo-1 .bg-4 blockquote:before {
color: #379eaa;
}
/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
background: #ffeb41;
}
.demo-1 .bg-5 .deco {
border-color: #ecd82c;
}
.demo-1 .bg-5 .deco:after {
color: #000;
text-shadow: 0 0 1px #000;
}
.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote {
color: #000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-1 .bg-5 blockquote:before {
color: #ecd82c;
}
.demo-2 .bg-img-1 {
background-image: url(../images/1.jpg);
}
.demo-2 .bg-img-2 {
background-image: url(../images/2.jpg);
}
.demo-2 .bg-img-3 {
background-image: url(../images/3.jpg);
}
.demo-2 .bg-img-4 {
background-image: url(../images/4.jpg);
}
.demo-2 .bg-img-5 {
background-image: url(../images/5.jpg);
}
/* Animations for content elements */
.sl-trans-elems .deco {
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2 {
-webkit-animation: moveUp 1s ease-in-out both;
-moz-animation: moveUp 1s ease-in-out both;
-o-animation: moveUp 1s ease-in-out both;
-ms-animation: moveUp 1s ease-in-out both;
animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote {
-webkit-animation: fadeIn 0.5s linear 0.5s both;
-moz-animation: fadeIn 0.5s linear 0.5s both;
-o-animation: fadeIn 0.5s linear 0.5s both;
-ms-animation: fadeIn 0.5s linear 0.5s both;
animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco {
-webkit-animation: scaleDown 1s ease-in-out both;
-moz-animation: scaleDown 1s ease-in-out both;
-o-animation: scaleDown 1s ease-in-out both;
-ms-animation: scaleDown 1s ease-in-out both;
animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2 {
-webkit-animation: fadeOut 1s ease-in-out both;
-moz-animation: fadeOut 1s ease-in-out both;
-o-animation: fadeOut 1s ease-in-out both;
-ms-animation: fadeOut 1s ease-in-out both;
animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote {
-webkit-animation: fadeOut 1s linear both;
-moz-animation: fadeOut 1s linear both;
-o-animation: fadeOut 1s linear both;
-ms-animation: fadeOut 1s linear both;
animation: fadeOut 1s linear both;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(500px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#-moz-keyframes roll {
0% {
-moz-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-moz-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-o-keyframes roll {
0% {
-o-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-o-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-ms-keyframes roll {
0% {
-ms-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-ms-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#keyframes roll {
0% {
transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(40px);
}
100% {
-webkit-transform: translateY(0px);
}
}
#-moz-keyframes moveUp {
0% {
-moz-transform: translateY(40px);
}
100% {
-moz-transform: translateY(0px);
}
}
#-o-keyframes moveUp {
0% {
-o-transform: translateY(40px);
}
100% {
-o-transform: translateY(0px);
}
}
#-ms-keyframes moveUp {
0% {
-ms-transform: translateY(40px);
}
100% {
-ms-transform: translateY(0px);
}
}
#keyframes moveUp {
0% {
transform: translateY(40px);
}
100% {
transform: translateY(0px);
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes scaleDown {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
}
}
#-moz-keyframes scaleDown {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(0.5);
}
}
#-o-keyframes scaleDown {
0% {
-o-transform: scale(1);
}
100% {
-o-transform: scale(0.5);
}
}
#-ms-keyframes scaleDown {
0% {
-ms-transform: scale(1);
}
100% {
-ms-transform: scale(0.5);
}
}
#keyframes scaleDown {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Media Queries for custom slider */
#media screen and (max-width: 660px) {
.demo-1 .deco {
width: 130px;
height: 130px;
margin-left: -65px;
margin-bottom: 50px;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
line-height: 22px;
font-size: 18px;
margin-bottom: -40px;
letter-spacing: 8px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
.demo-2 .sl-slider-wrapper {
height: 500px;
}
.demo-2 .sl-slider h2 {
font-size: 36px;
}
.demo-2 .sl-slider blockquote {
font-size: 16px;
}
}
/* ---------*/
<div class="main">
<section id="1" style="background-color:#111111; color:#ffffff;">Scroll down</section>
<section id="2" style="background-color:#222222;"> section 2</section>
<section id="3" style="background-color:#333333;"> section 3</section>
<section>
<div class="container demo-1">
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<section class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="deco" data-icon="H"></div>
<h2>A bene placito</h2>
<blockquote>
<p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="deco" data-icon="q"></div>
<h2>Regula aurea</h2>
<blockquote>
<p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="O"></div>
<h2>Dum spiro, spero</h2>
<blockquote>
<p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="I"></div>
<h2>Donna nobis pacem</h2>
<blockquote>
<p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="t"></div>
<h2>Acta Non Verba</h2>
<blockquote>
<p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite>
</blockquote>
</div>
</section>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
</div>
</section>
<section id="4" style="background-color:#444444;">section 4</section>
<section id="5" style="background-color:#555555;">section 5</section>
<section id="6" style="background-color:#666666;">section 6</section>
</div>
CodePen:https://codepen.io/mitul-patel-the-lessful/pen/eYMWLWL?editors=1111
I linked above my CodePen, if jQuery doesn't work.
Any little help is appreciated!

Disable scroll when you hover to #slider:
function disableScroll(e){
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
}
$('#slider').on('DOMMouseScroll mousewheel', disableScroll);
Then you should create an event to enable scroll when scroll to last slide.
$('#slider').off('DOMMouseScroll mousewheel', disableScroll);

how to populate the upper part of a semicircle?

so Im trying to make an interactive button that would be placed on the bottom of my screen and when clicked, a semicircle is created around it. this has buttons inside, so its kind of a navigation menu. Im now struggling with the math behind it. Right now, the buttons are distributed all around the circle, however i want them to only be placed in the upper part of my semicircle. This is the code i have so far:
var items = document.querySelectorAll('.menuItem');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
-transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255,255,255,0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>
the end would look something like this
button mockup

Both the top and left calculations need adjusting so there isn't so much movement:
var items = document.querySelectorAll('.menuItem');
for (var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35 * Math.cos(-0.125 * Math.PI - (1 / l) * i * Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35 * Math.sin(-0.125 * Math.PI - (1 / l) * i * Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault();
document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
position: relative;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>

The idea is make click on <a> tag to display dropdown menu items

I have a bootstrap menu that is working fine, you can see the code below, but I want to display the dropdown submenu when I clicked each item in the menu.
For example, if I click on the about us item it doesn't display anything, but when I click the plus sign on that item it displays the submenu.
Any suggest to figure out this functionality?
Thanks.
$(document).ready(function(){
if ($(window).width() < 980) {
// mobile menu
$('.hamburger').click(function (event) {
$(this).toggleClass('h-active');
$('.main-nav').toggleClass('slidenav');
});
$('.header-home .main-nav ul li a').click(function (event) {
$('.hamburger').removeClass('h-active');
$('.main-nav').removeClass('slidenav');
});
}
$(".main-nav .fl").on('click', function(event) {
var $fl = $(this);
$(this).parent().siblings().find('.submenu').slideUp();
$(this).parent().siblings().find('.fl').addClass('flaticon-plus').text("+");
if($fl.hasClass('flaticon-plus')){
$fl.removeClass('flaticon-plus').addClass('flaticon-minus').text("-");
}else{
$fl.removeClass('flaticon-minus').addClass('flaticon-plus').text("+");
}
$fl.next(".submenu").slideToggle();
});
});
.hamburger {
position: relative;
width: 40px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
float: right;
margin-top: 35px
}
.hamburger span {
width: 100%;
height: 2px;
background: #08509e;
display: block;
position: absolute;
right: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.hamburger span.h-top {
top: 0
}
.hamburger span.h-bottom {
bottom: 0;
width: 27px
}
.hamburger span.h-middle {
top: 50%;
margin-top: -1px;
width: 25px
}
.hamburger.h-active span {
width: 100%
}
.hamburger.h-active span.h-top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px
}
.hamburger.h-active span.h-middle {
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.hamburger.h-active span.h-bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px
}
.bottombar {
background-color: #08509e
}
.main-nav>ul {
padding: 0;
margin: 0;
list-style: none
}
.main-nav>ul>li {
display: inline-block;
position: relative;
margin-left: -4px;
padding-right: 15px
}
.main-nav>ul>li+li {
padding: 0 15px
}
.main-nav>ul>li>a {
text-transform: uppercase;
display: block;
text-decoration: none;
color: #000;
line-height: 45px;
font-size: 16px;
position: relative;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.main-nav>ul>li:hover>a {
color: #00b7d7
}
.submenu {
position: absolute;
left: 0;
top: auto;
right: 0;
min-width: 200px;
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
background: #fff;
border: 1px solid #f7f7f7;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
z-index: 9999;
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li {
display: block;
margin: 0 -15px
}
.submenu>li a {
display: block;
padding: 10px 15px;
color: #666;
line-height: 1;
font-size: 14px;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: #f7f7f7;
color: #08509e
}
.main-nav .fl {
width: 30px;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #fff;
font-style: normal;
position: absolute;
right: 5px;
top: 0;
z-index: 999;
display: none
}
.main-nav .fl:before {
font-size: 14px;
text-align: center;
line-height: 35px
}
.main-nav>ul>li+li .submenu {
left: 25px
}
.main-nav>ul>li:hover .submenu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
.content-block {
padding: 70px 0;
position: relative
}
.slideInUp {
visibility: hidden;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
-moz-transform: translate3d(0, 30px, 0);
-ms-transform: translate3d(0, 30px, 0);
-o-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out
}
.is-active .slideInUp {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slideInUp2 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
#media (min-width:980px) {
.hamburger {
display:none;
}
}
#media (max-width: 980px) {
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
padding: 20px;
z-index: 99999;
height: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform .3s ease-in;
-moz-transition: -moz-transform .3s ease-in;
-o-transition: -o-transform .3s ease-in;
transition: transform 0.3s ease-in
}
.main-nav.slidenav {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.main-nav>ul {
float: none
}
.main-nav>ul>li {
display: block;
padding: 0 !important;
margin-left: 0
}
.main-nav>ul>li>a {
font-size: 14px;
color: #fff;
line-height: 35px
}
.main-nav .fl {
display: block;
line-height: 35px
}
.submenu {
position: static;
min-width: 200px;
background: transparent;
border: none;
padding: 5px 15px 5px 25px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: none
}
.submenu>li a {
display: block;
padding: 10px 0;
color: #666;
line-height: 0.8;
font-size: 14px;
color: #ccc;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: transparent;
color: #08509e
}
.slideInUp {
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
<span class="h-top"></span>
<span class="h-middle"></span>
<span class="h-bottom"></span>
</a>
<nav class="main-nav">
<ul>
<li>
ABOUT US
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Mission Statement</li>
<li>Participating Dentists</li>
<li>Services</li>
</ul>
</li>
<li>
PATIENT
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Medical History Forms</li>
<li>Before Surgery</li>
<li>After Surgery</li>
<li>Children and Special Needs Adults</li>
<li>Privacy</li>
<li>Rights and Responsibilities</li>
<li>Financial Information</li>
</ul>
</li>
<li>
INFORMATION
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Privileging Criteria</li>
<li>Privileging Board Members</li>
<li>Request for Information</li>
</ul>
</li>
<li>MAP & DIRECTIONS</li>
<li>NEWS</li>
<li>EMPLOYMENT</li>
<li>CONTACT US</li>
</ul>
<div class="mob-login hidden-lg">
LOGIN
</div>
</nav>

One method is to display + / - as :after pseudo element:
$(document).ready(function(){
if ($(window).width() < 980) {
// mobile menu
$('.hamburger').click(function (event) {
$(this).toggleClass('h-active');
$('.main-nav').toggleClass('slidenav');
});
$('.header-home .main-nav ul li a').click(function (event) {
$('.hamburger').removeClass('h-active');
$('.main-nav').removeClass('slidenav');
});
}
$(".main-nav .fl").on('click', function(event) {
event.preventDefault();
var $fl = $(this);
$(this).parent().siblings().find('.submenu').slideUp();
/* begin change */
$(this).parent().siblings().find('.fl').removeClass('open');
if($fl.hasClass('open')){
$fl.removeClass('open');
}else{
$fl.addClass('open');
}
/* end change */
$fl.next(".submenu").slideToggle();
});
});
.hamburger {
position: relative;
width: 40px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
float: right;
margin-top: 35px
}
.hamburger span {
width: 100%;
height: 2px;
background: #08509e;
display: block;
position: absolute;
right: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.hamburger span.h-top {
top: 0
}
.hamburger span.h-bottom {
bottom: 0;
width: 27px
}
.hamburger span.h-middle {
top: 50%;
margin-top: -1px;
width: 25px
}
.hamburger.h-active span {
width: 100%
}
.hamburger.h-active span.h-top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px
}
.hamburger.h-active span.h-middle {
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.hamburger.h-active span.h-bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px
}
.bottombar {
background-color: #08509e
}
.main-nav>ul {
padding: 0;
margin: 0;
list-style: none
}
.main-nav>ul>li {
display: inline-block;
position: relative;
margin-left: -4px;
padding-right: 15px
}
.main-nav>ul>li+li {
padding: 0 15px
}
.main-nav>ul>li>a {
text-transform: uppercase;
display: block;
text-decoration: none;
color: #000;
line-height: 45px;
font-size: 16px;
position: relative;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.main-nav>ul>li:hover>a {
color: #00b7d7
}
.submenu {
position: absolute;
left: 0;
top: auto;
right: 0;
min-width: 200px;
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
background: #fff;
border: 1px solid #f7f7f7;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
z-index: 9999;
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li {
display: block;
margin: 0 -15px
}
.submenu>li a {
display: block;
padding: 10px 15px;
color: #666;
line-height: 1;
font-size: 14px;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: #f7f7f7;
color: #08509e
}
/* begin change */
.main-nav .fl:after {
content: "+";
width: 30px;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #fff;
font-style: normal;
position: absolute;
right: 5px;
top: 0;
z-index: 999;
display: none
}
.main-nav .fl.open:after {
content: "-";
}
/* end change */
.main-nav .fl:before {
font-size: 14px;
text-align: center;
line-height: 35px
}
.main-nav>ul>li+li .submenu {
left: 25px
}
.main-nav>ul>li:hover .submenu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
.content-block {
padding: 70px 0;
position: relative
}
.slideInUp {
visibility: hidden;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
-moz-transform: translate3d(0, 30px, 0);
-ms-transform: translate3d(0, 30px, 0);
-o-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out
}
.is-active .slideInUp {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slideInUp2 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
#media (min-width:980px) {
.hamburger {
display:none;
}
}
#media (max-width: 980px) {
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
padding: 20px;
z-index: 99999;
height: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform .3s ease-in;
-moz-transition: -moz-transform .3s ease-in;
-o-transition: -o-transform .3s ease-in;
transition: transform 0.3s ease-in
}
.main-nav.slidenav {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.main-nav>ul {
float: none
}
.main-nav>ul>li {
display: block;
padding: 0 !important;
margin-left: 0
}
.main-nav>ul>li>a {
font-size: 14px;
color: #fff;
line-height: 35px
}
.main-nav .fl:after {
display: block;
line-height: 35px
}
.submenu {
position: static;
min-width: 200px;
background: transparent;
border: none;
padding: 5px 15px 5px 25px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: none
}
.submenu>li a {
display: block;
padding: 10px 0;
color: #666;
line-height: 0.8;
font-size: 14px;
color: #ccc;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: transparent;
color: #08509e
}
.slideInUp {
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
<span class="h-top"></span>
<span class="h-middle"></span>
<span class="h-bottom"></span>
</a>
<nav class="main-nav">
<ul>
<li>
ABOUT US
<ul class="submenu">
<li>Mission Statement</li>
<li>Participating Dentists</li>
<li>Services</li>
</ul>
</li>
<li>
PATIENT
<ul class="submenu">
<li>Medical History Forms</li>
<li>Before Surgery</li>
<li>After Surgery</li>
<li>Children and Special Needs Adults</li>
<li>Privacy</li>
<li>Rights and Responsibilities</li>
<li>Financial Information</li>
</ul>
</li>
<li>
INFORMATION
<ul class="submenu">
<li>Privileging Criteria</li>
<li>Privileging Board Members</li>
<li>Request for Information</li>
</ul>
</li>
<li>MAP & DIRECTIONS</li>
<li>NEWS</li>
<li>EMPLOYMENT</li>
<li>CONTACT US</li>
</ul>
<div class="mob-login hidden-lg">
LOGIN
</div>
</nav>

Toggle Element Colour Based on Background Colour in JS

I've written some JavaScript code that almost works the way I want it to, but I need some help figuring out how to make it work the way I need it to.
I want to change the colour of a fixed navigation element (hamburger) when it encounters a section with the class of white.Right now this is accomplished by adding a class of darker to that nav element.
What I can't figure out is how to have the darker class removed when I scroll past an element that no longer has the class of white. Any help is much appreciated!
Thanks in advance! :)
Code pen demo
The code is as follows: (Maybe not showing as expected here in SO, better in Codepen)
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('.white').offset().top;
if (y >= z) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
//Variables
$grey-darker: hsl(0, 0%, 21%);
$grey: hsl(0, 0%, 48%);
$white: hsl(0, 0%, 100%);
$bold: 900;
//Formatting
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
letter-spacing: -1.5px;
}
h1 {
color: $white;
font-size: 7em;
font-weight: $bold;
}
//Navigation/
.navigation {
display:flex;
vertical-align:top;
width: 100%;
height: 76px;
position: fixed;
}
//Hamburger --> This should change from white & blue depending on background color
#hamburger {
width: 30px;
height: 20px;
margin-left: auto;
align-self: center;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
cursor: pointer;
z-index: 5;
}
#hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
}
#hamburger span.change.darker{
background: Blue;
}
#hamburger span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(2) {
top: 6px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(3) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger.open span:nth-child(1) {
background:white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 5px;
}
#hamburger.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#hamburger.open span:nth-child(3) {
background:white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 5px;
}
//Main
.container-fullpage {
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100vw;
}
.sectionOne {
background: blue;
}
.sectionTwo{
color: blue;
background: $white;
}
.sectionTwo h1 {
color: blue;
}
.sectionThree{
background: blue;
}
.sectionFour{
background: $white;
}
.sectionFour h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<nav class="navigation">
<div class="hamburger" id="hamburger">
<span class="change"></span>
<span class="change"></span>
<span class="change"></span>
</div>
</nav>
</header>
<main>
<div class="container-fullpage sectionOne">
<h1 class="home">First Section</h1>
</div>
<div class="container-fullpage sectionTwo white">
<h1>Second Section</h1>
</div>
<div class="container-fullpage sectionThree">
<h1>Third Section</h1>
</div>
<div class="container-fullpage sectionFour white">
<h1>Fourth Section</h1>
</div>
</main>

I think this is the javascript code that will do what you want:
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var top1 = change.offset().top;
var bottom1 = change.offset().top + change.outerHeight(true);
var overlapsWhite = false;
$('.white').each(function() {
var top2 = $(this).offset().top;
var bottom2 = $(this).offset().top + $(this).outerHeight(true);
if (top1 >= top2 && bottom2 >= bottom1){
overlapsWhite = true;
return false;
}
});
if (overlapsWhite) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
Check on Code pen

HTML, JS & CSS - How to set the position/display of the divs

I need help. I've made a first div(label:width) and 2nd div(input:width). They are inside of another div(control0). Same for div(control1, label:spacing, input:border).
What I want to achieve is place a label div next to the 2nd one. After clicking on the first one, the 2nd will move to the right and make a place for the range:input.
After clicking on the div again, the range:input with hide, and the 2nd div will be again close the 1st one.
I was trying to do it with flex, grid, inline-block etc. But there must be something messy with my code.
var widthButton = document.getElementById('label_box_width');
var inputBoxWidth = document.getElementById('input_box_width');
var inputBoxWidth2 = document.getElementById('input_box_width2');
var borderButton = document.getElementById('label_box_width2');
var inputBoxBorder = document.getElementById('control0').lastElementChild;
function showWidthRange() {
this.nextElementSibling.classList.toggle('widthAnimationToogleClass');
this.nextElementSibling.classList.toggle('widthRange');
};
function showWidthRange2() {
this.nextElementSibling.classList.toggle('widthAnimationToogleClass');
this.nextElementSibling.classList.toggle('widthRange');
};
widthButton.addEventListener('click', showWidthRange);
borderButton.addEventListener('click', showWidthRange2);
.divContainer {
-webkit-filter:url('#goo');
filter:url('#goo');
position:absolute;
top:100px;
left:25px;
}
#control0 {
width: 200px;
padding: 10px;
height: 60px;
position: relative;
/* overflow: hidden;*/
/* background-color: lightblue;*/
}
#control1 {
/* overflow: hidden;*/
padding: 10px;
width: 200px;
height: 60px;
position: relative;
/*background-color: lightblue;*/
}
#label_box_width,
#label_box_width2 {
margin: 3px;
width: 50px;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
font-size: 13px;
font-family: helvetica;
background-color: black;
border-radius: 25px;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
-webkit-animation: blop_label_box_width cubic-bezier(0.770, 0.000, 0.175, 1.000) 3s infinite;
animation: blop_label_box_width cubic-bezier(0.770, 0.000, 0.175, 1.000) 3s infinite;
}
#-webkit-keyframes blop_label_box_width {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
background-color: black;
}
}
#keyframes blop_label_box_width {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
background-color: black;
}
}
#label_box_width:hover,
#label_box_width2:hover{
background-color: darkorange;
}
#input_box_width,
#input_box_width2{
margin: 13px 12px 12px 53.5px;
border-radius: 25px;
height: 31px;
line-height: 25px;
background-color: black;
overflow: hidden;
position: absolute;
top: 10px;
}
.widthAnimationToogleClass {
-webkit-animation: blop_label_width cubic-bezier(0.570, 0.000, 0.275, 1.000) 2.5s forwards;
animation: blop_label_width cubic-bezier(0.570, 0.000, 0.275, 1.000) 2.5s forwards;
}
[class$="inputTest"]{
visibility: hidden;
}
.widthRange {
visibility: hidden;
}
#-webkit-keyframes blop_label_width {
0% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
66% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
75%{
opacity: 1;
-webkit-transform: rotate3d(360deg);
transform: rotate3d(360deg);
}
90% {
width:80px;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
95% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
}
#keyframes blop_label_width {
0% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
66% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
75%{
opacity: 1;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
90% {
width:80px;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
95% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
}
input[type=range] {
-webkit-appearance: none;
margin: 0px 2px 2px 8%;
width: 80%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4.0px;
cursor: pointer;
animate: 0.2s;
-webkit-box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: url(im/space.jpg);
background-size: cover;
}
input[type=range]::-webkit-slider-thumb {
-webkit-box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
height: 15px;
width: 15px;
border-radius: 150%;
background: url(im/thesun.jpg);
background-size: cover;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: url(im/sky.jpg);
background-size: cover;
}
<!doctype html>
<html>
<head>
<title>WebTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js" async></script>
</head>
<body>
<!-- INPUT DATA-->
<!--1st object-->
<div class="divContainer">
<div id="control0" class="changeBox">
<div id="label_box_width">
width
</div>
<div id="input_box_width" class="widthRange">
<input type="range" name="width" min="50" max="500" value="100" data-sizing="px">
</div>
</div>
<!--2nd object-->
<div id="control1" class="changeBox">
<div id="label_box_width2">
spacing
</div>
<div id="input_box_width2" class="widthRange">
<input type="range" name="spacing" min="0" max="20" value="10" data-sizing="px">
</div>
</div>
</div>
<!-- SVG--------------------------------------------- -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
</body>
</html>