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>

Image max height and max width while preserving aspect ratio

Is it possible to give max-height and max-width to an image while preserving aspect ratio without using js?
For example,
I want an image to be with a height of 38px and the width auto.
If the width is higher than 200px, I want the width to be 200px and the height auto.
If it's not possible without js, does anyone have an idea how to do it with js and without resizing the image after it's already loaded?

You can nest the image in a 200x38 container, then set the max-width and max-height of the image to 100%. Here is a working snippet (I have included JS to make it interactive, but it is not necessary. Try resizing the container using the sliders):
var width = document.getElementById("width");
var height = document.getElementById("height");
var widthInput = document.getElementById("widthInput");
var heightInput = document.getElementById("heightInput");
var imageContainer = document.querySelector("div");
widthInput.addEventListener("input", function() {
width.innerHTML = this.value + "px";
imageContainer.style.width = this.value + "px";
});
heightInput.addEventListener("input", function() {
height.innerHTML = this.value + "px";
imageContainer.style.height = this.value + "px";
});
div {
width: 200px;
height: 200px;
border: 1px dashed #000;
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
background: #333;
}
<div>
<img class="image" src="https://via.placeholder.com/400"/>
</div>
<br/>
<label>Width: <span id="width">200px</span></label>
<br/>
<input id="widthInput" type="range" min="0" max="400"/>
<br/>
<label>Height: <span id="height">200px</span></label>
<br/>
<input id="heightInput" type="range" min="0" max="400"/>
You can notice that however you change the dimensions of the container, the image is still contained within it. By setting the container to 200px wide by 38px tall, you can force the image to stay within the limits 0px ≤ width ≤ 200px and 0px ≤ height ≤ 38px.

There is a built in CSS style called max-width and max-height and I really do not think min-width exists, incase you are wondering. You can refer to the example below to understand better. Also I am using text instead of an image, but you should get the idea.
I have nested the actual div instead another div so you could play around with the resizing.
#con {
resize: both;
overflow: auto;
}
#box {
/*Here you could say auto instead*/
height: 200px;
max-width: 200px;
}
<!DOCTYPE html />
<html>
<head></head>
<body>
<div id="con">
<div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus auctor ipsum, in convallis mi lobortis in. Phasellus molestie suscipit rutrum. Duis et convallis lectus. Etiam id urna massa. Nulla sagittis erat nec arcu rutrum elementum. Vestibulum blandit erat vestibulum, ullamcorper augue vitae, accumsan mi. Sed consectetur, quam vel efficitur interdum, ante ligula interdum justo, a dictum ligula tortor sed nunc. Cras eget magna ac urna imperdiet laoreet eget sed ante. Vivamus condimentum tortor sit amet diam elementum malesuada sed sed neque. Vestibulum et magna mollis, consequat nibh ut, facilisis orci. Phasellus fermentum sodales libero, et vehicula enim ornare ut. Donec non bibendum metus. Cras hendrerit, quam a pellentesque varius, tortor nunc maximus lectus, at gravida diam ipsum ut metus. Etiam orci felis, dapibus id cursus eu, dapibus ut augue. Proin a leo viverra, tempus ipsum nec, lacinia lacus. Maecenas id dolor nec neque lobortis interdum quis quis nisi.</div>
</div>
</body>
</html>

Using both width auto and height auto will give to following code. To center horizontal I used the align-items center of the flexbox.
.container,
.container * {
box-sizing: border-box;
}
.container {
display: flex;
width: 800px;
margin: 10px auto;
}
.img {
display: flex;
align-items: center;
width: 25%;
height: 150px;
border: 2px solid silver;
}
.img img {
display: block;
border: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
}
<div class="container">
<div class="img">
<img src="http://placekitten.com/200/300" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/300/200" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/250/350" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/350/200" alt="">
</div>
</div>

You have to use max-width and height and object-fit CSS properties for image.. see example
.img img {
max-width: 200px;
height: 38px;
object-fit: contain;
object-position: left;
}
<div class="img"><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"></div>
Hope it works... if any question comment pls

Here are 2 examples of the solution I think would work, the first image has less than width: 200px; and the second one has more than width: 200px;
Again, I'm not sure if it would work for you, but I think it would, and if it doesn't I would love to know why.
<style>
img {
max-width: 200px;
height: auto;
}
</style>
<img src="https://dummyimage.com/180x400/666/fff.jpg" alt="test">
<br>
<img src="https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="test 2">

