We Keep Coding

How can i make whole screen semi-black on sidebar open?

I have build sidebar with css and jquery. It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.
Here is my working
jsFiddle
How can i make whole screen semi-black or disabled on sidebar open?

You can use a box-shadow on the sidebar:
#sidebar{
box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}
This is black, at .50 opacity. It's set to 10000px to cover the full screen.
Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.
In your case add to your css:
#slide-out.visible:not(.close){
box-shadow:0 0 0 10000px #666666;
}

The general concept to achieve this is fairly straightforward:
Modify the javascript to add a class to the body when the nav is open (I called it nav-open.)
Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there, but was not visible).
Here's the relevant CSS:
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
// removed opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
// set display to none by default
display: none;
}
// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
display: block;
}
Here's the relevant changes to your javascript:
// no-conflict-safe document ready function
jQuery(function($) {
$('#show-hide-menu').click(function() {
if ($('#slide-out').hasClass('visible')) {
// $('#slide-out').removeClass('visible');
$('#slide-out').toggleClass('close');
} else {
$('#slide-out').addClass('visible');
}
// check if the nav is "open"
var open = !$('#slide-out').hasClass('close');
// for simplicity, always first remove the nav-open from the body
$('body').removeClass('nav-open');
// if the nav is open, add the 'nav-open' class to the body
if (open) {
$('body').addClass('nav-open');
}
});
// modify to use "on", is best-practice
// $(document).click(function(e) {
$(document).on('click', function(e) {
var sidebar = $(".sidenav, #show-hide-menu");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#slide-out').toggleClass('close');
// be sure the nav-open class is removed when the sidebar is dismissed
$('body').removeClass('nav-open');
}
});
});
Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/

Make a content div below your nav. Something like:
<div id="maincontent" class="">
<p>Lorem.</p>
</div>
Add some styling so it has min-height, etc.
#maincontent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
min-height: 400px;
}
Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.
$('#show-hide-menu').click(function () {
if ($("div#maincontent").hasClass("overlayed")) {
$("div#maincontent").removeClass("overlayed");
}
else {
$("div#maincontent").addClass("overlayed");
}
});
Define the overlayed class in the CSS.
.overlayed {
background-color: rgba(0,0,0,.8);
}

Slide one div over two div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have two div . div-1 and div-2 .it need to stay all the time but i want some menu items using another div name div-3 which is visible when button clicks. i want div-3 over div-1 and div-2 at the same time .how can i do that ?

JavaScript Notes
An IIFE is a very common design pattern in JavaScript commonly used to hide your code so that it doesn't get changed by other scripts.
You can add event listeners to elements using the addEventListner function.
You can get an HTMLElement using the querySelector function which accepts a selector. So to get the first div you could use document.querySelector("div"). To get the element with id "item" you can use document.querySelector("#item"). To get the first element element with class "active" you can use document.querySelector(".active"). You can also use document.querySelector("div#item.active") to get the item the fills all the previous requirements or document.querySelector("div, #item, .active") to get the item that fills any of the requirements. As you can see this works the same as CSS selectors.
To check if a variable is an instance of a Class you can use instanceof.
There are several ways to change how an Element looks using JavaScript.
One is to change the class name element.className = "active", another is to directly change the styling element.style = "opacity: 1;".
Styling Notes
To position an element on top of other elements you need to set its position to absolute and the container's element to relative. When you absolutely position an element then its positioned relatively to the last container that is positioned relatively (default is <html> element).
There are 2 main ways to position elements next to each other: float: left; and display: inline-block;. This works like writing on a notepad, it fits as many elements on next to each other and the repeats the same process below them.
There are 3 common ways to hide an element. 1: opacity: 0; which just makes the item invisible but it it's still there so you should probably also use pointer-events: none; so that it doesn't stop you from clicking what's behind it. 2: height: 0; This just shrinks the element so that it has no height which essentially makes it invisible. 3: display: block; this essentially completely removes the element.
Example
// IIFE Design Pattern
(function() {
// Run onLoad function if page is fully loaded
if (document.readystate === "complete") onLoad();
// Else add an event listener to call onLoad function when page gets fully loaded
else document.addEventListener("DOMContentLoaded", onLoad);
var divIsActive = false;
/**
* Function to be called when page is fully rendered
* #returns {void}
*/
function onLoad() {
// Find button
var button = document.querySelector("#toggle");
// Check if the button was found
if (button instanceof HTMLElement) {
// Add an click event listener
button.addEventListener("click", toggle);
}
}
/**
* Toggles the div to open/close
* #returns {void}
*/
function toggle() {
// Find Div
var div = document.querySelector("#div-3");
// Check if the div was found
if (div instanceof HTMLElement) {
// swap the boolean value
divIsActive = !divIsActive;
// change the classname based on the boolean value
div.className = divIsActive ? "active" : "";
}
}
})();
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
}
#div-1, #div-2 {
height: 100%;
float: left;
width: 50%;
}
#div-1 {
background-color: brown;
}
#div-2 {
background-color: pink;
}
#div-3 {
background-color: green;
pointer-events: none;
transition: all 0.4s;
position: absolute;
height: 40%;
opacity: 0;
right: 0;
left: 0;
top: 0;
}
#div-3.active {
pointer-events: all;
opacity: 1;
}
#toggle {
position: absolute;
cursor: pointer;
z-index: 99999;
right: 10px;
top: 10px;
}
<div id="container">
<button id="toggle">Toggle</button>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
</div>

