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>
Related
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>
I need help giving my buttons some space. No matter what I try, I just can't seem to space them out.
You can see my github repository here.
The following is my HTML with stylesheets inside.
<script src="update.js"></script>
<script src="sw.js"></script>
<script>
let d = new Date();
//alert(d);
let hrs = d.getHours();
let min = d.getMinutes();
let day = d.getDay();
let auth = false;
fetch('https://raw.githubusercontent.com/AzlanCoding/iframe-browser-pwa/main/lock.js')
.then(response => response.text())
.then(data => {
let split_str = "/split/";
const data_arr = data.split(split_str);
let lock = data_arr[1];
if (data_arr[0] === "lock") {
setInterval(lock,500);
}else{
alert(data_arr[0]);
}
console.log(data_arr[0]);
});
</script>
<!DOCTYPE html>
<html lang="en">
<style>
body {
background-color: ##2C2F33;
}
</style>
<head>
<meta name="theme-color" content="#2C2F33">
<meta charset="UTF-8">
<meta name="description" content="Azlan's iframe Browser">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0, no-store">
<!meta http-equiv="cache-control" content="max-age=0" />
<!meta http-equiv="Pragma" content="no-cache">
<!meta http-equiv="Expires" content="0">
<title> Iframe Browser </title>
<link rel="canonical" href="https://azlancoding.github.io/iframe-browser-pwa/" />
<link rel="manifest" href="/iframe-browser-pwa/manifest.webmanifest">
<meta name="keywords" content="bypass, school, browser in website, cloud browser">
<link rel="stylesheet" href="css/styles.css">
<title> iFrame browser </title>
<script language="javascript">
const getValidUrl = (url = "") => {
let newUrl = window.decodeURIComponent(url);
newUrl = newUrl.trim().replace(/\s/g, "");
if(/^(:\/\/)/.test(newUrl)){
return `https${newUrl}`;
}
if(!/^(f|ht)tps?:\/\//i.test(newUrl)){
return `https://${newUrl}`;
}
return newUrl;
};
function setCookie(c_name,value,exdays){
var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
checkSession();
function checkSession(){
var c = getCookie("visited");
if (c === "yes") {
alert("Welcome back! Make sure you have your extension on.");
}
else {
alert("By continuing, you agree to the terms and conditions in azlancoding.github.io/iframe-browser/TermsAndConditions")
ext_install();
}
}
function ext_install()
{
if (window.confirm('An extension is required for this website to work. Do you want to install it now?'))
{
setCookie("visited", "yes", 365)
window.location.href='https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe';
};
};
function checkCookie() {
let user = getCookie("alerted");
if (user != "") {
alert("Welcome again !");
} else
{ext_install();}
}
//document.getElementById("myIframe").src = "https://wwf.org";
var iframe = document.getElementById("myIframe");
//var website = iframe.src;
//console.log(website);
document.addEventListener("scroll", function(event)
{
var style = document.getElementById("myIframe").style;
style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
})
/*function resizeIframe()
{
document.getElementById('myIframe').height = 100%;
}*/
function ResetBox()
{
if(document.getElementById("URL").value == '')
{document.getElementById("URL").value='';};
}
function LoadPage()
{
var objFrame=document.getElementById("myIframe");
var newurl = getValidUrl(document.getElementById("URL").value);
objFrame.src = newurl;
}
var elem = document.documentElement
function openFullscreen() {
if (elem.requestFullscreen)
{
elem.requestFullscreen();
}
else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen)
{
document.exitFullscreen();
}
else if (document.webkitExitFullscreen)
{
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen)
{
document.msExitFullscreen();
}
}
</script>
<style>
.iframe-container {
overflow: visible;
/* 16:9 aspect ratio */
//padding-top: 56.25%;
position: 60px 0px;
//margin-top: 60px;
}
:root {
--fallback-title-bar-height: 45px;
}
.draggable {
app-region: drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: drag;
}
.nonDraggable {
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
#child {
width: window.innerWidth;
//height: window.innerHeight;
height: 100vh;
flex: 1 1 auto;
position: absolute;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
left: 0;
right: 0;
}
.button {
background-color: #ffffff;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
margin-right: 5px;
cursor: pointer;
border-radius: 10px;
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
fieldset {
border: 0px;
}
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
#titleBarContainer {
position: absolute;
top: 0;
left: 0;
height: env(titlebar-area-height, var(--fallback-title-bar-height));
width: 100%;
background-color:#254B85;
}
#titleBar {
position: absolute;
top: 0;
display: flex;
user-select: none;
height: 100%;
left: env(titlebar-area-x, 0);
//left : 0px;
width: env(titlebar-area-width, 50%);
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
#titleBar > span {
margin: 5;
padding: 0px 32px 0px 32px;
}
#titleBar > input {
flex: 1;
margin: 0px;
border-radius: 5px;
border: none;
padding: 8px;
}
#mainContent {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
overflow-y: scroll;
}
</style>
</head>
<body style="background-color:#254B85">
<div id="titleBarContainer" >
<div id="titleBar">
<span class="draggable">Iframe Browser</span>
<input class="nonDraggable" type="text" ID="URL" placeholder="Enter a URL" value="https://www.google.com"></input>
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="￩" onClick="history.back()">
<input type="button" VALUE="￫" onClick="history.forward()">
<input type="button" class="fullscreen" value="⛶" onclick="openFullscreen()">
<input type="button" class="Exitfullscreen" value="Exit Fullscreen" onclick="closeFullscreen()">
<input type="button" class="newWindow" value="New Window" onclick=" window.open('https://azlancoding.github.io/iframe-browser-pwa/','_blank')">
<input type="button" class="cloudbrowser" value="Cloud Browser" onclick="window.open('https://replit.com/#azlancoding/free-and-unlimited-cloud-browser?embed=true','_blank')">
</div>
</div>
<!div style="Clear:both;">
<!input type="text" value="https://www.google.com" class="frmUrlVal" ID="URL" placeholder = "Enter a URL" >
<!/div>
<div id = "child" >
<iframe align="top" width="100%" height="100%" allowtransparency="true" style="background: #FFFFFF;" src="https://www.google.com" onload = "check()" onerror"ext_install()" allow="camera;microphone" frameborder=yes loading ="lazy" name="myIframe" id="myIframe"> </iframe>
</div>
<script>
window.onbeforeunload = () => '';
var urlbox = document.getElementById("URL");
urlbox.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
LoadPage();
}
});
function check(){
document.getElementById("URL").value = "";
}
</script>
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register (
'/iframe-browser-pwa/sw.js',
{scope: '/iframe-browser-pwa/'}
)
}
</script>
<script src="js/app.js"></script>
</body>
</html>
The stylesheet may be weird as it is used to support Windows Overlay Controls which allowed buttons to be placed on top next to the buttons to minimise, maximise and close the window. I just changed the manifest to support tabbed experimental feature.
Any help is appreciated.
Update:
I tried to use <span> but it over did it...
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 have a report page, where I have my menus, my headers, footers, etc. However I would like to have an option that the report content can be enlarged to full window size (not full screen) with a transition. I'm experimenting with this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
My main problem is I can't make it transition the movement too, not just the enlargement. It instantly jumps to the top left corner without any transition, while the 100% width and 100% height transition works.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>
I've been searching for a solution, however most of the results are regarding full screen, and not full window.
By default the position property of .zoom is static, transition is not able to handle change of display type.
So you may need to set position: absolute; for .zoom and preset the position.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
position: absolute;
top: 120px;
left: 120px;
background-color: green;
width: 200px;
height: 200px;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>
The issue is that you are changing the position to fixed and your top/left values are immediately considering thus the jump. Also I don't think there is a CSS solution to have a transition from the static position to the fixed position by specifying top/left only on hover. The rule of transtion is to have an initial value and a final value.
An idea here is to rely on some JS in order to set a the intial value of top/left values and allow the transition to work fine:
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e=document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left=pos.x+ 'px';
e.style.top=pos.y + 'px';
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
To be more accurate you need to adjust the values on the window scroll and window resize:
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e = document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
window.addEventListener('scroll', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
window.addEventListener('resize', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>