Specifying height or width will keep the aspect ratio. Specifying both the max-height and max-width will keep the aspect ratio. Specifying height and max-height makes no sense. Specifying height and max-width cannot guarantee your aspect ratio.

jQuery mouse enter and mouse leave not updating class

I created a background image on a div and when the user mouses over the image, a div will appear with relevant info. I have it appear on mouse enter and fadeOut() on mouse leave. Each time it updates a class called "slide". However, it will only update the class once. It works perfectly fine just using it without the extra fadeOut() function. What am I missing?
$(document).ready(function() {
$(".fashion-img1").mouseenter(function() {
$(".fashion-img-content1").toggleClass("slide");
});
$(".fashion-img1").mouseleave(function() {
$(".fashion-img-content1").fadeOut(1000, function() {
$(this).toggleClass("slide");
});
});
});
.fashion-img-content1,
.fashion-img-content2,
.fashion-img-content3 {
margin: 40% 15% 0 10%;
visibility: hidden;
padding: 20px;
min-height: 200px;
background-color: #f9f9f9;
color: #333;
}
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row slideanim img-row">
<div class="col-md-4">
<div class="fashion-img1">
<div class="fashion-img-content1 text-center">
<span class="glyphicon glyphicon-search"></span>
<p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fashion-img2">
<div class="fashion-img-content2 text-center">
<span class="glyphicon glyphicon-search"></span>
<p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fashion-img3">
<div class="fashion-img-content3 text-center">
<span class="glyphicon glyphicon-search"></span>
<p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
</div>
</div>
</div>
</div>

Div ID's need to be unique whereas Div Classes are generic. You are currently giving your classes unique names which is why your code isn't properly targeting DIV's.
In addition using toggleClass is re-toggling the class each time you leave and reenter - hence effectively undoing the action. So this has been changed to addClass and removeClass for clarity.
Finally, in using fadeOut you are fading a div's opacity to zero, and then applying CSS display:none; which removes it from display. This is different to CSS visibility: none; as #Daniel points out in comments.
UPDATE: snippet updated to reflect info div fading in and out
The following snippet illustrates the class switching and appropriate use of classnames:
$(".fashion-img").mouseenter(function() {
$(this).find(".fashion-img-content").addClass("slide");
$(this).find(".info").fadeIn();
});
$(".fashion-img").mouseleave(function() {
$(this).find(".fashion-img-content").removeClass("slide");
$(this).find(".info").fadeOut();
});
.fashion-img-content {
width: 100px;
height: 100px;
background: #333;
margin-top: 10px;
}
.info {
display: none;
position: absolute;
}
.slide {
background: #09f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row slideanim img-row">
<div class="col-md-4">
<div class="fashion-img">
<div class="fashion-img-content text-center">
<span class="glyphicon glyphicon-search"></span>
<p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fashion-img">
<div class="fashion-img-content text-center">
<span class="glyphicon glyphicon-search"></span>
<p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fashion-img">
<div class="fashion-img-content text-center">
<span class="glyphicon glyphicon-search"></span>
<p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
</div>
</div>
</div>
</div>

How to position button depending on what content is on the page

I'm having troubles positioning a button on a page with css. I want the button to be fixed at a certain position but when there is a lot of content on the page I want the button to move down.
Firstly I want the button at the bottom of the page when there isn't much content such as the code below which does this:
#Button
{
position: fixed;
height:90px;
width:220px;
left:16%;
top:70%;
border:none;
background:none;
}
Then when there is lots of content I want the button to move down such as the code below:
#Button
{
position: absolute;
height:90px;
width:220px;
left:16%;
padding-top:10%;
padding-bottom: 13%;
border:none;
background:none;
}
Can anyone help? I've looked online but cant make sense of it.

If you define a wrapper block element (a <div> for example) around all your content and put the <button> directly under that element, it is possible to reach the desired result with CSS only.
HTML:
<div id="wrapper">
<!-- other content goes here -->
<button id="button">Sample</button>
</div>
CSS:
#wrapper {
position: relative;
min-height: 100vh;
}
#button {
position: absolute;
bottom: 0;
}
However, I have to warn you about the fact that legacy browsers do not support the vh unit and some others show buggy behavior. Take a look at here before you implement it in your project.

