We Keep Coding

Mobile menu - CSS / DIV - Dim visible background around menu?

When my mobile menu opens, I would love the rest of the visible background (other than the menu itself) to 'dim.' (Both my pages and menu background are very white in general).
There is a plugin that offers this functionality but in trying to keep the website light, am trying to see if this is possible with just some lines of code?
Googling for quite a while came up with nothing other than the app which is a surprise... maybe I searched the wrong keywords?
Any ideas?
Here is my full code (not my original code, can link various parts to their respective Authors).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
#media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
#media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}

One way of doing this is to assert a blanket div over the entire page, beginning just below the menu bar, then setting that div's opacity to the desired level of dimming.
I have thrown together a very simple proof of concept. Hover the dummy Menu button to observe the effect. Take it onwards from there.
body {
--menu-height: 50px;
}
#page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: yellow;
}
#menu_bar {
position: absolute;
width: 100%;
height: var( --menu-height);
background-color: blue;
}
#menu_item {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 30px;
background-color: white;
line-height: 30px;
text-align: center;
}
#menu_item:hover:after {
content: '';
position: fixed;
top: var( --menu-height);
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.5;
/* Ensure z-index is higher than page's content/data items */
z-index: 2
}
#data {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border: 2px solid black;
padding: 10px;
z-index: 1;
}
#text {
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
}
<div id="page">
<div id="menu_bar">
<div id="menu_item">Menu</div>
</div>
<div id="data">
<span id="text">Hover the "Menu" button...</span><br><br> Lorem ipsum dolor etc
</div>
</div>

Show overlay fullscreen div then hide it by clicking on it

I'm new to the html/css/jquery languages, so please pardon me if my question seems too obvious.
My aim is to make a fullscreen overlay div appear when clicking on a div (this step actually worked with the toggle function) and then make this same div disappear by just clicking on it.
I've browsed many related topics but I can't seem to find a way to resolve my issue. How can I make the full screen div disappear by clicking anywhere on it (clicking back on the first div is not an option since it's intentionally hidden)?
Here's my code so far:
JavaScript (jQuery):
$(function() {
$("#bandeau").click(function() {
$("#full_screen").toggle();
});
});
HTML:
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">content</div>
</div>
CSS:
#bandeau {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width: 100%;
height: auto;
color: white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}

