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>
Related
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>
I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.
Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>
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>
I have looked through various pages, but have not managed to find a working solution. I want the text in my div to get more transparent gradually when I scroll. Please, can anybody help? Here is my code:
<script src = "/js/titleScroll.js"></script>
<div class = "header-title">
<h1>Title</h1>
</div>
and:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('header-title').css('opacity', 0.8);
} else {
$('header-title').css('opacity', 1);
}
});
});
and here is my css:
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
Thank you.
Problem is, currently you are just triggering 0.8 opacity when user is not at top of the page. Try to get top offset each time scroll is executed and then apply opacity based on that offset, it can be linear function, or more complex ones - it's up to you how it's gonna fade in/out.
Here's very quick working example:
<head>
<style>
body {
min-height: 4000px;
}
.header-title {
position: fixed;
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
max-width: 100%;
background-attachment: fixed;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1000);
if (opacity >= 0) {
$('.header-title').css('opacity', opacity);
}
});
});
</script>
<div class = "header-title">
<h1>Title</h1>
</div>
</body>
https://jsfiddle.net/un2bdvfm/
I'm currently trying to get rid of a bunch of CSS animations and replace with the Velocity.js (along the way building in new animations).
At present I have a grid Item:
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
This is controlled through CSS to fade in the .overlay element. What I then want to do is for the h5 & h6 classes to slide up in.
I've written the following code:
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
But nothing seems to be happening. I'm quite new to Javascript so I'm presuming I've made a silly mistake somewhere along the line but can't work out what it is.
I've included a full snippet below and it can also be found here
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
#thumbnail-array {
width: 100%;
}
.gutter-sizer {
width: 0.03%;
}
.video-thumbnail {
position: relative;
background-color: #777;
overflow: hidden;
line-height: 0px;
margin: 0px;
}
.video {
position: absolute;
margin-top: none;
left: 0;
right: 0;
bottom: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 50;
}
.thumbnail-link {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
}
.title {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #FFFFFF;
font-family: helvetica;
width: 100%;
line-height: 0px;
}
.title-display {
display: block;
width: 100%;
}
.video-thumbnail:hover .thumbnail-link {
text-decoration: none;
opacity:1;
}
.imgspacer {
width: 100%;
max-width:100%;
}
.picturehelper {
display: inline-block;
}
.video-thumbnail:hover .video {
display: inline;
}
h5 {
display: inline-block;
width: 100%;
font-size: 2em;
margin: 0px;
padding: 0px;
line-height: normal;
}
h6 {
display: inline-block;
width: 100%;
font-size: 0.75em;
letter-spacing: 0.3em;
padding: 0px;
margin: 0px;
font-weight: 100;
line-height: normal;
}
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page.
I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)