Click on a div to activate other div - javascript

How can I make multiple <div> elements with classes or id get active when I press on a <div>element that have class or id.
Like the picture below, I want it to go from a white screen to that type of screen that i made with css classes and ids.
https://i.stack.imgur.com/tPZou.jpg
You can see the phone I made under here. Press on the black area to get the white screen, I want to press the white to get the passcode screen: https://seigmann123.github.io/iphone12/phone.html
function screen() {
var e = document.getElementById("screen");
var c = window.getComputedStyle(e).backgroundColor;
if (c === "rgb(0, 0, 0)") {
document.getElementById("screen").style.background = "#ffffff";
}
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.phone {
position: relative;
background: rgb(32, 32, 32);
border-radius: 30px;
height: 560px;
width: 295px;
margin: 0 auto;
}
.sensores {
position: absolute;
background: rgb(32, 32, 32);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
height: 32;
width: 175;
margin: 0 auto;
right: 0;
left: 0;
}
#screen {
position: absolute;
background: #000;
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
.off-on-button {
width: 3px;
height: 60px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 125;
border-radius: 20px;
left: 294;
}
.sound-up {
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 115;
border-radius: 20px;
left: -295;
}
.sound-down {
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 160;
border-radius: 20px;
left: -295;
}
<div class="phone">
<div id="screen" onclick="javascript:screen();"></div>
<div class="sensores"></div>
<div class="off-on-button"></div>
<div class="sound-up"></div>
<div class="sound-down"></div>
</div>


Try this. Sample code to mimic what you want to achieve.
<!DOCTYPE html>
<head>
<title>Demo</title>
<style>
#whiteDiv, #blueDiv, #passwd{
height: 300px;
width:300px;
}
#whiteDiv, #passwd{
display: none;
}
</style>
</head>
<body>
<div style="border: 1px solid #000;width:300px;height:300px">
<div style="background-color:#08c" id="blueDiv"onclick="activateWhite();">
click me
</div>
<div style="background-color:#fff" id="whiteDiv" onclick="showPasswd();">
click me
</div>
<div style="background-color: #fff;" id="passwd">
<p>Enter password</p>
<input type="password">
</div>
</div>
<script>
function activateWhite(){
document.getElementById("whiteDiv").style.display = "block";
document.getElementById("blueDiv").style.display = "none";
}
function showPasswd(){
document.getElementById("passwd").style.display = "block";
}
</script>
</body>


Change JS to
function screen() {
var e = document.getElementById("screen");
e.classList.toggle("black-screen")
}
add this to css
#screen{
background:white;
...
...
}
.black-screen{
background:#000 !important;
}


I can try to explain better and show better.
I want to do so I can press on #screen to get #screen-on, so then #screen gets replaced with #screen-on. And when I press on #screen-on I want to get #password-screen as a overlay on #screen-on with #sircle on top
body{
display: flex;
justify-content: center;
align-items: center;
}
.phone{
position: relative;
background: rgb(32, 32, 32);
border-radius: 30px;
height: 560px;
width: 295px;
margin: 0 auto;
}
.sensores{
position: absolute;
background: rgb(32, 32, 32);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
height:32;
width: 175;
margin: 0 auto;
right: 0;
left: 0;
}
#screen{
position: absolute;
background: rgb(0, 0, 0);
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
#screen-on{
position: absolute;
background: rgb(0, 0, 0);
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
#sircle{
width: 65px;
font-size: 45px;
line-height: 1.4;
height: 65px;
background: #494545;
position: absolute;
right: 0;
text-align: center;
left: 0;
margin: 0 auto;
bottom: 0px;
top: 50;
border-radius: 50%;
color: #dcdcdc;
}
#password-screen {
position: absolute;
height: 540px;
width: 275px;
background-color: rgb(29, 27, 27);
right: 0;
left: 0;
top: 10;
margin: 0 auto;
opacity: 0.5;
border-radius: 30px;
}
.off-on-button{
width: 3px;
height: 60px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 125;
border-radius: 20px;
left: 294;
}
.sound-up{
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 115;
border-radius: 20px;
left: -295;
}
.sound-down{
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 160;
border-radius: 20px;
left: -295;
}