Change font color on scroll based on a div

I am currently coding a simple MENU button that is fixed in the top right of the screen.
With the text it is normally Black, but I want to be able to change the text to White when it is within a certain Div on a page so it is still visible on the dark background images.
I had set up two .CSS classes and tried to get them to switch on scroll but I cannot figure it out.
Anyone know how I can achieve this result?
HTML
<div class="NavigationButton menu_white">
MENU
</div>
CSS
.NavigationButton {
position: fixed;
top: 5%;
right: 5%;
z-index: 99999;
font-family: neuzeit-grotesk, sans-serif;
font-weight: 700;
color: inherit;
}
.menu_white {
color: #fff;
}
.menu_black {
color: #000;
}
(Not My Site) Example site: http://flavinsky.com/home/amaio
Just without the snap scroll
Thanks

You can use jQuery to get the scroll position and toggle the classes based on where the dark background element is. Here is an example
$(document).ready(function(){
$(window).scroll(function(){
var light_pos = $('#white_div').offset().top;
var light_height = $('#white_div').height();
var menu_pos = $('.NavigationButton').offset().top;
var scroll = $(window).scrollTop();
if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
$('.NavigationButton').addClass('menu_black');
$('.NavigationButton').removeClass('menu_white');
}
else {
$('.NavigationButton').removeClass('menu_black');
$('.NavigationButton').addClass('menu_white');
}
})
})
and here is a working fiddle https://jsfiddle.net/atqkuwhs/

A possible solution is to get the offset of the div and the menu from the top of the page and apply your wanted changes once they intersect.

Change background color of div using conditional statement

I have 2 divs side by side and by default one is hidden and one is visible.
I have a jQuery function which, when mouseenter the visible div, the hidden one shows. And when mouseenter again, it becomes hidden again. (This is for a login box)
However - I want the always visible div (the mouseenter target) to change color depending on what state the toggled div is in. So far, I can get it to change color upon first mouseenter but it won't change again after that.
Here is the code I have so far:
<script>
$(document).ready(function () {
$("#loginBox").hide();
$("#sideBar").show();
$('#sideBar').mouseenter(function () {
$("#loginBox").toggle("slide");
if ($('#loginBox').is(":visible")) {
$("#sideBar").css("background-color","blue");
} else if ($('#loginBox').is(":hidden")) {
$("#sideBar").css("background-color","yellow");
}
});
});
</script>
So it starts off in its default color (grey by the style sheet) and when mouseenters it loginBox becomes visible and the sideBar turns blue. But when mouseenters again, even though loginBox becomes hidden, the sideBar remains blue.
JSFiddle

