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>
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 to make every one of these divs fits to the browser page in height and width. I also need to attached to the edge of the page when I see them until I scroll down to the next div. How do I do that?
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: auto;
width: 100%;
color: #fff;
}
.div1 {
background: #555;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div2 {
background: #ccc;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div3 {
background: #c55;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div4 {
background: #006;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
<div class="div4">DIV 4</div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
width: 100%;
color: #fff;
}
.div1 {
background: #555;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div2 {
background: #ccc;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div3 {
background: #c55;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div4 {
background: #006;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
<div class="div4">DIV 4</div>
</div>
.container has to have height: 100%; otherwise the DIVs in it won't get their 100% height.
I did one example just to show scenario I'm right now, I want the cards array on stagger to be showed on close on each player and not in middle as it is in example I did right now. Can anyone give me an idea of how can I achieve this effect? If you could fork the codepen demo that would be great.
// just for example
var cards = ['Cards', 'Cards', 'Cards', 'Cards'];
cards.map(function(card) {
var cardTemp = '<span class="player-card">' + card + '</span>';
$('.table').append(cardTemp);
});
TweenMax.staggerTo(".player-card", 1, {
rotation: 360,
y: 100
}, 0.5);
.table {
position: relative;
max-width: 700px;
height: 300px;
border: 1px solid black;
margin: auto;
}
.dealer {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 50%;
background-color: green;
}
.players {
position: absolute;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: orange;
color: #fff;
}
.players:nth-child(1) {
top: 0;
left: 0;
}
.players:nth-child(2) {
top: 0;
right: 0;
}
.players:nth-child(3) {
top: 50%;
right: 0;
transform: translateY(-50%);
}
.players:nth-child(4) {
right: 0;
bottom: 0;
}
.players:nth-child(5) {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.players:nth-child(6) {
left: 0;
bottom: 0;
}
.players:nth-child(7) {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.player-card {
position: absolute;
display: block;
width: 50px;
height: 30px;
background-color: red;
color: #fff;
text-align: center;
line-height: 30px;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="table">
<div class="dealer">Dealer</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
</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>
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/