Develop Reference

Click function never reading else statement to remove class

I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.

Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}

relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});

How to have an inset box-shadow start from the center rather than the border?

I currently have a box shadow stemming from the border of my <img> and I'm looking for a way to have the effect inversed, where the shadow starts from the center and fills out the rest of the background.
Pen
CODE:
var medalImg = document.getElementById("benefitsImgMed");
document.getElementById("benefitsImgMed").onclick = function() {
imgClickFunction1()
};
function imgClickFunction1() {
medalImg.style.boxShadow = "0px 0px 0px 100px white inset";
setTimeout(doSomething, 1.6 /*Seconds*/ * 1000);
function doSomething() {
/*medalImg.style.borderStyle = "solid";*/
}
}
body {
background-color: black;
}
#benefitsImgMed,
#benefitsImgLig,
#benefitsImgArr,
#benefitsImgNig {
transition: 2s;
cursor: pointer;
z-index: 1;
position: absolute;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
}
#benefitsImgMed:hover {
box-shadow: inset 0 0 0 50px white;
}
#benefitsImgMed {
margin-left: 8%;
margin-top: 6%;
width: 13%;
height: 13%;
}
<div class="benefitImgs">
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9
140b7f3b7d84274/1510600813361/quality.png" id="benefitsImgMed" />
</div>

I looked over you code an changed a couple things. It seems like you may have some repetitive code by looking at them by id's. So instead I implemented a custom attribute to help us to keep track of which one was clicked. Additionally, I added an element on the inside that has very small width and height that draws a box-shadow outward. Go ahead and give it a whirl:
function doSomething() {
console.log('do something...')
}
$(".benefitImgs").click(function () {
var which = $(this).attr('data-which');
if (which === "med") {
$(this).find(".benefitImgsInner").css("box-shadow", "0px 0px 0px 55px white")
setTimeout(doSomething.bind(this),1.6*1000);
}
});
body{background-color:black;}
.benefitImgs {
width: 13%;
position: relative;
margin-left: 8%;
margin-top: 6%;
transition: 2s;
cursor:pointer;
z-index:1;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
}
.benefitImgsInner {
z-index:-1;
width:2px;
height:2px;
border-radius:50%;
position:absolute;
top: 50%;
left: 50%;
transition:all 2s ease-in-out;
transform: translate(-50%, -50%);
}
.benefitImgs:hover .benefitImgsInner {
transition:all 2s ease-in-out;
box-shadow: 0 0 0 50px white;
}
.benefitsImgsImg {
max-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="benefitImgs" data-which="med">
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgsImg"/>
<div class="benefitImgsInner"></div>
</div>

Try this solution:
Note: I've dumbed it down substantially.
body{background-color:black;}
#benefitImgMed {
transition: 2s;
width: 200px;
height: 200px;
cursor:pointer;
z-index:1;
position: absolute;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
overflow: hidden;
}
#benefitImgMed:after{
content: "";
position: absolute;
height: 0%;
width: 0%;
background: white;
opacity: 0;
top: 50%;
left: 50%;
border-radius: 100%;
transition: all 1s;
}
#benefitImgMed:hover::after{
background: white;
height: 100%;
width: 100%;
opacity: 1;
top: 0px;
left: 0px;
}
<div id="benefitImgMed">
</div>

Circles on start and end of range slider

i want to make a range slider with some design in it. I have no idea how to stylize the input. http://prntscr.com/ebyoev like this one
The thing i want to do is, i dont know how to implement the circles on the start and end of the range slider and how to stylize the current circle range
https://jsfiddle.net/agghvm9t/ this is the fiddle
This is how far i have come
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
</div>
This is my css
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
THis is my jquery
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();

I'd approach this with using pseudo elements. You can have one :before and one :after pseudo element and since you only need two - one at the beginning and one at the end, it might just work:
.range-slider {
position:relative;
}
.range-slider:before {
content: "";
position: absolute;
left: 0;
background-image: url("circle-image");
width: 25px;
height: 25px;
}
.range-slider:after {
content: "";
position: absolute;
right: 0;
background-image: url("circle-image");
width: 25px;
height: 25px;
}
To style the sliding circle, you can try something like this:
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: orange;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
border: 1px solid orange;
box-shadow: inset 0 0 0 6px #fff;
}

Keyframes or JScript for dropdown menu

My code below:
function dropright() {
var pos = 0;
var menu = document.getElementById("menuBar");
var t = setInterval(move, 10);
function move() {
if (pos >= 75) {
clearInterval(t);
} else {
pos += 1;
menu.style.left = pos + "px";
}
}
};
* {
margin: 0px;
}
#container {
width: 150px;
height: 600px;
left: -75px;
position: relative;
}
#menuBar {
width: 150px;
height: 100%;
position: absolute;
float: left;
background-color: red;
}
<body>
<div id="container" onclick="dropright()">
<div id="menuBar"></div>
</div>
</body>
I would like to make my menubar appear from left on container click. Also I would like to make it disappear the same way. But this does nothing. Should I use JS for this or keyframes?