You can put the check in the complete function of toggle
$(document).ready(function() {
$("#aside").hide();
$("#asidebar").show();
$('#asidebar').mouseenter(function() {
$("#aside").toggle("slide", function() {
var onOrOff = $('#asidebar').css("background-color");
if ($('#aside').is(":visible")) {
$("#asidebar").css("background-color", "blue");
} else if ($('#aside').is(":hidden")) {
$("#asidebar").css("background-color", "yellow");
}
});
});
});
#asidebar {
float: right;
/* top: -205px; */
position: relative;
/*
Editing purposes */
background-color: rgba(120, 120, 120, 0.5);
width: 25px;
/*min height of container */
height: 400px;
margin: 5px;
padding: 1px;
font-family: helvetica;
}
#aside {
float: right;
/* top: -205px; */
position: relative;
/*
Editing purposes
background-color: blue; */
width: 250px;
border-left-style: dashed;
border-color: rgba(120, 120, 120, 0.5);
/*min height of container */
margin: 5px;
padding: 0;
font-family: helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="asidebar">Mouse Over</div>
<div id='aside'>Slide box</div>

You are better off putting the styles on a class and toggling that instead. Something like
...
$('#sideBar').mouseenter(function () {
$("#loginBox").toggle("slide");
$("#sideBar").addClass("semanticallyNamedClassForBlue");
$("#sideBar").toggleClass("semanticallyNamedClassForYellow");
});
...
CSS:
#sideBar.semanticallyNamedClassForBlue {background: blue}
#sideBar.semanticallyNamedClassForYellow {background: yellow}
as per this jsfiddle adapted from user3787555's http://jsfiddle.net/3rQNb/3/
Explanation:
On load the sidebar is grey.
on first hover both the yellow and blue classes are added to the element, but as the yellow class is last in the css source, it wins the cascade.
on next hover, the yellow class is removed, so the blue now wins.
I added the id to the css rule to get the specificity up enough - as you know a #id beats a .class in the cascade
If you want to learn more, A List Apart's CSS articles and Remy Sharp's JQuery for designers may give you some joy. If you want to learn more on specificity look at star wars specificity super awesome

How do I include an element's margin in the hot-spot for jQuery's hover() event?

jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { width: 100px; height: 100px; margin: 50px; }
The code above doesn't react to mouse over of margin (margin isn't a part of element?) - how can I change that?

You could use a 50px transparent border instead - the margin isn't really supposed to be mouseable...

Include a pseudo element, e.g.
.my_container:before {
content:'';
position:absolute;
top:-50px;
bottom:-50px;
left:-50px;
right:-50px;
}
This adds an extra 50px to the existing element's clickable area.
If you only want to add this on touch screen devices, you could do this:
.touchevents .my_container:before {
...
}
This requires something like Modernizer to insert the appropriate feature-based CSS class.
Update
As per #Jaladh's comments, you may also need to apply position:relative to the container element, since position:absolute above will be relative to the first ancestor with a position attribute:
.my_container {
position:relative;
}

Perhaps use a 2nd wrapper element with padding on the outer element and existing background and padding styles on the inner element:
<div class="my_container">
<div class="my_container_inner">
<!-- etc. -->
</div>
</div>
jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }

Building upon #Dunc's solution, you can alternatively use pseudo element to mimic your container and let actual container behave like margins. This will look like:
.my_container {
width: calc(100px + (2 * 50px));
height: calc(100px + (2* 50px));
position: relative;
}
.my_container::before {
content: '';
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
Also make sure to move all other properties (like background color, border, etc.) you had in my_container to my_container::before because before is acting like our container here.
This is essentially helpful if your containers are grid items and you want gaps in-between them to be hoverable, because otherwise using psuedo element to add margins won't work appropriately in that case.

Change the margin to padding and it'll be hoverable.