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>
Related
mobile menu closed (the pink links are unclickable because of the menu)
html {
overflow-x: initial !important;
}
/*nav-bar-desktop*/
.mainNav {
display: none;
}
/*nav-bar-mobile*/
.page-header {
background: #322759;
width: 100%;
height: 20%;
position: fixed;
.logo {
position: fixed;
width: 35%;
margin-top: -28px;
margin-left: -40px;
}
.nav-bar {
z-index: -1;
}
.page-header-links {
z-index: 0;
}
}
.nav-bar-mobile {
position: relative;
display: block;
}
.nav-bar-mobile button {
position: fixed;
right: 40px;
top: 40px;
z-index: 2;
cursor: pointer;
background: transparent;
border: none;
}
.menuNav {
overflow-y: none;
list-style: none;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 0;
overflow: hidden;
max-width: 414px;
text-align: center;
}
.menuNav.showMenu {
width: 100%;
right: 0px;
height: 100vh;
padding-top: 200px;
position: fixed;
background: #322759;
.mobile-nav-monster {
position: fixed;
left: 0;
bottom: 0;
width: 65vw;
justify-content: flex-start;
}
}
.nav-tabs {
padding: 20px;
border-bottom: none !important;
text-decoration: none;
color: #D9D8D8;
}
.menuNav:link {
color: #D9D8D8;
}
.menuNav:visited {
color: #D9D8D8;
}
.menuNav:active {
color: #E87DA6;
}
.hamburger-close {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
.hamburger-open {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
}
This is my css file containing the styling for the mobile hamburger menu. The links are clickable when I set the display:none for either the nav-bar class (which is the styling for the grid containing the nav bar) or the menuNav (styling for the actual hamburger menu, note it is different from mainNav which is the desktop ver). I've been playing around with z-index but they don't really affect anything (assuming this is because I have to go through all the pages and make them a higher z index than the hamburger menu) but I was wondering if there was a different solution?
Check the position style and also check if you have set the z-index properly on the elements. The greater z-index appears in the front.
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>
I have a responsive/height image, I want to put absolute elements into img, one by corner but I don't know how to do it, because image size will be dynamic.
Code:
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>
Thanks
Example image
firefox
You need to give max-width to image container
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
max-width: 100%;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>
Maybe you can adapt this example for your exact needs:
#contenedorimagen {
position: relative;
width: 100%;
height: 100%;
}
#contenedorimagen #i {
width: 100%;
height: auto;
display: block;
}
#contenedorimagen div {
background: #000;
padding: 15px;
color: #fff;
}
#c {
position: absolute;
top: 0;
left: 0;
}
#h {
position: absolute;
top: 0;
right: 0;
}
#pm {
position: absolute;
bottom: 0;
left: 0;
}
<div id="contenedorimagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
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>
I am trying to get different divs to fade in and out when I click a image with a <a href> in it and # to make it fade in and out. I can not get it to fade in and out no matter what I try. This is my code:
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#triggerButton').click(function (e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$('#casualshirt').fadeIn('fast');
});
});
});
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 800px;
overflow: hidden;
z-index:0;
}
#Background {
left: 0px;
top: 0px;
position: absolute;
width: 600px;
height: 800px;
z-index:1;
}
#Layer1 {
left: 24px;
top: 16px;
position: absolute;
width: 285px;
height: 762px;
z-index:2;
}
#Rectangle1 {
left: 34px;
top: 59px;
position: absolute;
width: 260px;
height: 512px;
z-index:3;
}
#Layer6 {
left: 339px;
top: 541px;
position: absolute;
width: 98px;
height: 116px;
z-index:4;
}
#Shirts {
left: 391px;
top: 8px;
position: absolute;
width: 133px;
height: 42px;
z-index:5;
}
#Layer2 {
left: 258px;
top: 138px;
position: absolute;
width: 260px;
height: 139px;
z-index:6;
}
#Layer4 {
left: 252px;
top: 315px;
position: absolute;
width: 197px;
height: 188px;
z-index:7;
}
#Layer5 {
left: 498px;
top: 366px;
position: absolute;
width: 62px;
height: 86px;
z-index:8;
}
#Layer7 {
left: 407px;
top: 492px;
position: absolute;
width: 174px;
height: 165px;
z-index:9;
}
#Layer8 {
left: 366px;
top: 685px;
position: absolute;
width: 55px;
height: 108px;
z-index:10;
}
#Layer9 {
left: 490px;
top: 670px;
position: absolute;
width: 98px;
height: 101px;
z-index:11;
}
#Layer10 {
left: 221px;
top: 642px;
position: absolute;
width: 130px;
height: 117px;
z-index:13;
}
#Layer3 {
left: 368px;
top: 95px;
position: absolute;
width: 260px;
height: 182px;
z-index:14;
}
.overlay {
display: none;
}
#map {
/*right: -780px; removed for demo purposes */
width: 285px;
height: 762px;
padding: 29px;
background: url(http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png) no-repeat;
}
#station_A {
top: 0%;
/* whatever you like */
left: 0%;
/* whatever you like */
position: absolute;
}
#station_B {
top: 0%;
/* whatever you like */
left: 0%;
/* whatever you like */
position: absolute;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background-image: url('/images/shirt_sprites.png');
display: block;
height: 72px;
padding: 0;
width: 72px;
}
#paradisetanktop + #paradisetanktop_s {
background-position: 72 0;
}
#paradisetanktop:checked + #paradisetanktop_s {
background-position: 0 0;
}
#bandanatop + #bandanatop_s {
background-position: 0 0;
}
#bandanatop:checked + #bandanatop_s {
background-position: 0 0;
}
button {
background-image: url(images/Next.png);
background-repeat: no-repeat;
background-position: 50% 50%;
/* put the height and width of your image here */
height: 27px;
width: 55px;
border: none;
}
button span {
display: none;
}
#casualshirt {
width: 384px;
height: 609px;
left: 350px;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
position: absolute;
display: none;
z-index: 15;
}
#firstscreen {
width: 384px;
height: 609px;
left: -30px;
position: absolute;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/firstscreen.png') no-repeat;
z-index: 12;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="firstscreen"></div>
<div id="background">
<div id="Background"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Background.png"></div>
<div id="Layer1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png"></div>
<div id="map"></div>
<div id="Rectangle1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Rectangle1.png"></div>
<div id="shirts">
<div id="Shirts"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Shirts.png"></div>
<div id="Layer2"><a href="#" id="triggerbutton"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer2.png"></div>
<div id="Layer4"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer4.png"></div>
<div id="Layer5"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer5.png"></div>
<div id="Layer6"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer6.png"></div>
<div id="Layer7"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer7.png"></div>
<div id="Layer9"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Next.png"></div>
<div id="Layer10"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer10.png"></div>
<div id="Layer3"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer3.png"></div>
<div id="casualshirt"></div>
</div>
<div id="colors"></div>
</div>
I've researched this thoroughly and can not get it to work.
UPDATE: I did Include Fiddle but it got removed here is the fiddle
UPDATE: Updated Fiddle with fixed for the id.
You must remove trigger click function outside of document load. Because you added jquery lib inside body element.
Also you can fade out and fade in target parent div element for flashing thing.
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
});
});
Try this fiddle: http://jsfiddle.net/aLrf1cLz/4/
UPDATE 1:
CSS:
#casualshirt {
top: 100px;
width: 384px;
height: 609px;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
position: absolute;
display: none;
z-index: 123123;
}
JS:
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut();
$('#casualshirt').fadeIn()
});
});
Fiddle: http://jsfiddle.net/aLrf1cLz/8/