I would do this way:
Add a class to open.
Use transitions, not keyframes.
Snippet
$(function() {
$(".dropRight").click(function(e) {
e.preventDefault();
$("#menuBar").toggleClass("open");
});
});
* {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
text-decoration: none;
font-family: 'Segoe UI';
}
.dropRight {
display: inline-block;
padding: 5px 8px;
border: 1px solid #ccc;
color: #333;
border-radius: 5px;
padding-bottom: 7px;
float: right;
margin-right: 25px;
margin-top: 25px;
}
#menuBar {
position: fixed;
top: 25px;
left: -200px;
width: 200px;
bottom: 0;
background-color: #ccf;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menuBar.open {
left: 0;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="container">
Open
<div id="menuBar"></div>
</div>
I have added a Open which can be used to Open or Close. :)

I would suggest you to add a click listener to the element and by clicking it, adding a class. The animation can be made with CSS.
document.getElementById('container').addEventListener('click', function() {
if(this.className === 'shown') {
this.className = '';
} else {
this.className = 'shown';
}
});
* {
margin: 0px;
}
#container {
width: 150px;
height: 300px;
left: -75px;
position: relative;
background: red;
transition: 0.3s ease left;
cursor: pointer;
}
#container.shown {
left: 0;
}
<div id="container"></div>

Positions of buttons change after being clicked

Hi, I made a leftmenu that hides on a button click and shows on another button's click. When I click the ".smaller" button, the leftmenu's width changes to 0px and the ".bigger" button appears. But when I click this button somehow the position of the ".smaller" button is changed to another location.
HTML:
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftmenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Ideas</li>
<li>Video</li>
<li>Contact</li>
</ul>
<div class="smaller"></div>
<div class="bigger"></div>
</div><!--leftmenu end-->
<div id="content">
</div>
</div><!--container end-->
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
background-color: #c8c8c8;
}
html{
background-color: #c8c8c8;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
#container{
width: 100%;
height: 2000px;
}
#leftmenu{
position: fixed;
width: 200px;
height: 100%;
background: #b99d84;
transition: .5s ease-out;
-webkit-transition: .5s ease-out;
margin: 0;
padding: 0;
}
#leftmenu:hover{
transition: .5s ease-in;
-webkit-transition: .5s ease-in;
background: #a2805e;
}
#leftmenu ul{
width: 100%;
height: 100%;
padding: 0;
text-align: center;
margin-top: 50px;
}
#leftmenu ul li{
width: 100%;
height: 50px;
margin-bottom: 50px;
vertical-align: middle;
}
#leftmenu ul li a{
color: white;
font-size: 25px;
}
#leftmenu ul li a:hover{
transition: 0.1s ease-in;
text-shadow: 0 0 12px white;
}
.smaller{
position: fixed;
top: 22%;
left: 0;
width: 0;
height: 0;
border-top: 120px solid transparent;
border-right: 30px solid white;
opacity: .75;
border-bottom: 120px solid transparent;
transition: .5s ease-out;
-webkit-transition: .5s ease-out;
}
.bigger{
position: fixed;
top: 22%;
left: 0;
border-top: 120px solid transparent;
border-left: 30px solid white;
border-bottom: 120px solid transparent;
display: none;
}
#content{
width: 60%;
height: 100%;
background: #d7d7d7;
margin: 0 20%;
border-left: 1px solid gray;
border-right: 1px solid gray;
}
JQUERY:
$(document).ready(function(){
$(".smaller").click(function(){
$("#leftmenu").css("width", "0px");
$("#leftmenu ul").fadeOut();
$(".smaller").hide();
$(".bigger").show();
//content widths and margins
$("#content").css("width", "80%");
$(this).css("width", "80%");
$("#content").css("margin", "0 auto");
$(this).css("margin", "0 auto");
});//smaller.click end
$(".bigger").click(function(){
$(".bigger").hide();
$(".smaller").show();
$("#leftmenu").css("width", "200px");
$("#leftmenu ul").fadeIn();
});//bigger.click end
$("#content").css("width", "60%");
$(this).css("width", "60%");
$("#content").css("margin", "0 20%");
$(this).css("margin", "0 20%");
});
Thanks a lot, if anybody could find the answer, I've been stuck on this for a long time..

Line 12 in your javascript change $(this).css("width", "80%"); to $(this).css("width", "0%");.