I have a HTML-Document which is structured as shown in the following figure:
The red blocks which represent the text of the sidenotes are placed relatively to the footnote numbers in the text using CSS. If the text has many sidenotes and/or the texts of the sidenotes are long, the sidenotes overlap. To prevent such a behaviour I am using JavaScript to set the top margin of these elements in order to shift them downwards.
To prevent that the website is not usable without JavaScript enabled, I would like to hardcode the top margin value of the elements that need shifting down in the CSS-file. To take into account the different screen resolutions, I thought of using the CSS #media-query to set different top margins for other screen resolutions.
Example:
#media(min-width: 80em) {
.container { width: 40em; }
#sidenote-45 { margin-top: 15px; }
[...]
}
#media(min-width: 60em) {
.container { width: 30em; }
#sidenote-56 { margin-top: 28px; }
#sidenote-89 { margin-top: 12px; }
[...]
}
[maybe more #media-queries for other screen sizes]
What do you think about this approach?
You can use absolute position relative to the container to place the notes at the left or right of the div and if you don't set top property the box maintains in its position aligned with the number. Something like this:
.container {
border: solid 2px black;
background: white;
width: 30%;
margin: 20px auto;
position: relative;
}
sup {
color: red;
}
.notes {
position: absolute;
left: -220px;
color: black;
display: block;
background: #8ac88a;
width: 200px;
font-size: 14px;
padding: 5px;
margin-top: -10px;
}
.right {
left: auto;
right: -220px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolorum voluptate provident doloremque aperiam laboriosam ea, vel nihil illum, beatae nemo mollitia possimus, velit<sup>1<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> sapiente nobis! Expedita possimus incidunt nam laudantium corrupti eaque, eveniet fuga perferendis, enim praesentium vero voluptatibus adipisci, dicta blanditiis aliquid asperiores accusantium. Provident voluptate explicabo necessitatibus eos sequi
modi non in nesciunt, debitis alias architecto doloremque sed<sup>2<span class="notes right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> quam voluptatem aut dolorem officia ipsa eum dicta optio delectus ullam
aliquam! Dicta rerum praesentium, laudantium suscipit earum, voluptates placeat totam aperiam non atque consequatur cupiditate neque! Reiciendis consectetur quo, alias facilis officia totam illo minus? Vitae distinctio culpa nesciunt voluptate tempore!
Error enim aperiam odio debitis culpa excepturi, minus molestias inventore amet recusandae<sup>3<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> fugit sit quasi qui ipsum. Aperiam quaerat tenetur,
voluptatibus eaque. Voluptatum veniam, nihil accusamus nesciunt nobis dolore cumque amet asperiores qui, ducimus iusto voluptatibus.
Related
I am new to coding and I am trying to achieve the following using JQuery:
I have two Divs Where clicking on the first shows some content and clicking the second would hide the content of the first one and show its content instead (Toggling). What I want to do is that I want to keep the same functionality but I want the second Div to slide to the right when I click on the first Div and make a drawer shape and vice versa. I have attached images to it so it may explain more about my idea.
both of contents are hidden by default.
I can't seem to know how to join these two functionalities together
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="box-container">
<div id="div1">
<h1>Title one</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
<div id="div2">
<h1>Title two</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
</div>
<div id="contentDiv1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
<div id="contentDiv2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
</body>
</html>
CSS
body {
display: inline-block;
margin: 100px 100px 25px 100px;
text-align: center;
}
#box-container {
height: 300px;
display: flex;
}
#div1 {
background: linear-gradient(90deg, #f57350, #fa8282);
width: 50%;
height: 50%;
cursor: pointer;
}
#div2 {
background: linear-gradient(90deg, #a42e5a, #f57350);
width: 50%;
height: 50%;
cursor: pointer;
}
#contentDiv1,
#contetnDiv2 {
margin: 25px;
}
JQuery
jQuery(document).ready(function($){
$('#contentDiv1').hide();
$('#contentDiv2').hide();
$('#div1').on('click', function(){
$('#contentDiv1').slideToggle();
$('#contentDiv2').hide();
});
$('#div2').on('click', function(){
$('#contentDiv2').slideToggle();
$('#contentDiv1').hide();
});
});
attached image
It has more than one solution, and for me, this is my favorite method, I hope it helps you:
$('.tabs .tab').on('click', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.closest('.tabs').removeClass('active1 active2');
$('.content').hide();
} else {
let i = $(this).index() + 1;
$(this)
.addClass('active')
.siblings('.tab').removeClass('active')
.closest('.tabs').removeClass('active1 active2')
.addClass('active' + i);
$('.content').hide();
$('.content' + i).fadeIn();
}
});
.tabs,
.tabs .tab,
.tabs .content {
border: 1px solid #000;
border-collapse: collapse;
box-sizing: border-box;
}
.tabs {
display: flex;
flex-wrap: wrap;
text-align: center;
position: relative;
}
.tabs.active1 {
padding-left: 0;
padding-right: 65px;
}
.tabs.active2 {
padding-left: 65px;
padding-right: 0;
}
.tabs .tab {
padding: 15px;
cursor: pointer;
min-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.tabs.active1 .tab,
.tabs.active2 .tab {
min-width: 100%;
width: 100%;
}
.tabs .content {
padding: 15px;
min-width: 100%;
display: none;
}
.tabs.active1 .tab1:not(.active),
.tabs.active2 .tab1:not(.active){
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
.tabs.active1 .tab2:not(.active),
.tabs.active2 .tab2:not(.active) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab tab1">div1</div>
<div class="tab tab2">div2</div>
<div class="content content1">div content1</div>
<div class="content content2">div content2</div>
</div>
I want to set display property none with on click event. If I am using querySelectorAll then it's applyng on all if I click on first button and other buttons are not working. I am New to JavaScript Here is my code.
let div = document.querySelector('.cross')
div.addEventListener('click',closeDiv);
function closeDiv() {
let closeBy = document.querySelectorAll('div');
closeBy.forEach(element => {
element.classList.add('display')
});
}
div{
border: 1px solid green;
margin: 5px;
text-align: center;
padding: 10px
}
.cross {
border: 1px solid red;
border-radius: 5px;
position: absolute;
right: 27px;
background-color: red;
color: white;
cursor: pointer;
}
.cross:hover {
background-color: greenyellow;
border: 1px solid greenyellow;
color: red;
}
.display{
display: none;
}
<div>
<button class="cross">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div>
<button class="cross">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p></div>
<div>
solution for clicking a div and its parent div will hide
Step 1: add function closeDiv() to every div which are responsible to closing div
<div>
<button class="cross" onClick="closeDiv(event)">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div>
<button class="cross" onClick="closeDiv(event)">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div> // This line is incorrect in your code
Step 2: add functional things in side closeDiv function
function closeDiv(event) {
let wrapperDiv = event.target.parentNode
wrapperDiv.style.display = "none"
}
Check the full code here
Hope this helps and feel free to comment below if this answer is not enough to you.
I just changed the javascript code
let cross = document.querySelectorAll('.cross')
cross.forEach(function(element) {
element.addEventListener('click', function(event) {
this.parentElement.style.display = 'none' // get parent
})
})
Eu quero definir nenhuma propriedade de exibição no evento click. Se eu estiver usando o querySelectorAll, será aplicado a todos se clicar no primeiro botão e outros botões não estiverem funcionando. Eu sou novo no JavaScript Aqui está o meu código.
let div = document.querySelector('.cross')
div.addEventListener('click',closeDiv);
function closeDiv() {
let closeBy = document.querySelectorAll('div');
closeBy.forEach(element => {
element.classList.add('display')
});
}
div{
border: 1px solid green;
margin: 5px;
text-align: center;
padding: 10px
}
.cross {
border: 1px solid red;
border-radius: 5px;
position: absolute;
right: 27px;
background-color: red;
color: white;
cursor: pointer;
}
.cross:hover {
background-color: greenyellow;
border: 1px solid greenyellow;
color: red;
}
.display{
display: none;
}
<div>
<button class="cross">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div>
<button class="cross">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p></div>
<div>
Use parentElement to get the parent element
I'd use dataset attributes so each button knows what it closes.
In current example you could target parent object, but I prefer using dataset attributes because this can be applied even if close button gets nested deeper and div isn't direct parent anymore
let div = document.querySelectorAll('.cross')
div.forEach(element => {
element.addEventListener('click',closeDiv);
});
function closeDiv() {
let parentMessageId = this.dataset.parentmessage;
let closeBy = document.querySelectorAll('[data-message="'+parentMessageId+'"]');
closeBy.forEach(element => {
element.classList.add('display-hidden')
});
}
div{
border: 1px solid green;
margin: 5px;
text-align: center;
padding: 10px
}
.cross {
border: 1px solid red;
border-radius: 5px;
position: absolute;
right: 27px;
background-color: red;
color: white;
cursor: pointer;
}
.cross:hover {
background-color: greenyellow;
border: 1px solid greenyellow;
color: red;
}
.display-hidden{
display: none;
}
<div data-message="1">
<button data-parentmessage="1" class="cross">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div data-message="2">
<button data-parentmessage="2" class="cross">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
I create an effect that is to constantly display the image while scrolling text. I have a question how to make it work the same way, instead of position: sticky, posititon: fixed, so that this effect works on ie.
var sticky = document.querySelector('.sticky-container');
var img = document.querySelector('.sticky-item');
window.addEventListener('scroll',setSticky);
function setSticky(){
var top = sticky.offsetTop - window.pageYOffset;
if(top <= 0){
sticky.classList.add('sticky');
}
if(top.toString().replace('-','') >= sticky.offsetHeight || top >= 0){
sticky.classList.remove('sticky');
}
};
* {
margin: 0;
}
body {
width: 100%;
padding: 120vh 0;
}
p {
font-size: 28px;
color: #fff;
text-align: center;
margin: 80px 0;
}
.sticky-item {
width: 100%;
height: 100vh;
background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
.sticky-container.sticky .sticky-item{
position: sticky;
top: 0;
z-index: -1;
}
<div class="sticky-container">
<figure class="sticky-item"></figure>
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
EDIT:
<div class="sticky-container">
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
.sticky-item {
background-attachment: fixed;
background-size: 100%;
}
Dai is correct, you do not need to use a script to achieve this effect.
https://jsfiddle.net/tractionworks/h3r5uvqm/8/
Since you need to use the position:sticky feature I doubt this works on IE without a big effort and actually using JS. But with 1.4% global usage I doubt this is worth your time.
However if you are fine with the coverage of sticky, I would entirely skip using JS and solve it via CSS:
* {
margin: 0;
}
body {
width: 100%;
padding: 120vh 0;
}
p {
font-size: 28px;
color: #fff;
text-align: center;
margin: 80px 0;
}
.sticky-item {
position: sticky;
top: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
<div class="sticky-item"></div>
<div class="sticky-container">
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
I have a side navigation menu on my site. When pressed, it calls a JavaScript function that changes the alpha channel of the body tag. For some reason only part of the screen's alpha channel is changing (section, img, bootstrap containers are not). The section tag has a class that gives it a background color, I'm thinking this might be the issue. Which would be the smart way to get this working?
This is the code I'm using for the alpha management:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.body.style.background = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.background = "rgba(0,0,0,0)";
}
The html goes like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cripto Frog</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="sidebar.js"></script>
</head>
<main>
<header>
<span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
<img src="img/frog.jpg" alt="">
</header>
<body>
<!-- Side Menu -->
<div id="mySidenav" class="sidenav">
×
TOP_TEN_COINS
ALT_COINS
WHITE_PAPERS
YOUTUBERS
EXCHANGES
NEWS_SITES
CONTACTO
<section class="nav_divididor"></section>
<section class="nav_footer">hlkjhlkjhlk</section>
</div>
<section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
</section>
<!-- Use any element to open the sidenav -->
</body>
<span onclick="openNav()">open</span>
</main>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
</html>
css file
/* Secciones */
html{
margin-top: 0px;
/*overflow: hidden; */
}
body{
/* overflow-x: hidden;*/
}
p{
font-family: 'Lora';
font-style: normal;
font-weight: 700;
}
fieldset {
font-family: 'Lora';
font-style: normal;
font-weight: 100;
}
.nav_footer{
height: 90%;
background-color: black; /* Black*/
color: white;
display: flex;
align-items: flex-end;
/*overflow-x: hidden; */
}
.nav_divididor{
width: 100%;
background-color: #388E3C;
height: 12px;
}
.primera_section{
width: 100%;
height: 700px;
background-color: #FFFFFF; /* Black*/
}
.segunda_section{
width: 100%;
height: 700px;
background-color: #C8E6C9; /* Black*/
}
.tercera_section{
width: 100%;
height: 700px;
background-color: #BDBDBD; /* Black*/
}
.divisoria {
width: 100%;
background-color: black;
height: 2px;
}
.menu_burger{
position: absolute;
top:2;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white; /* Dark Green*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
display: none;
}
/* The navigation menu links */
.sidenav a {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: grey;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.
Is there a way to overlap the whole document with a gray transparent plane?
There is a codepen ilustrating your needs. (creating a dismissable popup and dimming the view)
HTML:
<div class="wrapper">
<button class="btn btn-success dim">Dim the page!</button>
<div class="dimmer">
<span class="exit">×</span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
</div>
</div>
CSS:
.wrapper {
padding: 2.5em;
margin: 0 auto;
width: 80%;
}
.dimmer {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.dim {
display: block;
margin: 2em auto;
z-index: 200;
}
.exit {
font-size: 100px;
color: red;
position: absolute;
top: 2px;
left: 2px;
opacity: 1;
cursor: pointer;
}
Javascript:
$(function() {
var dimmerButton = $('.dim');
var dimmer = $('.dimmer');
var exit = $('.exit');
dimmerButton.on('click', function() {
dimmer.show();
});
exit.on('click', function() {
dimmer.hide();
});
});
Note: The author of this is #srikarg
You will need to show an overlay div
<div id="overlay"></div>
Make it position fixed
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
and make it visible when you want to darken the page, here is how you do it
$(function(){
//Am hiding the overlay after 2 sec
$("#overlay").delay(3000).hide(200);
})
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="overlay"></div>
<h1>My Awesome Page</h1>
</body>
You can add a background-color to your body with css:
#overlay {
background-color: rgba(0,0,0,0.5); /* your color */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
Demo: http://jsfiddle.net/6gahqaej/2