Pure CSS solution with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 100%;
background: url('http://i.imgur.com/bv80Nb7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.item {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target><h1 id=warning>FULLSCREEN CONTENT</h1></div>
</label>

This will toggle full screen on or off
https://jsfiddle.net/42atLz1g/1/
$("#bandeau, #full_screen").click(function(){
$("#full_screen").toggle();
});

Below is a simple and easy way to do it with one command and full explination. Enjoy and welcome to website development!
Note: scroll to end of answer to see a short list of helpful links
// this is simply jQuery shorthand for document.ready = function ...
$(function(){
// this is how to dynamically assign events
// why is this important? let's say, in the future,
// you decide to add elements after the page is loaded,
// this allows the NEW elements to still use the same events you've assigned
$(document)
// .on and .off are as simple as they appear,
// on adds an event to a group of elements and off removes
// as you'll notice, I assign just one method to both elements
// the reason is this move is extremely simple
// all you need is to have one element hide or show, based on
// clicking one of the divs
.on('click', '#bandeau, #full_screen', function(e) {
// .toggle accepts a booleen argument
// if true = show, if false = hide
// thus i simply test the id name within the parameter!
$('#full_screen').toggle(this.id == 'bandeau');
})
});
#bandeau{
background-color: black;
color: green;
overflow: hidden;
cursor: crosshair;
width:100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width:100%;
height: auto;
color:white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">tnetnoc</div>
</div>
See more about jQuery Dynamic Events here (.on) && here (.off)
More you should read about dynamic entry
.toggle()

Try to replace your jQuery code with this
$(function(){
$("#bandeau").click(function(){
$("#full_screen").show();
});
$("#full_screen").click(function(){
$(this).hide();
});
});

Using fadeIn() and fadeOut() successfully

I have a grid of items, some of which are images, and some are text (all vertically-aligned, using different CSS techniques). Clicking these hides the content with fadeOut(), and shows different content with fadeIn().
My question is two-part:
How can I get the initially-hidden content to not match the CSS of the front during the transition? The text is mis-aligned until the transition has finished.
And secondly, how can I toggle this switch so that the process can be reversed?
My CSS:
.outer {
position: relative;
width: 144px;
height: 144px;
float: left;
border: solid 1px #dddddd;
margin: 10px;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.inner img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-height: 124px;
max-width: 124px;
padding: 10px;
}
.inner p {
font-weight: 700;
font-size: 1.2em;
position: relative;
top: 50%;
padding: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.back {
display: none;
}
And my JavaScript/jQuery so far:
$(".outer").click(function() {
$(this).find(".front").fadeOut();
$(this).find(".back").fadeIn();
});
A JSFiddle of my predicament can be found here.

You should fade the element .back in after the element .front has been faded out.
You would do this by invoking .fadeIn() within the .fadeOut() callback:
Updated Example
$(".outer").click(function () {
var self = this;
$(this).find(".front").fadeOut(function () {
$(self).find(".back").fadeIn();
});
});

Positioning z-index does not work as expected

I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>

It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.

Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.

Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}

I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.

jQuery div slide to left on hover a div/nextarrow

I am trying to implement something like this http://www.jamieoliver.com (slider -> arrow on hover)
I have done this much http://jsfiddle.net/PXLJG/5/ In the jsfiddle script? The arrow must be stand. The div.class=content 'Text next article' must be slide to left next to the arrow.
$('.holdingbox').hover(function () {
$('.rightbox').stop().animate({
width : '120px'
}, 400)
}, function () {
$('.rightbox').stop().animate({
width : '-0'
}, 400)
});
HTML:
<div class="holdingbox">
<a href="#">
<div class="margined">
<div class="rightbox">
<div class="content"><p>Következő cikk</p></div>
</div>
<div class="leftbox"> > </div>
</div>
</a>
</div>
CSS:
div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: absolute;
display: inline-block;
height: 36px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.holdingbox a {
text-decoration: none;
color: #FFF;
display: block;
}
.leftbox img {
margin: 0 auto;
margin-top: 10px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 50px;
vertical-align: top;
margin-right: 0;
}
.rightbox a {
text-decoration: none;
color: #FFF;
}
.content {
width: 120px;
position: absolute;
background-color: #ac193d;
height: 38px;
text-align: center;
left: 0;
top: 0;
right: 0;
color: #FFF;
}
.content p {
margin-top: 8px;
}

just add position: absolute; right: 0; in .rightbox class.
.rightbox {
display: inline-block;
height: 50px;
margin-right: 0;
overflow: hidden;
position: absolute;
right: 0;
vertical-align: top;
width: 0;
}
Working here - http://jsfiddle.net/PXLJG/7/

I tried to fix up the code you've already got but it needed some major rehauling so I've just re-done it all.
JSFiddle: http://jsfiddle.net/t2z9Q/
CSS
.container {
width: 120px;
position: relative;
overflow: hidden;
color: white;
}
.container .content {
width: 100px;
overflow: hidden;
position: absolute;
left: 120px;
float:left;
z-index: 99;
background: #ac193d;
}
.container .arrow {
float: right;
width: 20px;
position: relative;
color: black;
z-index: 100;
background: #ac193d;
}
JS
$('.arrow').hover(function() {
$('.container .content').stop().animate({left: '0'}, 400)
}, function() {
$('.container .content').stop().animate({left: '120px'}, 400)
});
HTML
<div class="container">
<div class="content">Next Article</div>
<div class="arrow">></div>
</div>
This way you lose a lot of the jargon html & css that isn't really required but still get the same effect.

You are applying inline-block style on all divs. Please revert to normal display of block.
div{
display: block;
}
or just remove it as the default display is block
http://jsfiddle.net/PXLJG/8/
That should solve your core issue.
Now if you want to show the arrow to the left of the text div, remove absolute position on the arrow.
Now you will be having a whitespace between the inline-block elements, that is the arrow and the text. To remove it easily remove the whitespace between those two div in HTML
http://jsfiddle.net/PXLJG/18/
For something exactly like as in the website, you can try positioning both arrow and text using absolute positioning and anchoring them with their right property.
This way, as the width increases it will expand from right to left.
http://jsfiddle.net/PXLJG/20/