clock face
I'm trying to make an analog clock using js/css/html .
The thing is that the clock's hand isn't working.
Rotating it from inside the js function dosn't seem to work. I tried changing the rotation degree manually from css, it worked.
The function is working I tried console-login the value of the seconds, it worked.
function ticktock() {
var time = new Date();
var second = time.getSeconds();
document.getElementsByClassName("clock-hand")[0].style.tranform = 'rotate(54deg)';
console.log(second);
setTimeout(ticktock, 1000);
}
ticktock();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
position: relative;
}
.clock {
background-image: url(https://i.stack.imgur.com/t1y7j.jpg);
width: 300px;
height: 300px;
background-size: cover;
border: 2px solid orange;
position: relative;
}
.clock-hand {
position: absolute;
top: 49px;
left: 51px;
border: 2px solid violet;
height: 200px;
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="clock-style.css">
<title>Document</title>
</head>
<body>
<h1>time teller</h1>
<div class="container">
<div class="clock">
<img src="https://i.stack.imgur.com/H0zgO.png" alt="clock-hand" class="clock-hand">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
</script>
<script src="clock-logic.js"></script>
</body>
</html>
clock hand
I voted to close the question because the issue is only a typo, but I still wanted to post this snippet with a working seconds hand as I had done it anyway...
function ticktock() {
var time = new Date();
var second = time.getSeconds();
document.getElementsByClassName("clock-hand")[0].style.transform = 'rotate(' + (second/60*360) + 'deg)';
console.log(second);
setTimeout(ticktock, 1000);
}
ticktock();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
position: relative;
}
.clock {
background-image: url(https://i.stack.imgur.com/t1y7j.jpg);
width: 300px;
height: 300px;
background-size: cover;
border: 2px solid orange;
position: relative;
}
.clock-hand {
position: absolute;
top: 49px;
left: 51px;
border: 2px solid violet;
height: 200px;
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="clock-style.css">
<title>Document</title>
</head>
<body>
<h1>time teller</h1>
<div class="container">
<div class="clock">
<img src="https://i.stack.imgur.com/H0zgO.png" alt="clock-hand" class="clock-hand">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
</script>
<script src="clock-logic.js"></script>
</body>
</html>
Related
the output that I want
the one that I have implemented so far
The grey colour background is the background colour of the lined div which is in absolute position to show the crop selection. I want the area inside the line without any colour so that part of the image would be visible and rest should be of grey background as it is.
.bounded-image {
width: fit-content;
position: relative;
}
img {
width: 292px;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
box-sizing: border-box;
width: 140.816px;
height: 260.12px;
top: 71.2428px;
left: 76.4561px;
background: transparent;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: black;
opacity: 0.4
}
<div className="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div className="bg-image"></div>
<div className="bordered-image" ></div>
</div>
I have prepared a possible solution to your problem. However, the question is whether the inner <div class="bordered-image"> is a fixed size? Because otherwise you need to adjust the value of the background-size: calc(170%); property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bounded-image {
width: fit-content;
position: relative;
width: 500px;
height: 700px;
}
img {
width: 100%;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
width: 300px;
height: 450px;
top: 130px;
left: 100px;
background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a);
background-position: center;
background-size: calc(170%);
background-repeat: no-repeat;
z-index: 5;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div class="bordered-image"></div>
<div class="bg-image"></div>
</div>
</body>
</html>
The only difference of the two block of codes below is
.parent::after{
content: " ";
display:table;
}
Why the edge Rect of a div can be smaller than the content Rect of it?
What's more?
I can't understand why the edge Rect of a div which can be detected by the other decorated is the same between the two,but the content Rect differs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="other"></div>
<style>
* {
box-sizing: border-box;
}
.parent{
width: 200px;
background-color: beige;
}
.parent::after{
content: " ";
display:table;
}
.child {
width: 100px;
height: 80px;
background-color: pink;
margin-bottom: -20px;
}
.other{
height: 100px;
width: 100px;
background-color: #86cfef3b;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="other"></div>
<style>
* {
box-sizing: border-box;
}
.parent{
width: 200px;
background-color: beige;
}
.child {
width: 100px;
height: 80px;
background-color: pink;
margin-bottom: -20px;
}
.other{
height: 100px;
width: 100px;
background-color: #86cfef3b;
}
</style>
</body>
</html>
section two
To get rid of the confluence of the negative margin, I made these codes.
The same ,the only difference of the two block of codes below is
.parent::after{
content: " ";
display:table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="other"></div>
<style>
* {
box-sizing: border-box;
}
.parent{
width: 200px;
background-color: beige;
}
.child {
width: 100px;
height: 80px;
background-color: pink;
margin-bottom: 20px;
}
.other{
height: 100px;
width: 100px;
background-color: #86cfef3b;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="other"></div>
<style>
* {
box-sizing: border-box;
}
.parent{
width: 200px;
background-color: beige;
}
.parent::after{
content: " ";
display:table;
}
.child {
width: 100px;
height: 80px;
background-color: pink;
margin-bottom: 20px;
}
.other{
height: 100px;
width: 100px;
background-color: #86cfef3b;
}
</style>
</body>
</html>
The most likely cause is your box-sizing. It's not being applied to pseudo-classes. You might want to also add a simple reset to your css. Here's an example:
*, ::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
font-size: 16px;
font-family: inherit;
}
You also have a /div tag not associated with another div. It's probably not causing any issues like an open div tag would cause, but you should delete that unnecessary tag.
<div class="other"></div>
</div> <!---Remove this tag--->
<style>
I saw this example in w3schools where you set svg line attributes like x1, y1, x2, y2 and a line appears on screen. I am using same method to draw svg line between div elements using javascript and it doesn't seem to work.
I have two circle from which I read there x and y values using boundingClientRect in javascript and setting it on svg line using set attribute. I want line connecting those two circles
Here is my code
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
But instead of using overflow: visible; you should change the size and/or positioning of the svg.
I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.
So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src = "images/maps.png" alt = "Maps" id="maps">
<img src="images/zug.png" alt= "Zug" id="train">
<h1>Meine Herausforderung</h1>
</body>
</html>
And the css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#maps {
width: 100%;
position: absolute;
}
#train {
position: absolute;
margin-left: 55%;
margin-top: 10%;
width: 3%;
}
Thanks for any help and sorry for my english.
Would be very happy to help you, if you provide more insight about the problem.
From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.
Please check this helps you
const $train = $('#train')
document.addEventListener('scroll', function (event) {
$train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
overscroll: scroll;
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#map-container {
width: 100%;
height: 100vh;
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
background-attachment: fixed;
background-size: cover;
}
#map, .inner-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow:scroll;
}
.inner-container {
background: transparent;
z-index: 2;
}
#train {
width:50px;
height:50px;
top: 20%;
position: absolute;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map-container">
<!-- <img src = "" id="maps"> -->
<div class="inner-container">
<img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
</div>
</div>
<h1>Meine Herausforderung</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
It has been two days im trying to solve this and i cant.
I made a customized div that displays images in a kind of a bar that auto-adjusts itself and stays centered.
And i made it work here:
https://codepen.io/SCalmStorm/pen/povwaed
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div id="containerItem">
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
And that is great. But as i worked on my other script i needed it inserted in another div with the class StandardSlide. But it completely breaks apart :(. And the only thing i understand is that it conflicts with the position:fixed. But when i turn it off, or change it to others it messes up my container. How can i solve this without messing it up? Or without changing the fixed? Why is the fix from this new container affecting the other divs :(, i know it has to do with the relative that inherits the parent style :(:
This one, it no longer adjusts the green bar to the images.
https://codepen.io/SCalmStorm/pen/xxbPqVw
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
.StandardSlide{
Position: fixed;
top: 10%;
background: rgba(75, 39, 73, 0.7);
left: 15%;
right: 15%;
/*width: 80%;*/
bottom: 5%;
/*background-color: white;*/
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 20;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div class="StandardSlide">
<div id="containerItem">
</div>
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
//alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>