Develop Reference

Why isn't my black overlay appearing when button is clicked?

I am trying to create a pop-up window myself. I want my pop-up box to appear when the button is pressed and everything below to get darkened. However, when I press my button whole page hangs and no popup appears also.
If I remove the div which turns everything background black, my popup is working fine.
Here is my html code which has script tags inside
let visible = false;
$('#showBox').on('click', function(params) {
if (visible) {
$('.box').removeClass('boxVisible');
$('.blackenBackground').removeClass('boxVisible');
visible = false;
} else {
$('.box').addClass('boxVisible');
$('.blackenBackground').addClass('boxVisible');
visible = true;
}
})
.box {
background: pink;
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
border-radius: 1%;
opacity: 0;
transition: 0.4s;
transition-timing-function: ease-out;
}
.boxVisible {
opacity: 1;
}
.blackenBackground {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: black;
opacity: 0;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....
</p>
<button id="showBox">Show Box</button>
<!-- When I remove this popup box works perfectly but background isn't darkening and my page hangs -->
<div class="blackenBackground"></div>

Your fixed position div is blocking mouse events. The opacity is 0 but the box is still technically visible, which catches the click and prevents the button from getting clicked.
Just make sure the box is completely hidden and it should work.
let visible = false;
$('#showBox').on('click', function (params) {
if(visible){
$('.box').removeClass('boxVisible');
$('.blackenBackground').removeClass('boxVisible');
visible = false;
}else{
$('.box').addClass('boxVisible');
$('.blackenBackground').addClass('boxVisible');
visible = true;
}
})
.box{
background: pink;
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
border-radius: 1%;
opacity: 0;
transition: 0.4s;
transition-timing-function: ease-out;
}
.boxVisible{
opacity: 1;
display: block;
}
.blackenBackground{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: black;
opacity: 0;
display: none;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....</p>
<button id="showBox">Show Box</button>
<div class="blackenBackground"></div>

Did you want something like this? I added an id element to the div and changed you addclass call in your Jquery to document.getElementById('dimmer').style.display= 'none / block' in your if-else statements and changed the .css class to
.blackenBackground{
pointer-events: none;
background:#000;
opacity:0.5;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
jsFiddle: https://jsfiddle.net/j0d8emsc/

changing the color of hamburger icon in a responsive sticky nav bar

I'm trying to change the color of a hamburger menu in a sticky nav for a responsive website.
At the moment, the nav bar and menus are styled and toggled with css and js.
Everything thing works fine, but recently i've had to make some changes and have run into this problem.
This is how it works;
- the nav bar sticks to the top of the screen and changes color on scroll.
- On narrow width screens, some js hides the menu text links and toggles a hamburger menu.
- on clicking the hamburger menu, an overlay menu is toggled
The problem i'm having is I've changed the background color of the sticky menu bar on scroll - but I can't see how to change the color of the hamburger icon on scroll.
here's what I have...
<!-- Script Sticky Menu -->
<script type="text/javascript">
window.addEventListener("scroll", function(){
if(window.pageYOffset > 50){
document.getElementById("main-nav").className = "scrolling";
} else {
document.getElementById("main-nav").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("nav-page-section").className = "scrolling";
} else {
document.getElementById("nav-page-section").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("vb-logo-mobile").className = "scrolling";
} else {
document.getElementById("vb-logo-mobile").className = "";
}
})
</script>
Inside "nav-page-section" is a container for the hamburger button...
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
This css styles the button_container...
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
Initially, i added an additional line to the script...
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container").className = "scrolling";
} else {
document.getElementsByClassName("button_container").className = "";
}
And added this css styling...
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
But that hasn't worked. I searched around for a way to target a specific tag ('span') within a classname ('button_container') but didn't find anything.
I keep looking at the span tag and thinking that's what's tripping me up - but i've tried many different variations of the script and nothing seems to work. When i add [0] after the classname - ('button_container')[0] - the hamburger menu disappears.
Anyone have any ideas?
Thanks.
Here is the full CSS and HTML...
/* 7. Main Menu - Hamburger */
/* icon+overlay */
.overlay-menu ul li a {
display: inline-block;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 20px;
font-family: 'HurmeGeometricSans1';
font-weight: 200;
overflow: hidden;
top: 5px;
}
.overlay-menu ul li a:after {
content: '';
position: absolute;
background: #E4002B;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.overlay-menu ul li a:hover:after, .overlay-menu ul li a:focus:after, .overlay-menu ul li a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 18px;
right: 18px;
height: 26px;
width: 30px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
<!-- start Hamburger Menu & Overlay Menu -->
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>V:WEAR</li>
<li>V:GEAR</li>
<li>V:MECHS</li>
<li>V:RDAS</li>
<li>V:LIQUID</li>
</ul>
</nav>
</div>
<!-- end Hamburger Menu & Overlay Menu -->

As far as I understand the spans in the button_container are the bars of the hamburger menu. So, to change color on scroll, I would say:
.scrolling .button_container span {
background-color: red;
}
Replace red with the preferred color.

document.getElementsByClassName("button_container").className
won't work since
document.getElementsByClassName("button_container")
is an array, and you have to iterate the array and assign to element you want.
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container")[0].className = "scrolling";
} else {
document.getElementsByClassName("button_container")[0].className = "";
}

Sticky Header Flickering on Safari Desktop Only When Anchor Scrolling

I've built a website in Adobe Muse which has a sticky header that appears when scrolling past the logo. This works perfectly on Chrome and Firefox, even on iPad Safari, however, it does not work well on desktop Safari and flickers badly when clicking an anchor link which smoothly scrolls to the anchor.
Please see the example website below:
http://mattstest03.businesscatalyst.com/index.html
When clicking 'Contact Us' on Firefox/Chrome, the sticky header will look great throughout the smooth scroll. On Safari, it flickers on/off during the scrolling. Here's a GIF of the flickering effect:
Here's my code:
CSS
#sticky-bar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 53px;
background: transparent url("assets/photoshop-eclipse.jpg") repeat left top;
}
/* Circle Logo */
#u73837 {
width: 57px;
transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-webkit-transition: width 0.4s, height 0.4s;
}
/* Text Logo */
#u56099 {
width: 229px;
transition: all 0.4s !important;
-moz-transition: all 0.4s !important;
-webkit-transition: all 0.4s !important;
}
/* Sticky Contact Us */
.sticky-contact {
position: fixed !important;
top: 9px !important;
left: -160px !important;
padding-bottom: 4px !important;
margin-top: 0 !important;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.sticky-contact:before {
content: "We'd love to talk";
position: absolute;
left: calc(-100% - 30px);
top: 8px;
color: #eee;
font-family: 'Raleway', 'Open Sans';
font-size: 17px;
}
.contact-inner {
margin-top: 4px !important;
font-size: 17px !important;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/* Circle Logo Transition */
.smaller-logo {
position: fixed !important;
top: 7px !important;
width: 40px !important;
height: 40px !important;
}
/* Normal Circle Logo */
.normal-logo {
width: 57px;
height: 57px;
}
/* Smaller Text */
.smaller-text {
width: 0 !important;
}
JavaScript
var width = window.innerWidth;
if (width > 1000) {
if (jQuery(window).scrollTop() > (jQuery('#u106240').offset().top - 15)) {
// Fade in sticky bar
jQuery('#sticky-bar').css('display', 'block');
// Re-position 'Contact Us'
jQuery('#buttonu206').addClass('sticky-contact');
jQuery('#u200-4').addClass('contact-inner');
// Hide logo text
jQuery('#u56099').css('display', 'none');
// Animate circle logo (CSS)
jQuery('#u73837').removeClass('normal-logo');
jQuery('#u73837').addClass('smaller-logo');
} else {
// Fade out sticky bar
jQuery('#sticky-bar').css('display', 'none');
// Re-position 'Contact Us'
jQuery('#buttonu206').removeClass('sticky-contact');
jQuery('#u200-4').removeClass('contact-inner');
// Show logo text
jQuery('#u56099').css('display', 'initial');
// Animate circle logo (CSS)
jQuery('#u73837').removeClass('smaller-logo');
jQuery('#u73837').addClass('normal-logo');
}
}
Please note, this isn't anything to do with the scrolling section of the JavaScript code (line 4) as I have removed this for testing and the issue persists.
I have tried a couple of CSS "fixes" on the sticky-bar ID such as -webkit-transform: translate3d(0,0,0) and -webkit-translateZ(0) but I've not had any luck. Could anybody please offer insight? Thank you.

position: fixed does not work well in ios is a know issue. Seem like it is not fixed till now. Setting translate3d(0,0,0) for element is a walk around but it is not perfect. It is still weird when you scroll. So my advice is using position: absolute instead. Just move your bar out of your content container, then give it position: absolute. See the code snipet below:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.fixed-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #123;
color: #FFF;
text-align: center;
line-height: 50px;
z-index: 1;
}
.content {
background-color: #ddd;
color: #333;
width: 100%;
padding-top: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.item {
width: 100%;
text-align: center;
height: 200px;
height: 30vh;
padding-top: 10vh;
}
<div class="fixed-bar">
I am a fixed bar
</div>
<div class="content">
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
</div>

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?

Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle

Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>

I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps

Css transform animation from right to left

I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE

Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.

Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});

Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});