We Keep Coding

Blur the entire html when the sub-menu is open

I created a submenu using HTML and CSS. The elements of the submenu open when hovered on the elements of nav-list. I need help figuring out how to blur the HTML's main content when the nav-list hovers and sub-menu is open. When open, the submenu will have a picture below it and multiple pictures and classes further down. The current code does blur the HTML, but the problem is, to blur the entire HTML, I need to add each class below the submenu to CSS individually.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
top: 3.89rem;
left: -4rem;
width: 82.5rem;
height: 35rem;
z-index: 5000;
}
.sub-menu a {
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.nav-list>li:hover .sub-menu {
visibility: visible;
}
.nav-list>li:hover>a::after {
width: 100%;
}
/* CSS for blur effect */
.blurred::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
filter: blur(5px);
/* adjust the blur amount */
z-index: 900;
visibility: hidden;
}
<div class="main" id="navbar">
<div class="logo">
XYZ<br>123
</div>
<nav class="menu">
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>shirts </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="main">
<img></img>
<img></img>
<img></img>
<img></img>
</div>
<footer>
1
</footer>
<script>
var subMenu = document.querySelector('.sub-menu');
var main = document.querySelectorAll('main');
subMenu.addEventListener('mouseover', function() {
main.forEach(function(elem) {
elem.classList.add('blurred');
});
});
subMenu.addEventListener('mouseout', function() {
main.forEach(function(elem) {
elem.classList.remove('blurred');
});
});
</script>

You only need to add the blurred class to the main container div, all content will be blurred in it.
Demo for blur on hover over hamburger (you can change that to blur only on sub-menu hover). There is a 2 sec delay on mouse-out to that you have time to scroll down to see the blurred image:
const hamburger = document.getElementById('hamburger');
const main = document.getElementById('mainContainer');
hamburger.addEventListener('mouseover', function() {
main.classList.add('blurred');
});
hamburger.addEventListener('mouseout', function() {
setTimeout(() => main.classList.remove('blurred'), 2000);
});
.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color: #eee;
}
<div class="main" id="navbar">
NAVBAR mouse over to blur ==> <span id="hamburger">☰</span>
<hr />
</div>
<div class="main" id="mainContainer">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis blandit felis vel hendrerit. Morbi nunc augue, pellentesque eu laoreet in, bibendum nec sem.</p>
<ul><li>In eu libero eget nulla laoreet aliquet in quis augue.</li><li>Praesent vulputate leo tellus, quis eleifend purus viverra vitae.</li><li>Phasellus eget augue venenatis, facilisis nulla sed, consequat lorem.</li></ul>
<p>Duis sapien diam, dignissim quis imperdiet eget, hendrerit nec nulla. Nam nisi purus, ultrices nec fringilla vitae, interdum vitae nunc.</p>
<p><img src="https://via.placeholder.com/500x90/000000/FFFFFF.png?text=This+is+an+embedded+image" /></p>
<p>Integer lobortis tellus a orci ultrices, at varius risus fermentum. Maecenas maximus elit sit amet varius facilisis. Morbi molestie rutrum eros, id molestie dui maximus in. Etiam fermentum felis eu vehicula euismod.</p>
</div>
<footer>
<hr />
FOOTER
</footer>

fade out transition for .mouseout using .animate?

I have a div that when you hover, another div shows up. They aren't parent/child or wrapped, so I used a script to get this to work the easiest I could and to have what I needed. With .mouseover the hover div slowly appears which is what I want.
My issue is getting the .mouseout to make the hover div slowly disappear and stay gone. I've tried different variations but the closest I got is to make the div slowly fade away, but it pops back up after the delay I had set.
I'm very new to js, really no experience at all. I wrote the first part of this code which works but the .mouseout is what I'm having issues with.
Here's my code:
$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });
$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });
I know it's probably simple, but I don't know much if anything about js.
Here is the html:
<div id="show_stats1" class="stats">
main, visible div
</div>
<div class="stat-1_info" style="visibility:hidden;">
hidden div to be shown on hover
</div>
Here's a jsfiddle https://jsfiddle.net/yt3h9xnf/

You can use the .animate() method with either opacity or visibility. There is no reason to use both.
If you can't figure out which one to use read this answer here.
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").animate({opacity: 1}, 200);
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_stats1" class="stats">
<h1>main, visible div</h1>
</div>
<div class="stat-1_info">
hidden div to be shown on hover
</div>