Related

javascript moving a div left and right

I made this mini game and I want that my "player" named div to move to left and right inside of the "game" div but I'm stuck. Can someone help me? I think my error is inside of the JavaScript file... Also if my "player" div moves, will my "gun" div move with it too?
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
const {
style
} = player;
switch (event.key) {
case 'ArrowRight':
style.left = `${parseInt(style.left) - modifier}px`;
break;
case 'ArrowLeft':
style.left = `${parseInt(style.left) + modifier}px`;
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
<script src="js.js"></script>

You need to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowRight':
player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px";
break;
case 'ArrowLeft':
player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px";
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>

HTML elements CSS property values acquired by .style aswell as per getComputedStyle() will be returned by Javascript as strings like 10px for div { left: 10px}, containing unit types depending on the CSS property.
You will have to substract the unit types from those strings and then your parseInt should work:
parseInt(style.left.replace('px', ''))

how to make clock hands move/rotate (html, css)

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));
}
}

Why isn't the background-size or background-repeat property working on my image slider?

I'm making an image slider in my JS and right now I'm just working on the right arrow button and having it cycle up through images in my img folder when that button is clicked. However when I click the arrow to go to the next image, the new image loses a couple properties I have set on it in the CSS; the background size and repeat properties. The fix I found was just adding them back on in the JS.
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
I don't want to do this though. Why do these properties stop working when I change the image?? Also I can't post my full code here because its too long and and the fiddle link won't be much help because you can't see the images
https://jsfiddle.net/yat5ncmk/3/
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat';
img.style.backgroundSize = 'cover';
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*---------------ABOUT---------------*/
.about-section {
background-color: #17a832;
width: 100%;
position: relative;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-line {
width: 350px;
height: 5px;
background-color: #ddae1a;
border-radius: 4px;
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background: url(img/fam-1.jpeg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
max-width: 50px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
.burrito, .taco, .guac, .nachos, .hot {
position: absolute;
transform: rotate(-45deg);
bottom: -130px;
right: 200px;
width: 300px;
height: 300px;
z-index: 3;
background-repeat: none;
}
.hot {
right: 345px;
width: 240px;
height: 240px;
z-index: 2;
transform: rotate(0deg);
}
.burrito {
bottom: -140px;
right: 180px;
z-index: 1;
}
.nachos {
transform: rotate(0deg);
right: 380px;
width: 165px;
height: 165px;
bottom: -170px;
}
.taco {
transform: rotate(0deg);
width: 220px;
height: 220px;
bottom: -180px;
right: 460px;
}
.guac {
transform: rotate(0deg);
right: 140px;
bottom: -180px;
width: 250px;
height: 250px;
}
.food-wrap {
position: relative;
right: 20px;
}
/*---------------MENU---------------*/
.menu-section {
background-color: #ddae1a;
display: flex;
width: 100%;
top: -100px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
/*background-image: linear-gradient(4deg, #edb12f 92%, #17a832 92%, #17a832);*/
}
.menu-section h1 {
font-size: 9.5rem;
position: absolute;
top: 30px;
left: 230px;
margin-top: -30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.menu-line {
width: 450px;
height: 5px;
background-color: #17a832;
border-radius: 4px;
position: absolute;
top: 220px;
left: 225px;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
padding-bottom: 120px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left #combo-platter:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.row div p {
background: #ddae1a;
overflow: hidden;
position: relative;
z-index: 1;
padding: 0 6px;
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*---------------HOURS---------------*/
.hours-section {
background-color: #17a832;
margin-top: -155px;
clip-path: polygon(0% 5%, 4.8% 0%, 95% 0%, 100% 4.8%, 100% 100%, 0% 100%);
position: relative;
}
.hours-section h1 {
text-align: center;
font-size: 5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.hours-line-left {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #ff4c4c;
position: absolute;
top: 10%;
left: 50px;
}
.hours-line-right {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #56ff47;
position: absolute;
top: 10%;
right: 50px;
}
.hours-wrap {
display: flex;
justify-content: center;
padding-bottom: 100px;
}
.hours {
display: flex;
border: 7px solid green;
padding: 25px;
}
.hours div div {
background-color: white;
color: black;
margin-bottom: 20px;
padding: 8px;
font-size: 3rem;
font-family: 'Josefin Sans';
border-right: 10px solid #56ff47;
}
.hours div div:last-child {
margin-bottom: 0;
}
.hours p {
margin: 0;
text-align: center;
}
.hours-open div {
margin-left: 30px;
}
.hours .hours-open p {
padding: 0 5px;
}
.design-wrap-left-side {
position: absolute;
left: 0;
top: 29.8%;
}
.hex-left, .hex-right {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 165px;
height: 165px;
background-color: limegreen;
top: 152px;
left: -16.5px;
position: absolute;
}
.hex-right {
top: 152px;
right: -16.5px;
}
.hex-inner {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 135px;
height: 135px;
background-color: #17a832;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.hex-arrow-left, .hex-arrow-right {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 70px solid limegreen;
position: absolute;
top: 200px;
right: -150px;
}
.design-wrap-right-side {
transform: rotate(180deg);
position: absolute;
right: 0;
bottom: 19.4%;
}
.hours-wrap .design-wrap-left {
transform: rotate(180deg);
position: relative;
top: -80px;
}
.hours-wrap .design-wrap-right {
position: relative;
top: 80px;
}
.design-wrap-left .arrow-top,
.design-wrap-right .arrow-top,
.design-wrap-left-side .arrow-top,
.design-wrap-right-side .arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid limegreen;
position: relative;
top: -100px;
left: 60px;
}
.change-color {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #6acc66;
position: absolute;
top: -10px;
}
/*---------------FOOTER---------------*/
.contact-section-background {
background-color: #666;
height: 300px;
clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -100px;
}
.contact-section {
display: flex;
background-color: #595959;
margin-top: -225px;
position: relative;
padding-bottom: 18px;
z-index: 1;
}
.contact, .location {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h1, .location h1 {
margin: 0;
font-family: 'Cedarville Cursive';
color: white;
font-size: 7rem;
}
.hex {
-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
background-color: #17a832;
transform: rotate(180deg);
width: 300px;
height: 150px;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #17a832;
width: 80px;
height: 80px;
position: absolute;
margin: 0 auto;
top: 60px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.contact p {
font-family: 'Josefin Sans';
font-size: 2rem;
margin-top: 0;
margin-bottom: 10px;
color: white;
}
.textarea {
position: relative;
min-width: 500px;
}
.contact textarea {
resize: none;
width: 100%;
color: #595959;
margin: 10px;
min-height: 150px;
font-family: 'Josefin Sans';
font-size: 1.5rem;
padding: 5px;
outline: none;
border: none;
background: #474646;
border-radius: 4px;
}
.contact button {
font-size: 1.5rem;
font-family: 'Josefin Sans';
background: darkgrey;
color: #595959;
padding: 4px;
padding-right: 6px;
padding-left: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 10px;
right: -20px;
transition: all .4s ease;
}
.contact button:hover {
color: #ddae1a;
}
.contact-line {
margin-top: 170px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 350px;
background: #ddae1a;
position: relative;
}
.links {
display: flex;
position: relative;
max-width: 400px;
top: -5px;
left: 7px;
}
.links i {
font-size: 2.5rem;
margin-right: 15px;
}
.links p {
font-size: 1.5rem;
margin-right: 30px;
margin-top: 8px;
}
#facebook {
color: #3b64ed;
cursor: pointer;
}
#twitter {
color: #5effeb;
cursor: pointer;
}
#yelp {
color: red;
cursor: pointer;
}
.contact-design-wrap-left {
position: absolute;
left: 0;
top: 40px;
max-height: 500px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 40px;
right: 0;
transform: rotate(180deg);
}
.contact-design-wrap-left .bottom {
height: 0;
}
#align {
position: absolute;
left: 70px;
top: -15px;
}
#align2 {
position: absolute;
left: 68px;
top: -5px;
}
.grey {
border-left: 60px solid #666;
}
.light-grey {
border-right: 60px solid #848484;
}
.same {
border-left: 60px solid #848484;
}
.lighter {
border-right: 60px solid #a8a3a3;
}
.map {
position: relative;
top: 50px;
}
.map i {
position: absolute;
color: #ddae1a;
font-size: 4rem;
left: 50%;
margin-left: -24px;
}
.location .map .street-1 {
width: 300px;
position: relative;
top: 80px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-2 {
width: 300px;
height: 15px;
position: relative;
top: 65px;
left: 300px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-3 {
margin-top: 40px;
width: 600px;
position: relative;
top: 30px;
height: 18px;
background-color: #848484;
border-radius: 8px;
}
.street-info {
color: white;
position: absolute;
font-family: 'Josefin Sans';
font-size: 1.2rem;
left: 20px;
padding-top: 3px;
}
.address {
position: absolute;
left: 50%;
top: 75px;
margin-left: -68.5px;
color: #ddae1a;
text-decoration: none;
font-family: 'Josefin Sans';
font-size: 1.2rem;
text-align: center;
}
.address:hover {
color: #ddae1a;
text-decoration: underline;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.8rem;
padding-bottom: 5px;
margin: 0 0 0 -253.89px;
}

when you reset the background-image via background, you reset also every other properties.
first thing to do is to reset only background-image not background which is the shorthand for most of the bg properties.
then, you might not need to reset background-size
rightArrow.addEventListener('click', function() {
num++;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
})
fiddle uses lorempixel image for demo https://jsfiddle.net/rnxwsf2q/

The background property contains ALL of the background-x subproperties in it.
Just set background-image instead.

jquery resizable 1px mismatch error

I am trying to use jquery resizable handlers with absolute position square divs
but when I click the "north" and "west" button(only this two direction) and drag just a little for resizing, the box itself became smaller by 1 or 2px
in north handler case, like (top:100px,height:100px => top:99px,height:99px)
what did I do wrong??
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
Here's a demo link!
when I drag "keeper" item to "screen" and move north resize handler little, the square makes problem

Please change box-sizing: border-box; to box-sizing: content-box;.
https://jsfiddle.net/6h02cmvf/
$(document).ready(function() {
$('#container > .ui-element-libraries-container > .ui-element-container').draggable({
opacity: 0.5,
helper: "clone",
appendTo: '#full',
cursor: "move",
revert: true
})
$('#screen').droppable({
drop: (event,ui)=>{
let layoutOffset=$('#screen').offset()
let element=ui.helper.clone().css({
'position': 'absolute',
'opacity': 1,
'left': (ui.position.left-layoutOffset.left)+'px',
'top': (ui.position.top-layoutOffset.top)+'px',
})
element.toggleClass('ui-element-container ui-element')
element.empty()
element.append("<div class='ui-resizable-handle ui-resizable-n'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-s'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-e'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-w'></div>")
element.appendTo('#screen')
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
ui.helper.remove()
}
})
})
.pane{
color: black;
background-color: white;
position: absolute;
display: block;
overflow: hidden;
border: 2px solid black;
}
#container{
margin: 0px;
left: 300px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
#screen{
margin: 0px;
left: 0px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
.ui-element-libraries-container{
width:100%;
}
.ui-element-container{
color: black;
background-color: yellow;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 33.3%;
min-width: 80px;
max-width: 90px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
overflow: hidden;
cursor: move;
}
.ui-element{
color: black;
background-color: white;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 100px;
height: 100px;
box-sizing: content-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
cursor: move;
}
.ui-resizable-handle{
position: absolute;
width: 7px;
height: 7px;
border: 1px solid blue;
background: white;
display: block;
}
.ui-resizable-n{
top: -4px;
bottom: auto;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-s{
top: auto;
bottom: -4px;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-e{
top: 50%;
bottom: auto;
left: auto;
right: -4px;
margin-top: -4px;
cursor: ew-resize;
}
.ui-resizable-w{
top: 50%;
bottom: auto;
left: -4px;
right: auto;
margin-top: -4px;
cursor: ew-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="full">
<div id="screen" class="pane">
screen
</div>
<div id="container" class="pane">
keeper
<div class="ui-element-libraries-container">
<div class="ui-element-container">
<div>
b
</div>
</div>
</div>
</div>
</div>

Poker table card effect

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>

Categories

Resources