I was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.
Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?
...
<style>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9);
}
#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}
#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}
</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>
...
You don't necessarily need JS :)
#overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 2s;
background: gold;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
}
#overlay-handler:checked ~ #overlay {
visibility: hidden;
opacity: 0;
}
<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
<h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>
If you set the overlay to have position: fixed and proper z-index it would cover the page by default.
Then declare a click listener on it to either set its display to none or remove it from the DOM.
Just don't use it as a container for the real content
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#overlay').addEventListener('click', clickEvent => {
clickEvent.target.classList.add('invisible');
});
});
#overlay {
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
background-color: rgba(100, 100, 100, 0.5);
padding: 4em 10%;
text-align: center;
font-weight: bold;
}
#overlay.invisible {
display: none;
}
<div id="overlay">
Click me to interact
</div>
<div>
This is the real content But you can't click me without closing the overlay
</div>
You can make the overlay disappear when the body of the HTML is clicked.
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>
Related
I have two modals, left and right, each drop down when clicked and want to have only one toggle appear as an on/off when activated.
Right now, both toggles appear when either modal is on. When the LEFT toggle is on and the modal drops down I want to hide the RIGHT toggle button and modal (and vice versa).
// common close button
$('.toggle').click(function() {
$(this).closest(".modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.modal {
position: fixed;
z-index: 10000;
/* 1 */
top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.modal.modal-visible {
visibility: visible;
}
.modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: #fff;
visibility: hidden;
opacity: 0;
transition: visibility 0s height 0.5s;
box-sizing: border-box;
}
.modal.modal-visible .modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.modal-wrapper {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
background-color: #fff;
box-sizing: border-box;
}
.modal-transition {
transition: all 0.5s;
transform: translateY(-100%);
opacity: 1;
}
.modal.modal-visible .modal-transition {
transform: translateY(0);
opacity: 1;
}
.modal-header,
.modal-content {
padding: 1em;
}
.modal-header {
position: relative;
top: 10%;
background-color: #fff;
}
.modal-close {
position: fixed;
top: 0;
right: 0;
padding: 1em;
color: #aaa;
background: none;
border: 0;
font-size: 18px;
}
.modal-close:hover {
color: #777;
}
.modal-heading {
font-size: 1.125em;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.modal-content>*:first-child {
margin-top: 0;
}
.modal-content>*:last-child {
margin-bottom: 0;
}
.modal.modal-scroll .modal-content {
max-height: 100%;
overflow-y: scroll;
}
.modal.modal-scroll .modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
button {
background: transparent;
font-family: 'Republique', sans-serif;
font-variant: normal;
font-weight: 400;
font-size: 24px;
line-height: 0.5;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
letter-spacing: .4px;
color: #000;
cursor: pointer;
outline: 0;
border: 0;
padding: 4px;
}
#righty {
position: fixed;
right: 10px;
top: 10px;
z-index: 100000;
}
#lefty {
position: fixed;
left: 10px;
top: 10px;
z-index: 100000;
}
body {
background: pink;
}
button {
color: white;
}
button:hover {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle" data-modal-id="lefty" id="lefty">LEFT</button>
<button class="toggle" data-modal-id="righty" id="righty">RIGHT</button>
<div class="modal" data-modal-id="lefty">
<div class="modal-overlay toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<button class="modal-close toggle"></button>
<h2 class="modal-heading">This is a modal on the left</h2>
</div>
<div class="modal-body">
<div class="modal-content">
</div>
</div>
</div>
</div>
<div class="modal" data-modal-id="righty">
<div class="modal-overlay toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<h2 class="modal-heading">This is a modal on the right</h2>
</div>
<div class="modal-body">
<div class="modal-content">
</div>
</div>
</div>
</div>
I tried various routes in CSS (nested divs, display:none, etc.) and struggling to find a solution. My javascript knowledge is very rudimentary, so perhaps there is a path there?
I added 4 lines in your JS:
We will declare 2 variables, one that will take the button's id (and therefore the modal id as well), and the other one, the id of the current visible modal.
We will then check if the two id are not matching, if it is true (meaning the id aren't the same) then we hide the visible modal by removing its class modal-visible.
If the two id are the same then we skip this step.
Lastly, we will toggle the modal with the button's id, it will either close it or open it.
That's all.
// common close button
$('.toggle').click(function() {
$(this).closest(".modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
var visible = $('.modal-visible').data("modal-id");
//check if the IDs are not the same
if (visible != modalid) {
$('.modal-visible').removeClass('modal-visible');
}
$(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
I am trying to run this script with a specific id or class of buttons as on my website I have multiple control.
Now, these things run okay when I don't use any class or id in it, but as soon as I add anything specific, it won't. do have a look at the code and let me know how we can solve it.
$(function() {
$("classIneed").click(function() {
$(".cover").fadeIn("300");
});
$("classIneed").click(function() {
$(".cover").css("flex");
});
$(".cover,.close").click(function() {
$(".cover").fadeOut("300");
});
$(".contents1").click(function(e) {
e.stopPropagation();
});
});
.cover {
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
background-size: 100%;
}
.contents1 {
background: #fff;
border: 5px solid #ccc;
border-radius: 30px;
position: fixed;
z-index: 5;
padding: 10px;
width: 25%;
}
.close {
position: absolute;
top: 15px;
right: 10px;
transition: all 200ms;
font-size: 55px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
.test {
display: flex;
justify-content: center;
}
#media only screen and (max-width: 480px) {
.contents1 {
width: 85%;
margin: 10%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="classIneed" type="button" style="border:hidden; background:#fff;padding:0px;"> <img style="padding:0px;" src="https://cdn.shopify.com/s/files/1/0462/5488/2983/files/Free-Skillet-HC-India-New-3_091a5e6b-0f58-418d-917c-fdfc9cc17a8b.png?v=1661337873" alt="gh" width="100%" height="10%"/>
</button>
<div class="cover">
<div class="test">
<div class="contents1">
<img src="https://cdn.shopify.com/s/files/1/0462/5488/2983/files/imgonline-com-ua-resizePERCRgtKVzgcOWZp.jpg?v=1665123456" alt="gh" width="100%" height="100%" />
<span class="close">×</span>
</div>
</div>
</div>
As for check I have used class = classIneed which does not work but if change it to just button it will.
You're missing a dot in your selection, as jQuery doesn't know what you're looking for.
You should use $("#id") or $(".class"), # is for IDs of elements, while . is for classes.
If you write the syntax without any of those, if I'm not mistaken, you're then actually searching for tag names, i.e. $("div"), $("h1") etc.
I am building a website with a lot of images. On the sidebar is a text (which stays in place with position: sticky), I would like it to change its color from black to white while overlapping the images it passes while scrolling down the webpage. How do I do that?
I found a Codepen-example, doing exactly this. But it's complicated to extract the requested code since the Javascript also handles a scrolling animation.
https://codepen.io/Atise/pen/WNOmyxY
My sidenav functions like this one: https://codepen.io/clairecodes/pen/bvWKdr
I have given this a second thought: The problem with this approach is that it won't work on an ordinary website while scrolling through its length vertically. The white text should only be visible when approached by the navbar. To make this work, the images needs to have some trigger that shows the text (.section-title.on-dark) only when being approached by the navbar.
<div class="outer-container">
<div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
<style>
body {
margin: 0;
min-height: 3000px;
font-family: 'Montserrat', sans-serif;
}
.outer-container {
max-width: 600px;
margin: auto;
width: 90%;
padding: 200px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 2;
background-size: cover;
background-position: center;
}
.section-title {
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -30%;
transform: translateY(-50%);
z-index: 1;
white-space: nowrap;
}
.section-title.on-dark {
color: white;
}
.section-title span {
position: relative;
display: block;
}
</style>
<h2 class="section-title on-dark">
<span class="paralax-title">
Live The Adventure
</span>
</h2>
</div>
<h2 class="section-title">
<span class="paralax-title">
Live The Adventure
</span>
</h2>
</div>
<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
const scrollInProgress = () => {
didScroll = true
}
const raf = () => {
if(didScroll) {
paralaxTitles.forEach((element, index) => {
element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
})
didScroll = false;
}
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
</script>
You're prebably looking for mix-blend-mode.
.bg {
width: 200vw;
height: 200vh;
background-image: url(https://images.pexels.com/photos/7718429/pexels-photo-7718429.jpeg);
background-size: cover;
}
.text {
margin: 0;
font-size: 50px;
position: fixed;
color: white;
mix-blend-mode: difference;
}
<div class="bg">
<h1 class="text">Lorem Ipsum</h1>
</div>
There are values other that difference. Read the MDN Docs and find the value that best suits your website.
I have several divs with absolute position on top of primary div which has relative position (duh). I am trying to make one div change its background-color etc when hovering another div within same parent div.
Now, I'm aware of adjacent-div classes but they don't seem to work (maybe because of absolute positioning).
Below is an example of my code (actual is a lot bigger). What would be best way to change for e.g. m2wrap-back width & color when hovering on m2wrap-hover (which overlays 100% on other divs)?
P.S. If CSS alone ain't an option, a jQuery solution can also work.
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover"></div>
</div>
<style>
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
</style>
You can not do it with pure css and your current html structure, need javascipt or jquery to do this.
Example:
$('.m2wrap-hover').hover(function() {
$(this).closest('.m2wrap').find('.m2wrap-back').addClass('hover');
}, function() {
$(this).closest('.m2wrap').find('.m2wrap-back').removeClass('hover');
})
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-back.hover {
width: 120px;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
</div>
Or if you want to use just css, you need to change the order of your elements (because it has position: absolute so the order doesn't matter):
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-hover:hover + .m2wrap-back {
width: 120px;
color: red;
}
<div class="m2wrap">
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
</div>
I am trying to make an on click image overlay, where you click the left icon and an image fades or slides in, but when you click the right icon a different image fades or slides in. Also, when you click either icon, the associated images fade or slide out.
I've been trying to use
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
to make the display go from none to block when you click the icon, but there is no way to use this function with two separate links. I am not very great with javascript so any help would be greatly appreciated. Thanks.
https://jsfiddle.net/hzfw00L7/
Are you looking for something like this? I have used Jquery to speed up the coding!
$(document).ready(function() {
$(".left").click(function() {
$("#overlay").fadeIn(3000);
});
$(".right").click(function() {
$("#overlay2").fadeIn(3000);
});
$("#overlay").click(function() {
$("#overlay").fadeOut(2000);
});
$("#overlay2").click(function() {
$("#overlay2").fadeOut(2000);
});
});
#overlay {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#content {
padding: 20px;
}
a.left {
display: block;
position: absolute;
top: 320px;
left: 80px;
z-index: 6;
height: 20px;
background-color: purple;
color: white;
font-family: Arial;
padding: 10px;
}
a.right {
display: block;
position: absolute;
top: 320px;
right: 80px;
z-index: 7;
height: 20px;
background-color: magenta;
color: white;
font-family: Arial;
padding: 10px;
}
#buttons {
height: 50px;
width: 300px;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay">
<div id="text">Overlay Text</div>
</div>
<div id="overlay2">
<div id="text">Overlay Text 2</div>
</div>
<div id="content">
<div id="buttons">
<a class="left">Turn on overlay effect</a>
</div>
<div id="content">
<a class="right">Turn on overlay effect 2</a>
</div>
</div>
</body>
</html>
Added Fade in and fade out animations!
For More Reference Go here