Make it simple by using fadeIn() and fadeOut() with sec as parameter. This will take care of the time you want to see the text and want to disappear.
Use display:none; which is latest and best in market now than using visibility property.
fadeIn()
fadeOut()
$(document).ready(function() {
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
});
});
.stats_container {
width: 310px;
padding: 10px;
margin-bottom: 0px;
}
.stats {
width: 300px;
height: 34px;
margin: 15px 0px -3px 0px;
}
.stats h1 {
text-align: left;
}
.stats h2 {
position: absolute;
left: 260px;
margin-top: 8px;
width: 50px;
text-align: right;
}
.stats h1 {
display: inline-block;
font-weight: 400;
color: #000;
line-height: 9.5pt;
font-size: 9.5pt;
}
.stat-1_info {
top: -50px;
margin: 0px;
}
.stat-1_info {
float: right;
position: relative;
left: 0px;
display: inline-block;
width: 380px;
height: 334px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
<div id="show_stats1" class="stats">
<h1>Strength:</h1>
</div>
</div>
<div class="stat-1_info" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam
ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>

javascript custom alert box transparency issue

I'm trying to do an image-based custom alert box using CSS and Javascript. I almost have it working the way I want it to. The issue that's been plaguing me is that box is sharing the overlay's transparency. Setting the box' opacity does nothing and removing the box code from its overlay "nest" makes the overlay cover the box even if the z-index is set up otherwise.
Here should be the relevant CSS Code:
#popUpDisplay {
display: none;
opacity: .8;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: lightgray;
z-index: 8;
}
#popUpTemplate {
display: none;
opacity: 1.0;
z-index: 10;
}
#popUpBackground {
display: block;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
width: 495px;
height: 450px;
padding-top: 1px;
background-image: url("../images/popUp_bg.png");
text-align: center;
z-index: 10;
}
#popUpBanner {
width: 455px;
height: 86px;
margin-left: auto;
margin-right: auto;
background-image: url("../images/popUp_banner.png");
text-align: center;
}
#bannerText {
/* May switch to image */
color: white;
margin-top: 10px;
padding-top: auto;
padding-bottom: auto;
}
#popUpContent {
width: 450px;
height: 347px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Here's the Javascript:
function DlgShow(Message){
// Change the message.
var Msg = document.getElementById("DlgContent");
Msg.innerHTML = Message;
// Display the dialog box.
var Dlg_bg = document.getElementById("popUpDisplay");
var Dlg = document.getElementById("popUpTemplate");
Dlg_bg.style.display = "inline";
Dlg.style.display = "inline";
}
function DlgHide(){
var Dlg_bg = document.getElementById("popUpDisplay");
var Dlg = document.getElementById("popUpTemplate");
Dlg.style.display = "none";
Dlg_bg.style.display = "none";
}
And here's the HTML
<div id="popUpDisplay">
<div id="popUpTemplate">
<div id="popUpBackground">
<div id="popUpBanner">
<h3 id="DlgContent">Test Text</h3>
</div>
<div id="popUpContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum risus metus, a vehicula nibh molestie ac. Duis sollicitudin libero eget nunc maximus auctor. Sed eu commodo arcu. Quisque finibus pellentesque pharetra. Vestibulum quam mi, malesuada vitae sem eget, eleifend mattis nisi. Nunc ac tristique nunc. Morbi blandit justo eleifend dui malesuada, quis varius diam tincidunt. Quisque gravida posuere urna eget ultricies. Nullam ut euismod lectus. Donec congue ex quis elementum dignissim.</p>
Close
</div>
</div>
</div>
</div>
<h1>HTML Test Page</h1>
<p>This Page is strictly for testing things on a page without effecting a pre-existing page.</p>
Open
It's not pretty, and I need to work on the message displayed, but I just want to get it so it displays correctly.

This is because your content div is a child of the transparent div. (And thus inherits the opacity from #popUpDisplay.) Which is why frameworks like Bootstrap place a modal-overlay before (not around) the content div of a modal.
I would just update your CSS to use rgba on the background of #popUpDisplay:
#popUpDisplay{
display: none;
/* opacity: .8; <-- remove this */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(211, 211, 211, .8); /* <-- change this*/
z-index: 8;
}

Expand element and contract element with animation, according to text size

