I want an overlay of the whole screen except the form so people can focus on it.
This solution would be ideal, but the form won't change back.
body {
opacity: .4
}
.form:focus {
opacity: 1 /* crap, doesn't work */
}
This doesn't really work
some-element {
background: rgba(0, 0, 0, .4)
}
You can use a bit of javascript to select and interact with the parent of your inputs, as well as the overlay. You can toggle active class so you can manage your CSS with actual CSS, which I find cleaner.
$(document).ready(function() {
var overlay = $('#overlay');
$('input').focusin(function(){
$(this).parent().addClass('active');
overlay.addClass('active');
});
$('input').focusout(function(){
$(this).parent().removeClass('active');
overlay.removeClass('active');
});
});
form {
position: relative;
background-color: white;
padding: 20px;
}
form.active {
z-index: 100;
}
#overlay {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 0;
background-color: rgba(0,0,0,0.5);
}
#overlay.active {
display: block;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form>
<input type="text" name="" value="">
</form>
<div id="overlay"></div>
</body>
Related
From my understanding, ::before should appear below the element, and ::after should appear above of the element (in terms of z-index).
In the following example I am trying to make just the background color darker (not the foreground color) when one hovers over the button. Even though I used ::before it still appears in front. Why? I know I could fix it with z-index, but according to this comment which has 6 upvotes:
I think it's better to use :before so you get the right stacking order without playing with z-index.
I should not have to, and the order should be correct?
.parent {
--my-color: red;
}
button {
color: blue;
background-color: var(--my-color);
padding: 8px 16px;
position: relative;
}
button:hover {
background-color: transparent;
}
button:hover::before {
display: block;
content: "";
position: absolute;
top: 0; left: 0; width: 50%; height: 100%; /* width is 50% for debugging (can see whats below) */
background-color: var(--my-color);
filter: brightness(80%);
}
<div class="parent">
<button type="button">CLICK ME</button>
</div>
There's no difference between ::before and ::after regarding the z-index or z-axis order. By default both will be placed in front of their parent, covering it (if their position is defined accordingly). To achieve z-axis layering beyond that, you need to actually use a z-index (besides a combination of relative and absolute position).
Addition after comment:
In the snippet below there are two variations of the situation. The only difference if that once ::after is used, once ::before, both times without a z-index, and both time with the same result, i.e. the pseudo element covering its parent:
.parent {
--my-color: red;
}
button {
color: blue;
background-color: var(--my-color);
padding: 8px 16px;
position: relative;
}
button:hover {
background-color: transparent;
}
.parent:nth-child(1) button:hover::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--my-color);
filter: brightness(80%);
}
.parent:nth-child(2) button:hover::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--my-color);
filter: brightness(80%);
}
<div class="parent">
<button type="button">CLICK ME</button>
</div>
<div class="parent">
<button type="button">CLICK ME</button>
</div>
So, to come back to your question in your second comment: Yes, they are wrong - you need to use a z-index to move the pseudo element behind the parent.
So your actual solution should look like this, using a negative z-index: -1; for the pseudo element (and you could as well use ::after here, it doesn't matter...).
.parent {
--my-color: red;
}
button {
color: blue;
background-color: var(--my-color);
padding: 8px 16px;
position: relative;
}
button:hover {
background-color: transparent;
}
button:hover::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--my-color);
filter: brightness(80%);
}
<div class="parent">
<button type="button">CLICK ME</button>
</div>
I would like my scroll to work like this when the user scrolls. e.g to start to fill up instead of moving.
Is it possible to make the scroll-thumb grow or to style the scrollbar-track-piece different before and after the thumb?
Here is a small example how to implement this loader
window.addEventListener("scroll", (e) => {
var html = document.documentElement;
let step = 100 / (html.scrollHeight - window.innerHeight);
let loader = document.getElementById("scrollprogress");
loader.style.width = (step * html.scrollTop) + "%";
})
#scrollprogress {
height: 5px;
position: fixed;
left: 0;
top: 0;
background: orange;
}
.backgr {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 5px;
background: lightgrey;
z-index: -1;
}
.box {
height: 3000px;
}
<div id="scrollprogress"></div>
<div class="backgr"></div>
<div class="box"></div>
You can approximate this using negative box shadow:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-thumb {
background-color: orange;
box-shadow:-1000vmax -1000vmax 0px 1000vmax orange;
}
body {
width:300vw;
height:300vh;
background:linear-gradient(60deg,red,blue,orange);
margin:0;
}
html {
background:#fff;
}
I have a div that appears as an "X" (used to close a window):
<div class="alertwrapper" style="display:inline-block;">
<div class="obj"></div>
<div class="x"></div> //<-----ELEMENT IN QUESTION
</div>
The following are the CSS properties of this element:
.x {
display: none !important;
position: absolute !important;
left:0;
top:0;
transition: transform .25s ease-in-out;
z-index:999;
}
.x:before {
content: "";
position: absolute;
//Here, I've also tried display:none !important;
left: 48%;
margin-left:-495px;
right: 0;
top: 115px;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(45deg);
transform-origin: center;
z-index:999;
}
.x:after {
content: "";
position: absolute;
//Here, I've also tried display:none !important;
left: 48%;
margin-left:-495px;
right: 0;
top: 115px;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(-45deg);
transform-origin: center;
z-index:999;
}
This div should not be displayed until another element is clicked, at which point, it should appear, as defined by the following code:
<script type="text/javascript">
$(document).ready(function () {
$('body').on('click', '.ActiveQuestionCycler', function() {
$("div.x").fadeIn(300).delay(1500);
$("div.obj").fadeIn(300).delay(1500);
});
});
</script>
When the page loads, however, the div "x" is visible, before .ActiveQuestionCycler is clicked. (The display is not set to none.) I think this has to do with the pseudo-classes before and after overriding this but I can't figure out why.
(div.obj DOES fade in when .ActiveQuestionCycler is clicked.)
There are no error alerts in the source.
This comment /// STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON on line 109 is invalid. Change it to:
/* STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON */
and it should work. Remember to drop that display: none; into the .x
So it will look like:
.x {
display: none;
/* your other styles */
}
While // comment is normal for most programming languages, regular css does not accept it and css comments go like this /* comment */
When I click the back button on the browser (the latest Firefox) after closing a popup on my dev site, the back button doesn't work, and the popup reopens, which causes a loop where the user can't use their back button.
I think it's either redirect (the # in the URL) or session related. But none of the cookie scripts seem to work. I'd like the popup to only open if the user clicks the button to open it.
Th site is currently offline. I'm just hard-coding it with a browser and a code editor at the moment.
I'm hoping someone can tell me what I'm missing. It's a pretty simple CSS popup. Here is the code for the popup:
/*Popup*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
transition: all 5s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #08899e;
}
.popup .content {
max-height: 50%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<a class="button" href="#popup1" data-rel="back">Let me Pop up</a>. Add more text here...
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<h2>Title Goes Here...</h2>
<div class="content">
Text goes here....
</div>
</div>
</div>
Have you tried with this script?
if (window.location.hash) {
if (window.history && history.pushState) {
window.history.pushState("", document.title, window.location.pathname);
} else {
// Prevent scrolling by storing the page's current scroll offset
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = '';
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}
}
I also found anther article for you : [question] Close pop up on back button
I have setup an animation in my application on ngView using ngAnimate. Every time there is a state change, the next view slides in from the right.
I would like to be able to reverse this, so that in some instances, the view slides in from the left (if the user is going back).
Since the only classes offered are .ng-enter, .ng-leave, and .*-active, what are my options? Is this even possible?
Here's a CodePen, OR see my sample code here:
html
<div ng-app="app">
<div ng-controller="DemoController as vm">
<div ui-view class="foo"></div>
</div>
</div>
css
html,
[ui-view] {
background: yellow;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
[ui-view].ng-enter,
[ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
opacity: 0;
transform:translate3d(100%, 0, 0);
/*transform:scale3d(0.5, 0.5, 0.5);*/
}
[ui-view].ng-enter-active {
opacity: 1;
transform:translate3d(0, 0, 0);
/*transform:scale3d(1, 1, 1);*/
}
[ui-view].ng-leave {
opacity: 1;
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
transform:translate3d(-100%, 0, 0);
}
javascript
'use strict';
angular.module('app', ['ui.router', 'ngAnimate'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/one');
$stateProvider
.state('one', {
url: '/one',
template: '<div class="one"><h1>ONE!</h1><button ng-click="vm.two()">go to two</button></div>'
})
.state('two', {
url: '/two',
template: '<div class="two"><h1>TWO!</h1><button ng-click="vm.one()">go to one</button></div>'
});;
})
.controller('DemoController', DemoController);
DemoController.$inject = ['$state'];
function DemoController($state) {
this.one = function() {
$state.go('one');
}
this.two = function() {
$state.go('two');
}
}
I'm not going to do all the leg work to code this but will provide suggested way to do it.
Will require you to check history within $stateChangeStart and compare path to the next path
Toggle a class on ui-view based on match or not
Then write a set of css rules that are more specific to that class
[ui-view].ng-enter.fromRightClass{}