Develop Reference

Flexbox inheritence issue

I am building a simple website. I have flex boxes full of "modules" which contain text content. When one of these modules is hovered over (using javascript code that is not included in this post because it works fine) I would like a "shade" to appear which darkens the entire module and displays a button. I am having a lot of trouble getting the shades to be the correct size: 100% of the width and height of each module. For some reason, height and width are not inherited from module to shade.
HTML:
<div class="support">
<div class="module">
<div class="shade">
<button type="button" class="source_btn">View Source</button>
</div>
<div class="content">
<h1>Homocide rates have skyrocketed in the United States.</h1>
<p>Jeffery Miron, an economist estimates that the homicide rate in America is as much as seventy-five percent higher $
</div>
</div>
<div class="module">
<div class="shade">
<button type="button" class="source_btn">View Source</button>
</div>
<div class="content">
<h1>Drug markets are forced to solve their disputes through violence.</h1>
<p>Because the War on Drugs has forced drug markets into the shadows, there is now way they can settle disputes throu$
</div>
</div>
<div class="module">
<div class="shade">
<button type="button" class="source_btn">View Source</button>
</div>
<div class="content">
<h1>The violence is not only occurring in the United States.</h1>
<p>For some perspective, there have been almost one hundred thousand deaths in Mexico in the past decade caused not b$
</div>
</div>
</div>
CSS:
section .support {
display: flex;
flex-direction: row;
background: var(--bg);
height: 60vh;
}
.module {
flex: 1;
text-align: center;
height: inherit;
}
.module .content h1 {
margin-top: 5rem;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.module .content p {
font-size: 1.5rem;
padding: 0 3rem 0 3rem;
}
.module .shade {
position: absolute;
background: rgba(0,0,0,.6);
}
.shade .source_btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
height: 20%;
font-size: 2vw;
background: var(--background);
color: var(--accent);
border: 2px solid var(--accent);
border-radius: .5rem;
}
Note that if I change the .shade styling to:
.module .shade {
position: absolute;
background: rgba(0,0,0,.6);
width: 33.33333%;
height: 60vh;
}
I get the exact desired effect IF there are 3 modules. I believe this means that the width and height are inherited from elsewhere, and I do not know why. I need to be able to say width: 100% and height: 100% in the .shade styling to make the shade take up the entire module because there will be a different number of modules per support class.
I am very confused as to why the width and height are not being inherited as I would expect. Since .shade is a child of .module, why aren't the width and height inherited from the .module div?
If I can provide any additional information, please let me know. I will be active.

When you set absolute as a value for position, the parent of the element should have relative as a value for position. Otherwise, the child element can't measure the position and the size of its parent element.
Following css should work for you:
.module {
flex: 1;
text-align: center;
height: inherit;
position: relative;
}
.module .shade {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.6);
}

Showing element in front of common backdrop

We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.
HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
There is a fiddle of our problem :
https://jsfiddle.net/ruj23c60/3/

<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
Removing the style position: relative from the parent of #div2 is sufficient already

There are two way as i know.
First:
You need to give z-index:3 to #back. (less than #div2 parent div) then you can make it front of #back
But this way whole div come in front of black(#back) div.
Fiddle
Second:
Make position:adsolute; to #div2 and remove position:relative; from it's parent.
Fiddle
Note: I have comment opacity: 0.7; from #back to understand properly.

How to make container div "pointer-events:none" but content clickable...?

i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN

Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen

Need to change from get ByID to ClassName (Javascript)

It is working when I do this with getElementByID. But when I change it to className, it doesn't work.
The reason why I am going to do this with class name is because there would be many looping (php) ticket in the page which is ordered by ticket number. And when "view" is clicked for a specif ticket, it will show the full message on it.
Of course, I can't get it by multiple duplicate "id" here. And I need to change it to class name only. Help, please.
<div id="menuTiket">
<span style="padding:10px; background:yellow; float:right;">
<a href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='block';
document.getElementsByClassName('fade').style.display='block';
">Tiket Baru</a></span></div>
<!--Black Overlay-->
<div id="fade" class="fade overlayMessage" onLoad="initDynamicOptionLists()"></div>
<!--Pop Up Div-->
<div id="light" class="light popupBoxMesage">
<span style="position: absolute; top: 11px; right:1px; color:white;" id="closeBlocked">
<a style="color:green; text-decoration:none; background:white; padding:10px;" href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='none'; document.getElementsByClassName('fade').style.display='none'"><b> X </b></a>
</span>
</div>
CSS:
<style type="text/css">
.overlayMessage{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:10000001;
-moz-opacity: 0.5;
opacity:.45;
filter: alpha(opacity=40);
}
.popupBoxMesage {
display: none;
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
border: solid 10px darkseagreen;
background-color: greenyellow;
width:70%;
height:400px;
z-index:10000002;
overflow: auto;
padding: 1% 2% 12px 2%;
margin: auto;
}
/* CSS Document */
</style>

It's getElementsByClassName(notice the 's' after 'Element') because it returns more than one element. You can have multiple elements in the DOM with the same class.
The result will be a collection, and you can see a specific item like so :
var elements = document.getElementsByClassName("class");
var firstElement = elements[0];

appendTo a form on another page?

I was able to use JSfiddle to create a appendTo event. By clicking on the image, I am able to get the caption for those images printed in a list in another div. But what if i wanted it to be appended to another page into a form?
Also, how do i remove an item after its been added? The code that i currently have allows me to appendTo, but I have no idea how to undo this event... any suggestions?
Here is JS fiddle: http://jsfiddle.net/jhyqt5/cBsqN/20/
and the Code:
HTML
<div class="wrapper">
<div class="caption">Blueberry</div>
<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-prn2/1394351_529524313783586_609777864_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Walnuts</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-ash4/1377244_529524413783576_249384396_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Craisins</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-frc3/1378714_529524353783582_129148654_n.jpg" class="img-circle">
</div>
<br>
<br>
<div class="foodlist">
</div>
CSS
.img-circle {
border-radius: 50%;
height: 140px;
width: 140px;
}
.wrapper {
position: relative;
}
.caption {
background-color: black;
opacity: .7;
text-align: center;
line-height: 120px;
color: white;
position: absolute;
display: none;
border-radius: 50%;
width: 140px;
height: 140px;
}
.wrapper:hover .caption {
display: block;
}
.wrapper.active .caption {
display: block;
opacity: .8;
background: #38ACD5;
}
JS
$('.wrapper').on('click', function () {
$(this).toggleClass('active');
var caption = $(this).find(".caption").text();
$("<li>" + caption + "</li>").appendTo("div.foodlist");
});
Bottomline:
1) appendTo and Undo function
2) appendTo a form on a another page
Thanks :)

You can't modify a page that will be loaded sometime in the future. That page doesn't exist yet.
All you can do is to set some state (in browser cookie, browser local storage or on the server) that the javascript code in that other page can examine and then modify that other page when it is loaded.