The included snippet does almost all of what I want to do.
Click on the 'Toggle expanded' to see the elements expand to the larger size and then contract to the smaller size.
I have a few questions:
How can I contract the element whilst still filling it with text (not reducing the text to two lines until the end of the animation)?
Is it possible to achieve everything without needing to set the precise width and height in CSS that I am setting? It is currently fragile to style changes.
Is it possible to animate these boxes and have the text 'animate' as well? e.g. see the text re-wrapping as the boxes increase in size
Thanks!
$('#expand-link a').on('click', function(event) {
var $sections = $('.block');
if ($sections.data('expanded')) {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.removeClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', $(this).find('p:not(.fullview)').outerHeight() + 32);
});
$sections.removeClass('expandit');
$sections.data('expanded', false);
} else {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expandit');
$sections.data('expanded', true);
}
});
li {
list-style: none;
background-color: white;
padding: 5px 5px 5px 5px;
margin-top: 10px;
margin-bottom: 10px;
transition: height 1s ease-in-out;
overflow-x: hidden;
overflow-y: hidden;
}
.expanded li {
width: 570px;
}
li:first-child {
margin-top: 0px;
}
li:last-child {
margin-bottom: 0px;
}
.section p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.expanded .section p {
overflow: auto;
display: block;
}
ul {
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
overflow: hidden;
}
.section p.fullview {
display: none;
}
.expanded .section p.fullview {
display: block;
}
.block {
background-color: grey;
display: inline-block;
width: 300px;
transition: width 1s ease-in-out;
}
.block.expandit {
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expand-link">
Toggle expanded
</div>
<div class="block">
<ul class="sections">
<li class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis massa mauris. Fusce vel efficitur elit. Curabitur finibus sagittis nisl. Nullam luctus, magna sed feugiat scelerisque, nunc sem facilisis enim, sed ornare nulla urna sit amet
lectus. Praesent facilisis efficitur ipsum sed gravida. Mauris mollis ut nisi at fringilla. Aenean et orci libero. Curabitur pharetra odio ornare metus pharetra aliquet. Nunc nisl lorem, tempus vitae libero a, feugiat viverra dui.</p>
<p class="fullview">Some extra content</p>
<p class="fullview">A bit more</p>
</li>
<li class="section">
<p>Some different less useful text</p>
<p class="fullview">A bit of extra content for your information</p>
</li>
</ul>
</div>

How do I adjust a Div height based on viewport size?

I want the #maincontent div to be able to scroll and the rest of the divs to remain stationary.
When I try the following code I get the desired effect, however the #maincontent div extends further down then the actual viewport and I am unable to read the remaining text. I would like the height of the #maincontent to adjust depending on the viewport but nothing else to adjust.
CSS
#framecontentTop{
position: inherit;
top: 5px;
left: 0px; /*Set left value to WidthOfLeftFrameDiv 220px*/
right: 200px; /*Set right value to WidthOfRightFrameDiv*/
width: 100%;
height: 175px;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #8b45130;
}
#maincontent{
padding: 10px;
position: absolute;
top: 175px; /*Set top value to HeightOfTopFrameDiv*/
height: 100%;
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
right: 205px; /*Set right value to WidthOfRightFrameDiv*/
width: 500px;
bottom: 0px;
overflow: auto;
background: #fff;
}
JavaScript
$(function(){
var parent= $('#maincontent');
var parentOffset = parent.offset();
var bottom = 0;
parent.find('*').each(function() {
var elem = $(this);
var elemOffset = elem.offset();
var elemBottom = elemOffset.top + elem.outerHeight(true) - parentOffset.top;
if (elemBottom > bottom) {
bottom = elemBottom;
}
});
parent.css('min-height', bottom);
});
Any help would be greatly appreciated, I've been frustrated with this code for some time now.

You can solve it by using
box-sizing: border-box
example:-
* {
padding: 0;
margin: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html,body {
height:100%;
}
#framecontentTop{
top: 5px;
left: 0px; /*Set left value to WidthOfLeftFrameDiv 220px*/
right: 200px; /*Set right value to WidthOfRightFrameDiv*/
width: 100%;
height: 175px;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #8b45130;
position:relative;
z-index:1;
}
#maincontent{
padding: 10px;
position: relative;
top: -180px; /*Negative Set top value to HeightOfTopFrameDiv + position*/
padding-top: 180px /*Set padding-top value to HeightOfTopFrameDiv + position*/
height: 100%;
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
right: 205px; /*Set right value to WidthOfRightFrameDiv*/
width: 500px;
overflow: auto;
background: #fff;
}
The important part is to set the top to negative value of the #framecontentTop and applying padding-top to shift the content of the #maincontent to the correct position.
And since the elements are overlapping, it needs correction by applying z-index to the #framecontentTop
This is a sample for reference:- http://jsbin.com/neweyozamiha/2

You could use the vh unit on your height. For example:
#maincontent{
padding: 10px;
position: absolute;
top: 175px; /*Set top value to HeightOfTopFrameDiv*/
height: 100vh; // USE VH HERE
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
right: 205px; /*Set right value to WidthOfRightFrameDiv*/
width: 500px;
bottom: 0px;
overflow: auto;
background: #fff;
}
This says that the main content element will be 100% of the current view point height.
There is a support issue though so if you need it to work below IE9 then you will have to try a different method.
Here is the support in more detail.

With absolute positioning, since you have top and bottom set, there's no need to set the height. Assuming that the nearest relative or absolutely positioned parent of #maincontent is the page body, setting bottom to 0 should work for you, without having to use javascript.
#maincontent{
padding: 10px;
position: absolute;
top: 175px; /*Set top value to HeightOfTopFrameDiv*/
/*height: 100%;*/
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
right: 205px; /*Set right value to WidthOfRightFrameDiv*/
width: 500px;
bottom: 0;
overflow: auto;
background: #fff;
}
fiddle: http://jsfiddle.net/bxos3tx3/
Another alternative might be to have the page content be relatively positioned, but then do fixed positioning on the other elements (makes their position relative to the viewport, rather than other elements)

If you don't give it a height or width but do give it a top, right, bottom, and left positions then the element's size is automatically 100% of its bounds.
html,body {height:100%; min-height:100%; background-color:grey; padding:0; margin:0;}
#maincontent{
padding:10px;
position: absolute;
top: 175px; /*Set top value to HeightOfTopFrameDiv*/
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
right: 205px; /*Set right value to WidthOfRightFrameDiv*/
bottom:0px;
overflow: auto;
background: white;
}
<div id="maincontent">
<p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.</p><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p><p>Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
</div>