I'm trying to make my entire container(mainContainer, containing a 100vh full screen video and a text overlay) to the left using a click on a div class(next hvr-forward) using jquery.
https://jsfiddle.net/Lo7xto2t/6/
$('.next').click(function() {$('.mainContainer').animate({"margin-right": '-=200'});});
Used the code above but its not working. Have tested it with css:borders so it is not a jquery problem.
HTML:
<div class = "mainContainer">
<video poster ="poster.png" autoplay loop>
<source src ="images/video.mp4" type ="video/mp4">
<source src ="video.webm" type ="video/webm">
</video>
<div class = "overlayAll">
<div class = "text">
We are BLXCK Co.
</div>
</div>
</div>
CSS:
video {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
background: transparent;
background-size: cover;
}
.mainContainer{
height: 100vh;
position: absolute;
opacity: 1;
}
.overlayAll {
z-index: 1;
position: absolute;
background: rgba(0,0,0,0.3);
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 120vh;
}
.text {
position: fixed;
max-width: 50vw;
min-width: 50vw;
top: 30vh;
bottom: 30vh;
left: 15vw;
color: white;
font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif;
font-size: 12vw;
display: flex;
line-height: 0.8em;
flex-direction: column;
justify-content: center;
align-items: center;
}
Also have used Inspector but it seems my mainContainer is not moving. Are there any other ways to move the entire container to the left upon a mouse click like a slider?
It would not animate because of the fixed property you gave to the video and .text elements.
Changing the mainContainer to relative and the sub elements to absolute (and some other small things, which you can see in the snippet), it works.
Hope it helps!
$('.next').click(function() {
$('.mainContainer').animate({
right: '+=100vw'
}, 2000);
});
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
background: transparent;
background-size: cover;
}
.mainContainer{
height: 100vh;
max-height: 100vh;
max-width: 100vw;
position: relative;
opacity: 1;
right: 0;
overflow: hidden;
}
.overlayAll {
z-index: 1;
position: absolute;
background: rgba(0,0,0,0.3);
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
}
.text {
position: absolute;
max-width: 50vw;
min-width: 50vw;
top: 30vh;
bottom: 30vh;
left: 15vw;
color: white;
font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif;
font-size: 12vw;
display: flex;
line-height: 0.8em;
flex-direction: column;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "mainContainer">
<video poster ="poster.png" autoplay loop>
<source src ="http://techslides.com/demos/sample-videos/small.mp4" type ="video/mp4">
<source src ="http://techslides.com/demos/sample-videos/small.webm" type ="video/webm">
</video>
<div class = "overlayAll">
<div class = "text next">
We are BLXCK Co.
</div>
</div>
</div>
Related
I'm trying to make a modal using pure CSS and HTML. So far I have this
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
The problem now is when I'm closing this modal, it's scrolling up. I think this is due to href="#". Is there any other way to close this modal using CSS that would not make it scroll up?
If it's not possible, how can I do it with as little javascript as possibe?
Instead of href = "#" use href = "#!". Your example is below:
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#!"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#!">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
filter blur is overflowing to header and sidebar. It is looking ugly ("overflow: hidden" doesn't work)
How to I fix the overflow ?
HTML:
<div class="subscribe">
<div class="subscribe__content">
<div class="subscribe__left">
<h2>Subscribe</h2>
<input type="text" class="subscribe__field" placeholder="Name">
<input type="button" class="subscribe__btn" value="Submit">
</div>
<div class="subscribe__right">
</div>
</div>
</div>
CSS:
.subscribe{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 20px 100px;
&::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center;
background-size: cover;
filter: blur(25px);
opacity: 0.8;
}
}
I've restructured your styles to set background-image to the element, and use a backdrop-filter on your ::before element. That way the corners will always be sharp but the blur filter will still be applied on the background.
Also, make sure that your .subscribe__content has z-index greater than .subscribe::before.
.subscribe {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 20px 100px;
background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center;
background-size: cover;
opacity: 0.8;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(25px);
z-index: 10;
}
&__content {
z-index: 20;
}
}
Currently I have a container with a hover overlay that darkens the entire container. I wish to show an edit button alongside the overlay right in the middle.
.service-inner {
text-decoration: none;
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pale-grey;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.service-inner:hover > .overlay {
position: absolute;
display: block;
top: 0;
width: 100%;
height: 100%;
left: 0;
background-color: black;
opacity: 0.8;
z-index: 100;
}
<div class="service-inner">
<div class="overlay"></div>
</div>
What would be the best way to go about this?
Add a div class="button" on the same level as your overlay and give it the same positioning properties but a higher z-index, then activate it on hover the same as your overlay element.
.button {
display:none;
}
.container:hover > .button{
position: absolute;
display: block;
top: 50%;
width:20%;
left: 40%;
background-color: green;
color:black;
z-index: 200;
}
I'm not sure how to center my text vertically. Basically, when I click a button the page will gray out with a loading text. I managed to center it horizontally but can't do it in vertical.
CSS
.LockOff {
display: none;
visibility: hidden;
}
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
bottom: 0px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ccc;
text-align: center;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
}
.lockMsg {
color:black;
font-weight: bold;
}
HTML
<script type="text/javascript">
function lockScreen() {
var lock = document.getElementById('divLock');
if (lock)
lock.className = 'LockOn';
lock.innerHTML = "<h1 class=\"lockMsg\">YOUR REQUEST IS BEING PROCESSED. PLEASE WAIT.</h1>";
}
</script>
<div id="divLock" class="LockOff"></div>
You need to change your CSS a little bit to achieve that as:
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
bottom: 0px;
top: 0px;
left: 0px;
width: 100%;
background-color: #ccc;
text-align: center;
padding: 0;
filter: alpha(opacity=75);
opacity: 0.75;
}
.lockMsg {
color: black;
font-weight: bold;
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
Just add these three lines to your css for .LockOn
.LockOn{
display:flex;
align-items:center;
justify-content:center;
}
Here's a working snippet. I changed your script a liitle bit to show it working.
(function lockScreen() {
var lock = document.getElementById('divLock');
if (lock){
lock.className = 'LockOn';
}
lock.innerHTML = "<h1 class='lockMsg'>YOUR REQUEST IS BEING PROCESSED. PLEASE WAIT.</h1>";
})();
.LockOff {
display: none;
visibility: hidden;
}
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
bottom: 0px;
top:0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ccc;
text-align: center;
filter: alpha(opacity=75);
opacity: 0.75;
display:flex;
align-items:center;
justify-content:center;
}
.lockMsg {
color:black;
font-weight: bold;
}
<div id="divLock" class="LockOff"></div>
I have to display a spinner.
The spinner has a class with the following style:
.spinner-ctn{
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
For display the spinner I try to use:
a
function showSpinnerSignUp(){
$('.spinner-ctn').css('display','block')
}
b
function showSpinnerSignUp(){
$('.spinner-ctn').show()
}
for some reason both of them doesn't work in safari
Add a # to <a href='#' and put a space between event. I try with safari work fine.
$(document).on('click','.skip-step',function(e){
$('.spinner-ctn').css('display','block')
})
.spinner-ctn{
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
link
<div class="spinner-ctn"><a class="spinner">test</a></div>
UPDATE
ok try, add class with display: block !important and toggle this.
$(document).on('click','.skip-step',function(e){
$('.spinner-ctn').toggleClass("spinner_block")
})
.spinner-ctn{
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
.spinner_block{
display:block !important;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
link
<div class="spinner-ctn"><a class="spinner">test</a></div>