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/
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>
i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>
Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}
How can I achieve a <div> overlap so that the div #inner-block us in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>
Hope this helps!
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></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 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>