I'm making a game where a gif is following the cursor. Is there any way to reduce the speed so that the image that follows the cursor moves at a constant (but slower) speed than the cursor itself?
Basically right now the gif I assigned is acting link a replacement cursor. I want the gif to follow and catch up to the cursor at its own speed.
Thanks
<script>
document.querySelector(".testsite").onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
e.target.style.setProperty("--x", `${x}px`);
e.target.style.setProperty("--y", `${y}px`);
};
</script>
<style>
body {
justify-content: center;
align-items: center;
min-height: 100vh;
}
.testsite {
/* container */
width: 500px;
height: 500px;
position: relative;
appearance: none;
background: grey;
padding: 10px 20px;
border: none;
color: white;
font-size: 1.2em;
cursor: none;
outline: none;
overflow: hidden;
border-radius: 10px;
box-shadow: black;
}
.testsite span {
position: relative;
pointer-events: none;
}
.testsite::before {
--size: 0;
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 32px;
height: 32px;
background-image: url("html5.gif");
animation-duration: 1s;
transform: translate(-50%, -50%);
}
</style>
<html>
<body>
<div class="testsite">
</div>
</body>
</html>
You can make the x and y coordinate operations of your js into a function and then add a setTimeout to that function to run it every 100ms or how ever long you want the delay to be. Check it out here, note I also removed pointer:none; from .testsite :
document.querySelector(".testsite").onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
function runInt() {
e.target.style.setProperty("--x", `${x}px`);
e.target.style.setProperty("--y", `${y}px`);
}
setTimeout(runInt, 100);
};
body {
justify-content: center;
align-items: center;
min-height: 100vh;
}
.testsite {
/* container */
width: 500px;
height: 500px;
position: relative;
appearance: none;
background: grey;
padding: 10px 20px;
border: none;
color: white;
font-size: 1.2em;
outline: none;
overflow: hidden;
border-radius: 10px;
box-shadow: black;
}
.testsite span {
position: relative;
pointer-events: none;
}
.testsite::before {
--size: 0;
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 32px;
height: 32px;
background-image: url("https://www.springbrookanimalcarecenter.com/blog/wp-content/uploads/2017/10/Springbrook_iStock-612247460-150x150.jpg");
animation-duration: 1s;
transform: translate(-50%, -50%);
}
<html>
<body>
<div class="testsite">
</div>
</body>
</html>
Related
I have a button that I want to be able to close if it's clicked outside the area of the popout. I tried adding a toggle class but I am not sure if I am doing it right. I used the example from geekforgeeks.
https://www.geeksforgeeks.org/how-to-toggle-an-element-class-in-javascript/
But I am getting the following error message:
Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('function openPopOut() {popOut.classList.add("open");setTimeout(closePopOut, 8000);
}') contains HTML space characters, which are not valid in tokens.
Any pointers on how to proceed?
This is my code:
const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");
function openPopOut() {
popOut.classList.add("open");
setTimeout(closePopOut, 8000);
}
function closePopOut() {
popOut.classList.remove("open");
}
// activateBtn.addEventListener("click", openPopOut);
activateBtn.addEventListener("click", function (e){
activateBtn.classList.add(openPopOut);
});
popOutCloseBtn.addEventListener("click", closePopOut);
html.addEventListener("click", function (e) {
if (e.target !== popOut) popOut.classList.remove("pop-out");
});
body {
display: flex;
width: 100%;
height: 100%;
}
button {
cursor: pointer;
}
.activate-btn {
margin: auto;
}
.pop-out {
position: absolute;
bottom: 32px;
right: 32px;
display: flex;
width: 175px;
height: 100px;
background-color: cornflowerblue;
border: 1px solid;
border-radius: 4px;
transform: translateX(210px);
transition: transform 333ms ease-out;
}
.pop-out__close-btn {
position: absolute;
top: 8px;
right: 8px;
background-color: transparent;
font-weight: bold;
border: none;
}
.pop-out__msg {
margin: auto;
}
.pop-out.open {
transform: translateX(0);
}
<html>
<button class="activate-btn">Activate</button>
<div class="pop-out">
<button class="pop-out__close-btn">X</button>
<h3 class="pop-out__msg">Hello!</h3>
</div>
</html>
Fixed your code.
The popup shows when you click the button, when you click outside the popup, it disappears.
const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");
function openPopOut() {
popOut.classList.add("open");
setTimeout(closePopOut, 8000);
}
function closePopOut() {
popOut.classList.remove("open");
}
// activateBtn.addEventListener("click", openPopOut);
activateBtn.addEventListener("click", function (e){
openPopOut();
});
popOutCloseBtn.addEventListener("click", closePopOut);
document.addEventListener("click", function (e) {
if (e.target !== popOut && e.target !== activateBtn) closePopOut();
});
body {
display: flex;
width: 100%;
height: 100%;
overflow-x: hidden;
}
button {
cursor: pointer;
}
.activate-btn {
margin: auto;
}
.pop-out {
position: absolute;
bottom: 32px;
right: 32px;
display: flex;
width: 175px;
height: 100px;
background-color: cornflowerblue;
border: 1px solid;
border-radius: 4px;
transform: translateX(210px);
transition: transform 333ms ease-out;
}
.pop-out__close-btn {
position: absolute;
top: 8px;
right: 8px;
background-color: transparent;
font-weight: bold;
border: none;
}
.pop-out__msg {
margin: auto;
}
.pop-out.open {
transform: translateX(0);
display: flex;
}
<html>
<button class="activate-btn">Activate</button>
<div class="pop-out">
<button class="pop-out__close-btn">X</button>
<h3 class="pop-out__msg">Hello!</h3>
</div>
</html>
I'm working on an announcement bar for my website, but I got stuck on positioning the "close" button.
The bar itself works just fine, but I couldn't get to position the "close" button at the right of the announcement bar, where you usually find them. I've tried using margin-right, padding and similar solutions but they didn't work.
Also, I wanted to find the best way to make the button disappear (along with the bar) once it's clicked
EDIT: Here's the solution, provided by GrafiCode.
Here's the code and you can see it running here:
HTML:
<div id="dabar" class="hideonload"></div>
CSS:
/* top-bar */
#dabar {
background: #1b1c1e;
color: #fff;
font-size: 14px;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;
}
#dabar a {
color: #b5e48c;
border-bottom: 1px;
}
.btn-close {
margin-left: calc(100vw - 48px);
margin-top: -16px;
border: 0;
padding: 0;
background: red;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
flex-flow: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 150ms;
}
.btn-close .icon-cross {
margin: 0;
padding: 0;
border: 0;
background: none;
position: relative;
width: 15px;
height: 15px;
}
.btn-close .icon-cross:before,
.btn-close .icon-cross:after {
content: '';
position: absolute;
top: 6.5px;
left: 0;
right: 0;
height: 2px;
background: #fff;
border-radius: 2px;
}
.btn-close .icon-cross:before {
transform: rotate(45deg);
}
.btn-close .icon-cross:after {
transform: rotate(-45deg);
}
.btn-close .icon-cross span {
display: block;
}
.btn-close:hover,
.btn-close:focus {
transform: rotateZ(90deg);
background: #05c;
}
JAVASCRIPT:
window.onload = function() //executes when the page finishes loading
{
setTimeout(func1, 2500);
};
function func1() {
var el = document.getElementById('dabar');
el.innerHTML = 'Empieza aquí | Start here<button class="btn-close" onclick="this.parentElement.style.display=\'none\'" ><span class="icon-cross"></span></button>';
el.className = 'showtopbar';
}
Thanks a lot for your time!
images gauge chart.png
I have these 2 images images gauge chart.png the first one is created with gauge. I'm struggling to add the red line and the value from the second image dynamically as another chart variable. All the data in the chart will be dynamic. I am using from mysql and laravel as a backend. Could you please help me. Thank you
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0"
src="https://d3js.org/d3.v4.min.js"></script>
<style>
.gauge {
width: 100%;
max-width: 250px;
font-family: "Roboto", sans-serif;
font-size: 32px;
color: #004033;
}
.gauge__body {
width: 100%;
height: 0;
padding-bottom: 50%;
background: #d1dbda;
position: relative;
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
overflow: hidden;
}
.gauge__fill {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: #235b4e;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__cover {
width: 75%;
height: 150%;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
.chart-info1{
float: left;
font-size: 10px;
margin-top: 5px;
}
.chart-info2{
float: right;
font-size: 10px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__redLine"></div>
<div class="gauge__cover"></div>
</div>
<span class="chart-info1" >0.0</span>
<span class="chart-info2" >2.8.</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script>
const gaugeElement = document.querySelector(".gauge");
function setGaugeValue(gauge, value) {
if (value < 0 || value > 1) {
return;
}
gauge.querySelector(".gauge__fill").style.transform = `rotate(${
value / 2
}turn)`;
gauge.querySelector(".gauge__cover").textContent = `${("2.2"
)}`;
}
setGaugeValue(gaugeElement, 0.8);
</script>
</body>
</html>
I have a div which acts like a button when I press it. I add classes to change color and the circle inside moves to the right when is clicked. What I would like to do, is to call a function and then change a global variable inside the function and pass it back. I am also testing the code using the document.getElementById("test").innerHTML and the 12th changes to 13th and vise versa successfully. However, the variable flag13th does not change. It always has a false value.
Any ideas folks on this? I would appreciate your help. Thank you.
document.getElementById("toggleButton").addEventListener("click", dekatosTritos);
var flag13th = false;
function dekatosTritos() {
var ThirteenthSalary = document.getElementById("toggleButton").classList;
if ((ThirteenthSalary.contains("toggle-btn")) && (ThirteenthSalary.contains("active"))) {
flag13th = false;
document.getElementById("test").innerHTML = "12th";
} else {
flag13th = true;
document.getElementById("test").innerHTML = "13th";
}
}
document.getElementById("test11").innerHTML = flag13th;
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test">12th</p>
<p id="test11"> </p>
Here's an example that uses no JavaScript, but rather an input type checkbox that can be submitted with your form:
.toggler {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
opacity: 0;
}
.toggler-btn {
display: inline-block;
position: relative;
width: 60px;
height: 28px;
border-radius: 28px;
cursor: pointer;
background: gray;
transition: background 0.3s;
}
.toggler-btn:after {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
transition: transform 0.3s;
}
.toggler-label::after {
content: attr(data-label);
}
/* CHECKED STATES */
.toggler:checked ~ .toggler-btn {
background: #0bf;
}
.toggler:checked ~ .toggler-btn:after {
transform: translateX(30px);
}
.toggler:checked ~ .toggler-label::after {
content: attr(data-labelchecked);
}
<div class="Question_13th">13th Month Salary?</div>
<input class="toggler" type="checkbox" id="13th" name="13th">
<label class="toggler-btn" for="13th"></label>
<div class="toggler-label" data-label="12th" data-labelchecked="13th"></div>
Here's an example that uses JavaScript, classList.toggle() and bool = !bool to toggle a boolean
const EL_btn = document.querySelector("#toggleButton");
const EL_test = document.querySelector("#test");
let is13 = false;
function dekatosTritos() {
is13 = !is13; // Toggle boolean
EL_btn.classList.toggle('active', is13);
EL_test.innerHTML = is13 ? "13th" : "12th";
}
EL_btn.addEventListener("click", dekatosTritos); // Do on btn click
dekatosTritos(); // and on init.
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test"></p>
I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>