I don't know your structure, but I'll try to help you.
Let's use the following markup:
<div class="parent">
<p class="texto">Your text goes here!</p>
<input type="button" value="OK" />
</div>
To solve your problem, I'd simply use a min-height in the content.
.parent .texto {
min-height: 100px;
}
In this way, the button will always be in the same position if there isn't much content. And it'll follow the height if there are lots of content.
Snippet:
.parent {
width: 200px;
padding: 5px;
border: 1px solid black;
float: left;
margin: 5px;
}
.parent .texto {
min-height: 100px;
}
<div class="parent">
<p class="texto">
Small text!
</p>
<input type="button" value="OK" />
</div>
<div class="parent">
<p class="texto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi urna, rhoncus vitae hendrerit ut, hendrerit a turpis. Phasellus sed rhoncus augue, eget vehicula neque. Vivamus lobortis, velit vitae maximus porttitor, erat nulla scelerisque est, nec
sagittis diam diam id nisl. Maecenas dictum lacinia dignissim. Duis eget ligula fermentum, vulputate dui sed, vestibulum ipsum. Duis non consectetur dolor. Nunc urna eros, tincidunt id nisl id, dapibus imperdiet orci. Mauris posuere convallis ullamcorper.
</p>
<input type="button" value="OK" />
</div>
Hope it helps!

use position:relative for the element which you have defined before this button.

Jquery Slide DIV half of page only

I try To make Something Like that which present at Microsoft's Support Website.See -> (Visit Here)
Click on any Product which list there. (Note: Purpose of this article/Question is not MARKETING on any Product!!! It just for Knowledge.)
When You click on any one of listed there, one drop-down appear.
Now Here Points of my question are comes out. After click on menu item you can see that there is one "Select a topic" list and when you click on any one of them, 2nd list comes out. and after click on item from 2nd list 3rd one list comes out. I exactly try to make a script like that. I search over internet and make a one div slider. But it slide whole div.
Here is my code what I done
HTML
<div id="gallery">
<div id="slider">
<div style="background:#cf5">1</div>
<div style="background:#ada">2</div>
<div style="background:#b0b">3</div>
</div>
<span id="prev">Prev</span>
<span id="next">Next</span>
</div>
CSS
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:330px; /* +30 = space for buttons */
text-align:center; /* to center the buttons */
}
#slider{
position:absolute;
left:0;
height:300px;
text-align:left; /* to reset text inside slides */
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
#prev, #next{
display:inline-block;
position:relative;
top:300px;
cursor:pointer;
padding:5px;
}
Jquery
$(function(){
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0; // a counter
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
});
And Here Is Example of Of my code on Fiddle

After do some R&D on it. I make something like that
HTML
<div>
<input type="submit" id = "submit" value = "Show panel"/>
<span id = "showpanel1"></span>
</div>
<div id = "slider" style = "display:none">
<div class = "panel1" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
<div class = "panel2" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
<!-- Load Loder GIF -->
<div id = "loader" style = "display:none">
<img src = "loader.gif">
</div>
<!-- QnA Div Start -->
<div id = "qaslider" style = "display:none">
<div class = "mainpanel" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
JS
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var firsttext;
$(".panel1").on('click','li',function (){
$(".panel2").show("slide", { direction: "right" }, 1000);
$("span").text($(this).html());
firsttext = $(this).html();
});
$('#submit').click(function() {
$(".mainpanel").hide();
$("#slider").show("slide", { direction: "right" }, 0);
$(".panel2").hide("slide", { direction: "right" }, 0);
$(".panel1").show("slide", { direction: "right" }, 1000);
});
$(".panel2").on('click','li',function (){
$("span").text(firsttext + " > " + $(this).html());
$( "#slider" ).fadeOut( "slow" );
$("#loader").show("slide", { direction: "right" }, 800);
$("#loader").center(true);
setTimeout(removeslider,4000)
});
});
function removeslider()
{
$("#loader").hide("slide", { direction: "left" }, 800);
$("#qaslider").show("slide", { direction: "right" }, 0);
$(".mainpanel").show("slide", { direction: "right" }, 1000);
}
// Custome Jquery Function to stop/place element at center screen
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}
</script>
Style
<style>
.panel1 .panel1
{
border:1px solid black;
margin-right:800;
margin-top:20px;
}
#loader
{
margin-right:708;
margin-top:117px;
margin-left:525px;
}
.panel1 ul li:hover, .panel2 ul li:hover
{
cursor:hand
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
</style>