Complete noob here,
I am trying to semi align a stacked clock with the hours on top and the minutes below, the issue is is that at certain times the alignment of the numbers looks very off which is shown below, if I fully align the numbers vertically I feel thaty the spacing between the numbers horizontally will be either too large or small, is there a way to have a compromise between the two?. Sometimes the clock looks great but sometimes it looks a bit off.
I am trying to replicate the AOD clock introduced with Android 12,
Here are the files
https://github.com/Crucial-hash/material-you-clock
You cant screenshot the always on display so I have tried my best by taking a photo side by side.
Clock Image
function displayTime(){
var dateTime = new Date();
var hrs = dateTime.getHours();
var min = dateTime.getMinutes();
if (hrs > 12){
hrs = hrs -12
}
if (hrs > 12){
hrs = hrs -12
}
if (hrs < 10){
hrs = "0" + hrs
}
if (min < 10){
min = "0" + min
}
document.getElementById('hours').innerHTML = hrs;
document.getElementById('minutes').innerHTML = min;
}
setInterval(displayTime, 10);
var width = screen.width;
var height = screen.height;
#font-face{
font-family: myfont;
src:url(productsans.ttf);
}
body{
margin: 0%;
padding: 0%;
background-color: black;
}
span{
display: flex;
justify-content: center;
height: 449px;
width: 449px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.container{
font-family: 'myfont';
color: #fff;
position: absolute;
top: 36%;
left: 28%;
transform: translate(-100%, -50%);
font-size: 370px;
}
.container1{
font-family: 'myfont';
color: #fff;
position: absolute;
top: 64%;
left: 28%;
transform: translate(-100%, -50%);
font-size: 370px;
}
<!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">
<title>Android 12 Digital Clock</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="container">
<span id="hours"></span>
</div>
<div class="container1">
<span id="minutes"></span>
</div>
</body>
</html>
To center your containers, just remove position absolute and use flex property.
Using flexbox you don't need to use 2 differents class to center elements.
function displayTime(){
var dateTime = new Date();
var hrs = dateTime.getHours();
var min = dateTime.getMinutes();
if (hrs > 12){
hrs = hrs -12
}
if (hrs > 12){
hrs = hrs -12
}
if (hrs < 10){
hrs = "0" + hrs
}
if (min < 10){
min = "0" + min
}
document.getElementById('hours').innerHTML = hrs;
document.getElementById('minutes').innerHTML = min;
}
setInterval(displayTime, 10);
var width = screen.width;
var height = screen.height;
#font-face{
font-family: myfont;
src:url(productsans.ttf);
}
body{
margin: 0%;
padding: 0%;
background-color: black;
}
span{
display: flex;
justify-content: center;
height: 449px;
width: 449px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.container{
font-family: 'myfont';
color: #fff;
display: flex;
justify-content: center;
/*position: absolute; REMOVE
top: 36%;
left: 28%;
transform: translate(-100%, -50%);*/
font-size: 370px;
}
/*.container1{
display: flex;
justify-content: center;
font-family: 'myfont';
color: #fff;
position: absolute; REMOVE
top: 64%;
left: 28%;
transform: translate(-100%, -50%);
font-size: 370px;
}*/
<!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">
<title>Android 12 Digital Clock</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="container">
<span id="hours"></span>
</div>
<div class="container">
<span id="minutes"></span>
</div>
</body>
</html>
Related
I need to make an invisible background color that appears after 10 seconds of losing a game. In the finish, I also should make a button "Restart" that restarts the game.
Please, help me!
I have found some information about restarting on the internet, but I couldn't understand most of this, so please may you explain to me a very simple method? I am just a student, it totally fits me more than difficult theories.
const width = $(document).width() - 200 // ширина окна html 1366
const height = $(document).height() - 200 // высота окна html 600
let timer = 10
let points = 0
let isClick = false
let intervalID
$('.item-1').click(function () {
setRandomPosition()
$('.points').text(points)
points += 10
if(points == 100) {
endGame('Вы выиграли')
clearInterval(intervalID)
}
})
let intervalID = setInterval(function() {
if(timer > 0) {
timer--
$('.timer').text(timer)
} else {
endGame('Вы проиграли')
}
}, 1000)
function setRandomPosition() {
$('.item-1').css({
'top' : Math.floor(Math.random() * height),
'left' : Math.floor(Math.random() * width)
})
}
function endGame(endText) {
$('.end').css('display', 'flex')
$('h1').text(endText)
}
* {
margin: 0;
padding: 0;
}
.item {
width: 200px;
aspect-ratio: 1/1;
background-color: lightpink;
position: absolute;
}
.timer {
font-size: 65px;
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.points {
font-size: 65px;
position: absolute;
right: 20px;
z-index: 1;
}
.end {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.497);
align-items: center;
justify-content: center;
}
.restart {
}
<!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">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="item item-1"></div>
<p class="timer">10</p>
<p class="points">0</p>
<div class="end">
<h1></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
It's a bit hard to know how you want the game to reset since you haven't include information about how it should reset, but here is an example:
$('.end h1').click(function() {
points = 0;
$('.points').text(points);
timer = 10;
intervalID = setInterval(_timer, 1000)
});
Also I've moved your code a bit around, but nothing major.
Demo
const width = $(document).width(); - 200 // ширина окна html 1366
const height = $(document).height(); - 200 // высота окна html 600
let timer = 10;
let points = 0;
let isClick = false;
let intervalID;
$('.item-1').click(function() {
setRandomPosition()
points += 10
$('.points').text(points)
if (points == 100) {
endGame('Вы выиграли')
clearInterval(intervalID)
}
})
function _timer() {
$('.end').css('display', 'none')
if (timer > 0) {
timer--
$('.timer').text(timer)
} else {
endGame('Вы проиграли')
}
};
intervalID = setInterval(_timer, 1000)
function setRandomPosition() {
$('.item-1').css({
'top': Math.floor(Math.random() * height),
'left': Math.floor(Math.random() * width)
})
}
$('.end h1').click(function() {
points = 0;
$('.points').text(points);
timer = 10;
intervalID = setInterval(_timer, 1000)
});
function endGame(endText) {
$('.end').css('display', 'flex')
$('h1').text(endText)
}
* {
margin: 0;
padding: 0;
}
.item {
width: 200px;
aspect-ratio: 1/1;
background-color: lightpink;
position: absolute;
}
.timer {
font-size: 65px;
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.points {
font-size: 65px;
position: absolute;
right: 20px;
z-index: 1;
}
.end {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.497);
align-items: center;
justify-content: center;
}
.restart {}
<!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">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="item item-1"></div>
<p class="timer">10</p>
<p class="points">0</p>
<div class="end">
<h1></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</body>
</html>
I have a timer that sits ontop of an image. The timer represents a countdown to a specific date. The problem is when the browser is resized the timer will hold true but the banner will stretch etc. I have noticed if I set the website to width 130% it will work flawlessly. The only issue is the horizonal scrollbar upon launch will default to the left. I am trying to have it default to the center.
<!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 maximum-scale=1.0 user-scalable=no">
<title>Document</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght#1,800&family=Oswald&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300;400;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #00628c;
width: 100%;
min-height: 100vh;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.remaining-time {
display: flex;
align-items: center;
position: absolute;
top: var(--time-unit-wrapper-top);
left: var(--time-unit-wrapper-left);
}
.remaining-time .separator {
padding: var(--time-unit-seperator-padding);
color: #FFFFFF00;
font-size: 12px;
}
.remaining-time .days,
.remaining-time .hours,
.remaining-time .minutes,
.remaining-time .seconds {
display: flex;
justify-content: center;
align-items: center;
width: var(--time-unit-width);
background-color: var(--time-unit-background-color);
color: var(--time-unit-color);
font-size: var(--time-unit-font-size);
font-family: var(--time-unit-font-family);
border-radius: 25%;
}
:root {
--time-unit-wrapper-top: 27.5%;
--time-unit-wrapper-left: 44%;
--time-unit-seperator-padding: 0 8px;
--time-unit-width: 20px;
--time-unit-background-color: #FFFFFF00;
--time-unit-color: #E5D5B5;
--time-unit-border-radius: 4px;
--time-unit-font-size: 13px;
--time-unit-font-family: 'Exo';
}
</style>
</head>
<body>
<div class="hpf_body">
<img src="/CServer/HomepageFeed/7D30D9006D4E4156BE0F54B95A6CFB69/LMSNEW.gif" alt="banner" width="500%" style="width: 100%;">
<div class="remaining-time">
<span class="days"></span>
<span class="separator">:</span>
<span class="hours"></span>
<span class="separator">:</span>
<span class="minutes"></span>
<span class="separator">:</span>
<span class="seconds"></span>
</div>
</div>
</header>
<script>
let intervalHandler;
// (year, months, date, hours, minutes, seconds)
const startTime = new Date(2022, 1, 9, 10, 45, 0);
const endTime = new Date(2022, 7, 12, 0, 0, 0);
const header = document.querySelector('.header');
const remainingDaysSpan = document.querySelector('.remaining-time .days');
const remainingHoursSpan = document.querySelector('.remaining-time .hours');
const remainingMinutesSpan = document.querySelector('.remaining-time .minutes');
const remainingSecondsSpan = document.querySelector('.remaining-time .seconds');
const addLeadingZero = str => {
return (str.length == 1) ? '0' + str : str;
}
const updateRemainingTime = () => {
const curTime = new Date();
const timeDffSecs = (endTime - curTime) / 1000;
if(timeDffSecs <= 0) {
clearInterval(intervalHandler);
return;
}
const remainingSeconds = timeDffSecs;
const remainingMinutes = remainingSeconds / 60;
const remainingHours = remainingMinutes / 60;
const remainingDays = remainingHours / 24;
remainingDaysSpan.innerText = addLeadingZero(Math.floor(remainingDays).toString());
remainingHoursSpan.innerText = addLeadingZero(Math.floor(remainingHours % 24).toString());
remainingMinutesSpan.innerText = addLeadingZero(Math.floor(remainingMinutes % 60).toString());
remainingSecondsSpan.innerText = addLeadingZero(Math.floor(remainingSeconds % 60).toString());
}
intervalHandler = setInterval(() => {
updateRemainingTime();
}, 100);
</script>
</body>
</html>
I want to display a dot at specific pixel on image click. I'm displaying it by giving top and left values in %. What happening is the dot isn't moving when clicked another pixel present inside the dot.
When click outside then it is moving. I don't understand why this is happening.
May be it is because there is very small change in top and left values for each pixel.
I've updated CSS for displaying dot within the circle
.hObiiS{
border: solid 1px #303030 !important;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
box-shadow: none !important;
height: 9px !important;
position: absolute;
transform: translate3d(-50%, -50%, 0);
width: 9px !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hObiiS::before{
position: absolute;
content: '';
width: 1px;
height: 1px;
background-color: rgb(224, 1, 1);
border-radius: 50%;
}
<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>
Can someone please provide solution to move dot per pixel ?
Here is your problem solution.
let container = document.querySelector('img');
let dot = document.getElementById('dot');
document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
var parentPosition = getPosition(container);
var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
dot.style.left = xPosition + "px";
dot.style.top = yPosition + "px";
}
});
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
.container {
position: relative;
cursor: "crosshair";
}
#dot {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
display: inline-block;
background-color: red;
transform: translate(100, 0);
}
<!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">
<title>Document</title>
</head>
<body>
<div class="container">
<img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
<span id="dot" />
</div>
</body>
</html>
Codepen
Your mouse click position (e.clientX and e.clientY) is relative to your browser's top-left corner that's why your click position is not accurate. You can study the details explanation in this article.
Move Element to Click Position
You need to stop the dot from stopping the click going through to the image.
You can use pointer-events for that.
Here's a simple example:
.container {
position relative;
display: inline-block;
width: 30vmin;
height: 30vmin;
}
img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.dot {
background: red;
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
pointer-events: none;
}
<div class="container"><img onclick="alert('I saw the click');" src="https://picsum.photos/id/1015/300/300">
<div class="dot"></div>
</div>
I am attempting to create a horizontal scroll of a ul populated by an ajax call to an xml document. As constituted, the content will scroll but the list items are stacked rather than side by side. Research suggests that I can achieve the desired result with some simple css. However, I have been unable to successfully make this happen...
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<link href="css/wneRSS.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="rss">
<div class="list"><ul class="feeder"></ul></div>
</div>
</body>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "XMLSource",
dataType: "xml",
success: function(xml){
$(xml).find('row').each(function(){
var sfirst = $(this).find('First').text();
var slast = $(this).find('Last').text();
var scity = $(this).find('PermanentCity').text();
var sstate = $(this).find('PermanentRegion').text();
$("<li></li>").html(sfirst + " " + slast + " - " + scity + ", " + sstate).appendTo("#rss ul");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</html>
CSS:
body {
margin: 0;
padding: 0;
background-color: #373737;
color: white;
font-family: sans-serif;
overflow: hidden;
}
#rss {
width: 1920px;
height: 82px;
margin:0px;
}
.list ul {
padding: 0;
margin: 0;
border: 0;
float: left;
display: inline;
width: auto;
}
.list ul li {
float: left;
margin: 0;
padding: 0;
border: 0;
display: inline;
}
.feeder {
font-size: 40px;
line-height: 82px;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
animation: scroller 60s linear infinite;
}
#keyframes scroller {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
Added width=auto to the container solved the problem.
Your container may not be wide enough to accommodate your list items. You need to nest the unordered list elements in a container wide enough that they do not break.
Is there a way to place a div inside body, centered, with given left-right margins equal to x and top-bottom margins, equal to y? Nothing except of the div (and its children) is presented in the document.
UPDATE. I want the following:
Also, I'd be glad to have a more common solution for the case, when x1 != x2, y1 != y2 (though a solution for my particular case x1==x2, y1==y2 is appreciated).
Better solution(?):
Set margin-left and margin-right for the div to "auto"
You can use fixed positioning. It won’t work in IE6, though.
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
<meta charset='utf-8' />
<title>Test</title>
<style>
#bla {
position: fixed;
top: 30px;
left: 60px;
right: 60px;
bottom: 30px;
background: yellow;
}
</style>
</head>
<body>
<div id='blah'>
</div>
</body>
</html>
See it in action: http://obda.net/stackoverflow/position-fixed.html
The best I can do without CSS3 is to use two divs.
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.parent {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
}
div.child {
width: 100px;
margin-left: -50%;
margin-top: -50%;
border: 1px solid #000;
}
You can see it here: http://jsfiddle.net/CatChen/VGpdv/4/
Update: If CSS3 implementation is acceptable, it's a lot easier:
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
You will have to use javascript if you want the margins to be the same in all browzers.
<body>
<div id="the_div" style="margin: 20 auto;margin-bottom:0;width:300px;">
</div>
<script type="text/javascript">
var dim = (function () {
var _pW, _pH;
if (document.body && document.body.offsetWidth) {
_pW = document.body.offsetWidth;
_pH = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' &&
document.documentElement && document.documentElement.offsetWidth) {
_pW = document.documentElement.offsetWidth;
_pH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
_pW = window.innerWidth;
_pH = window.innerHeight;
}
return { width : _pW, height : _pH };
})();
var div = document.getElementById( "the_div" );
div.style.height = dim.height - 20 + "px";
</script>
<body>