I need help in implementing something similar to the profile strength of linkedIn.
Here is the image how it works in linkedIn
Here is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
overflow:hidden;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow:hidden;
}
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".fill").css('height', pixels + "px");
}
fillMeter(82);
Here is my fiddle http://jsfiddle.net/5aufgL8o/6/
How can I add text on the right side based on profile level?
UPDATE : I've created a repository in github, If any one would like to make it better for people to use it that would be better. here is the repo link https://github.com/shahilmhd/linkedinprofilestrength
Create absolute positioned div to hold text.
top of the div will be same as top of the .fill element.
function fillMeter(percent) {
var pixels = (percent / 100) * 90;
$(".fill").css('top', (90 - pixels) + "px");
$(".fill").css('height', pixels + "px");
$(".line").css('top', (90 - pixels) + "px");
$(".line div").text('All-star'); //This text could be dynamic
}
fillMeter(82);
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
overflow: hidden;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow: hidden;
z-index: 99;
}
.line {
position: absolute;
width: 200px;
left: 90px;
height: 2px;
background-color: black;
z-index: 98;
}
.line div {
color: black;
position: relative;
top: -20px;
text-align: end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png">
<div class='line'>
<div>
</div>
</div>
</div>
First of all try to use transparent image of circle. The white square after the circle should not come. And rest here is the code with example
function fillMeter(percent) {
var pixels = (percent / 100) * 90;
$(".fill").css('top', (90 - pixels) + "px");
$(".fill").css('height', pixels + "px");
}
fillMeter(82);
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
//overflow:hidden;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow: hidden;
z-index: 1;
}
.text {
position: absolute;
left: 100%;
top: -17px;
z-index: 1;
border-bottom: 1px solid #000;
padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill">
<div class="text">
sdhfs
</div>
</div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
See FIDDLE
Will this help ? Just used pseudo element to achieve this.
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".fill").css('height', pixels + "px");
}
fillMeter(82);
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow:hidden;
}
.fill:before{
content: 'expert';
width: 150px;
height: 1px;
background: #000;
display: inline-block;
position: absolute;
right: -140px;
z-index: 999;
text-align: right;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
Or combining two pseudo classes,
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".fill").css('height', pixels + "px");
}
fillMeter(82);
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow:hidden;
}
.fill:before{
content: '';
width: 150px;
height: 1px;
background: #000;
display: inline-block;
position: absolute;
right: -140px;
z-index: 999;
text-align: right;
vertical-align: top;
}
.fill:after{
content: 'Expert';
display: inline-block;
position: absolute;
right: -140px;
z-index: 999;
text-align: right;
top: -20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
HI now you can used to this code
I have create a div .textSection and define some css to this div and some code to js please look into .
You can dynamic change to text throw js
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".fill").css('height', pixels + "px");
$(".textSection").css('top', (90-pixels));
if(percent < 25) {
$(".textSection").text("Beginner");
} else if(percent >= 25 && percent < 50) {
$(".textSection").text("Intermediate");
} else if(percent >= 50 && percent < 75) {
$(".textSection").text("Expert");
} else if(percent >= 75) {
$(".textSection").text("All star");
}
}
fillMeter(40);
.textSection{
position: absolute;
margin-top:-20px;
top: 0;
left: 81px;
border-bottom: solid red 2px;
overflow: hidden;
z-index: 1;
padding-left: 21px;
white-space: nowrap;
}
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
overflow:hidden;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;display: inline-block;">
<div class="textSection"> </div>
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
This FIDDLE works good.
Could be better but I don't have much time now, contact me if can help you.
Only needs a better display of the line but the idea is something that previous response, using jS instead of css.
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".fill").css('height', pixels + "px");
$(".text").css('top', (80-pixels) + "px");
var texto = ""
if (percent > 90) {
texto = "All-Star";
} else if ( percent < 90 & percent > 75) {
texto = "Expert";
} else if ( percent < 75 & percent > 25) {
texto = "<u>Intermediate</u>";
} else if (percent < 25) {
texto = "Begginer";
}
$(".text").html("<u>_____________"+texto+"<u>")
}
fillMeter(70);
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
overflow:hidden;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow:hidden;
}
.text {
position: absolute;
top: 0;
left: 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
<div class="text" >_____________________ </div>
Try this:
This will display message Beginner, Intermediate, Expert, All star dynamically based on percentage And even the color will be change of .fill according to conditions
Demo: http://jsfiddle.net/hanqtjzb/
Html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div class="fill"></div>
<img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png">
<span class="msg">aaa</span>
<div class="line">
</div>
</img>
</div>
jQuery:
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".line").css('top', (90-pixels) + "px");
$(".msg").css('top', (75-pixels) + "px");
$(".fill").css('height', pixels + "px");
if(percent < 25) {
$(".msg").text("Beginner");
} else if(percent >= 25 && percent < 50) {
$(".msg").text("Intermediate");
} else if(percent >= 50 && percent < 75) {
$(".msg").text("Expert");
} else if(percent >= 75) {
$(".msg").text("All star");
}
}
fillMeter(55);
Css:
.line {
border: 1px solid;
position: absolute;
left: 90px;
width: 20%;
text-align:top;
}
.msg {
position: absolute;
left: 90px;
width: 20%;
text-align:top;
}
.fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
background-color: green;
overflow:hidden;
}
.mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow:hidden;
}
I ended up optimizing the code for better understanding and doing it with only CSS instead of using images.
here is the code
function fillMeter(percent) {
var pixels = (percent/100) * 90;
$(".fill").css('top', (90-pixels) + "px");
$(".level").css('top', (77-pixels) + "px");
$(".fill").css('height', pixels + "px");
if (percent <= 0) {
$(".level").css("top", "67px");
$(".level").text("Beginner");
} else if (percent <= 25) {
$(".fill").css('background', "#FF6D3E");
$(".level").text("Beginner");
} else if (percent <= 50) {
$(".fill").css('background', "#F2C548");
$(".level").text("Intermediate");
} else if (percent <= 75) {
$(".fill").css('background', "#2F9CE1");
$(".level").text("Expert");
} else if (percent <= 100) {
$(".level").text("All Star");
$(".fill").css('background', "#287EB6");
} else if (percent <= 99) {
$(".level").css("top", "0");
}
}
fillMeter(65);
.profile-strength-wrap {
position: relative;
margin-top: 40px;
width: 200px;
height: 100px;
}
.profile-strength-wrap .fill {
position: absolute;
top: 90px;
left: 0;
height: 0px;
width: 90px;
overflow: hidden;
}
.profile-strength-wrap .mask {
display: block;
height: 90px;
left: 0;
position: absolute;
top: 0;
width: 90px;
overflow: hidden;
border-radius: 50%;
border: 4px solid #CACACA;
z-index: 120;
}
.profile-strength-wrap span.level {
position: absolute;
left: 20%;
top: 1px;
width: 80%;
text-align: right;
border-bottom: 1px solid #888;
text-transform:capitalize;
}
.profile-strength h3 {
font-size: 1.2em;
text-align: left;
font-weight: 500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-strength">
<div class="profile-strength-wrap">
<div class="mask">
<div class="fill"></div>
</div>
<span class="level"></span>
</div>
<h3>Profile Strength</h3>
</div>
Related
I have some problem about JavaScript and using if in it. I have some experiences in PHP, but this is another world for me. I need to do something like this: I have "progress bar" with two buttons (+ and -), when I press button the value in function will change +- 0.1 which move the bar and change %.
I want to change to color of the progress bar when it's more then 100%. I tried to make another fill called filler with 0 rotate. When x is 1 or more then rotate depends on value2 = y + 0.1 per click. It works, but with 2 + buttons and I want it to only with one. If(x>1) doesn't work with document.write.
images:
demo:
https://jsfiddle.net/dmytxja2
var x = 0;
var y = 0;
const gaugeElement = document.querySelector(".gauge");
function setGaugeValue(gauge, value) {
if (value < 0 || value > 3) {
return;
}
gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${0}turn)`;
value2 = y;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${value2 / 2}turn)`;
gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
}
setGaugeValue(gaugeElement, x);
if (x >= 1) {
var cc = document.getElementById('outer');
cc.style.visibility = "visible";
}
document.write('<button id="iner" onclick="setGaugeValue(gaugeElement, x = x + 0.1)">+</button>');
document.write('<button id="outer" hidden="hidden" onclick="setGaugeValue(gaugeElement, y = y + 0.1)">+</button>');
document.write('<button onclick="setGaugeValue(gaugeElement, x = x - 0.1)">-</button>');
document.write('<button onclick="alert(x);">test</button>');
.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: #b4c0be;
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: red;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__filler {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: green;
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%);
/* Text */
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__filler"></div>
<div class="gauge__cover"></div>
</div>
</div>
You must enter the condition inside the function to be checked each time the function is called
In your code, the condition is only checked for the first time, and because the result is false, it does not change
You have also assigned the hidden parameter to the button with the outer id
But when displaying outer you use style.visibility which has no effect
Your modified code:
var x = 0;
var y = 0;
const gaugeElement = document.querySelector(".gauge");
function setGaugeValue(gauge, value) {
if (value < 0 || value > 3) {
return;
}
gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${0}turn)`;
value2 = y;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${value2 / 2}turn)`;
gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
if (x >= 1) {
var cc = document.getElementById('outer');
cc.style.display = "inline";
}
}
setGaugeValue(gaugeElement, x);
document.write('<button id="iner" onclick="setGaugeValue(gaugeElement, x = x + 0.1)">+</button>');
document.write('<button id="outer" style="display:none;" onclick="setGaugeValue(gaugeElement, y = y + 0.1)">+</button>');
document.write('<button onclick="setGaugeValue(gaugeElement, x = x - 0.1)">-</button>');
document.write('<button onclick="alert(x);">test</button>');
.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: #b4c0be;
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: red;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__filler {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: green;
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%);
/* Text */
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__filler"></div>
<div class="gauge__cover"></div>
</div>
</div>
BUT:
This code is very, very bad
As far as I realized
You wanted to make something like this
My Code :
var x = 0;
var deg = 0;
const gaugeElement = document.querySelector(".gauge");
const gauge__fill = gaugeElement.querySelector(".gauge__fill");
const gauge__cover = document.querySelector(".gauge__cover");
function setGaugeValue(btn) {
if (x >= 0) {
if (gauge__fill.style.transform == "rotate(180deg)" && btn == 'plus') {
deg = 0;
}
if (gauge__fill.style.transform == "rotate(18deg)" && btn == 'minus' && x != 0) {
deg = 180;
} else {
if (btn == 'plus') {
deg += 18;
} else {
deg -= 18;
}
}
gauge__fill.style.transform = 'rotate(' + deg + 'deg)';
gauge__cover.textContent = `${x * 10}%`;
if (x >= 11) {
gauge__fill.style.background = "green";
} else {
gauge__fill.style.background = "red";
}
}
}
document.getElementById("plus").addEventListener("click", function() {
x += 1;
setGaugeValue('plus');
});
document.getElementById("minus").addEventListener("click", function() {
if (x > 0) {
x -= 1;
setGaugeValue('minus');
}
});
document.getElementById("test").addEventListener("click", function() {
alert(x);
});
.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: #b4c0be;
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: red;
transform-origin: center top;
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%);
/* Text */
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="real.css">
<title>Nutriadapt</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__cover">0%</div>
</div>
</div>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="test">test</button>
</body>
</html>
I created this page with the help stack overflow guys. There are three minor issues which I couldn't fix. I'd like help from you.
In this link you can see a countdown timer. I need to add a text "Go" after number .
You can see a counter glow border ( For now its blue color ). Can we add a moving border effect for that? Eg https://codepen.io/vishwakarma02/full/wOVYWy
Sometimes the the border showing just behind the text "Practice shot". That shouldn't be like that.
Can you guys please check and give solutions. I have shared my code here. Thanks :)
var timeLeft = 3;
var videoCounter = 2;
var videoText = 2;
var elem = document.querySelector('.countdown-content__count');
var timerId;
function countdown() {
if (timeLeft == 0) {
clearTimeout(timerId);
$(".countdown-content__timer").fadeOut();
$(".video-wrapper span").fadeOut();
var playPromise = $("#video")[0].play();
} else {
elem.innerHTML = timeLeft;
timeLeft--;
}
}
function practiceShot(){
setTimeout(function(){
$(".countdown-content__head").slideUp(1000, function(){
$(".countdown-content__timer").css({
opacity: 0,
display: 'inline-block'
}).animate({opacity:1},600);
timerId = setInterval(countdown, 1000);
countdown();
});
}, 2000);
}
practiceShot();
document.getElementById('video').addEventListener('ended', function() {
if (videoCounter == 0) {
return;
}
document.getElementsByClassName("countdown-content__head")[0].innerHTML = "<span>Practice Shot </span>" + videoText;
videoText++;
videoCounter--;
timeLeft = 3;
elem.innerHTML = "";
$(".countdown-content__timer").fadeIn();
$(".video-wrapper span").fadeIn();
$(".countdown-content__head").slideDown(1000, function(){
$(".countdown-content__timer").css({
opacity:1,
display: 'inline-block'
}).animate({opacity:0},600);
});
practiceShot();
}, false);
<div class="practice-shot-screen full-screen-height">
<div class="row">
<div class="col-sm-6">
<span class="video-wrapper">
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<span></span>
</span>
</div>
<div class="col-sm-6">
<div class="practice-shot-image">
<img alt="" src="images/practice-image.jpg">
</div>
</div>
</div>
<div class="countdown-content">
<div class="v-align-container">
<div class="v-align-grid">
<div class="countdown-content__head">
<!-- <strong> <img alt="" src="images/hd-border.png"> </strong> -->
<span>PRACTICE SHOT 1</span>
<!-- PRACTICE SHOT 1 -->
<!-- <strong> <img alt="" src="images/hd-border.png"> </strong> -->
</div>
<div class="countdown-content__timer">
<!--test-->
<!--test-->
<span class="countdown-content__count"></span>
</div>
</div>
</div>
</div>
</div><!--practice-shot-screen-->
Css :
.practice-shot-screen {
position: relative;
}
.practice-shot-screen .row {
height: 100%;
margin: 0;
}
.practice-shot-screen [class^="col-"] {
padding: 0;
}
.practice-shot-screen .v-align-container {
position: relative;
}
.practice-shot-screen .video-wrapper {
height: 100%;
width: 100%;
display: inline-block;
position: relative;
}
.video-wrapper span {
content: '';
display: block;
width: 3000px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
opacity: 0.7;
}
.practice-shot-screen .video-wrapper video {
height: 100%;
width: 100%;
display: inline-block;
object-fit: cover;
}
.practice-shot-image {
height: 100%;
width: 100%;
}
.practice-shot-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.countdown-content {
max-width: 800px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
margin: auto;
}
.countdown-content__head {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 85px;
text-transform: uppercase;
color: #fff;
-webkit-text-stroke: 1px #fff;
text-shadow: 0px 0px 10px #fff;
text-align: center;
position: relative;
margin: 0;
}
.countdown-content__head::after {
content: '';
display: block;
height: 147px;
width: 770px;
background: url(../images/hd-border.png) no-repeat;
text-align: center;
margin: 0 auto;
background-size:contain;
}
.countdown-content__head::before {
content: '';
display: block;
height: 147px;
width: 770px;
background: url(../images/hd-border.png) no-repeat;
text-align: center;
margin: 0 auto;
background-size:contain;
}
.countdown-content__timer {
font-family: 'beonwebfont';
font-size: 320px;
color: #ea3323;
-webkit-text-stroke: 1px #ea3323;
text-shadow: 0px 0px 10px #ea3323;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid #fff;
border-color: #467fff;
-webkit-box-shadow: 0 0 15px #467fff;
-moz-box-shadow: 0 0 15px #467fff;
box-shadow: 0 0 30px #467fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
}
.countdown-content__timer > span {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.countdown-content__timer video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
I have added html and css here : https://jsfiddle.net/Coder95/w5h4n9cq/
When scrolling down the page the sticky menu is enabled and gets little jerky. What's the issue and how to get smooth animation.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(100);
$('.sticky-menu').fadeIn(100);
} else {
$('.head_section').fadeIn(100);
$('.sticky-menu').fadeOut(100);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
transition: all 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
Is there any solution for this?
In your example, you used jQuery for the animation. So you need to remove the transition from your CSS. You can only use one, jQuery OR CSS, but not both in this case.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(1000);
$('.sticky-menu').fadeIn(1000);
} else {
$('.head_section').fadeIn(1000);
$('.sticky-menu').fadeOut(1000);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
I am trying to do my very first simple game.
My question is: why is my game loop not working? If you see the code, I tried to put all the game code inside an if. The idea is: "if game over is false, execute the game, else (when my humanHungerBar reaches 0) the game is over".
Can you help me here? Thanks a lot
<!doctype html>
<html>
<head>
<style>
body {
-webkit-user-select: none;
}
#screen {
position: relative;
left: 480px;
top: 30px;
border: 2px solid black;
height: 500px;
width: 400px;
display: block;
}
#myCash {
position: relative;
width: 90px;
height: 40px;
top: 7px;
left: 5px;
border: 5px solid lightgreen;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: green;
font-weight: bolder;
font-size: 20px;
}
#humanHunger {
position: relative;
width: 90px;
height: 90px;
top: 20px;
left: 280px;
border: 1px solid black;
}
#humanHungerContainer {
position: relative;
width: 100%;
height: 20px;
top: 20px;
border: 1px solid black;
background-color: red;
}
#humanHungerBar {
position: absolute;
width: 76%;
height: 18px;
border: 1px solid green;
background-color: green;
}
#moneyMaker {
position: relative;
width: 300px;
height: 450px;
top: -850px;
left: 100px;
border: 3px solid green;
background-image: url("moneyMakerBackground.png");
}
#jobInstructions {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 20px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#workingHours {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 90px;
left: 22px;
background-color: lightgreen;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#workCounter {
position: absolute;
width: 60px;
height: 50px;
border: 3px solid orange;
top: 250px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#clickingArea {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 170px;
left: 22px;
background-color: lightgreen;
filter: saturate(100%);
}
#clickingArea:hover {
filter: saturate(190%);
}
#dollar {
position: relative;
left: 80px;
top: 5px;
}
#nakedHuman {
position: absolute;
top: 25px;
left: 120px;
}
#clothesScreen {
position:relative;
top: -400px;
left: 900px;
border: 2px solid black;
width: 300px;
height: 400px;
overflow: auto;
}
#lumberShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#coffeeStainedTShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#regularJeans {
position: absolute;
top: 328px;
left: 145px;
display:none;
}
#lumberShirtMiniContainer {
position: relative;
top: 10px;
left: 10px;
}
#coffeeStainedTShirtMiniContainer {
position: relative;
top: 30px;
left: 10px;
}
#regularJeansMiniContainer {
position: relative;
top: 60px;
left: 20px;
}
#burgerMiniContainer {
position: relative;
top: 90px;
left: 10px;
}
#lumberShirtPrice {
position: absolute;
top: 20px;
left: 100px;
border: 3px solid orange;
width: 50px;
height: 20px;
text-align: center;
vertical-align: middle;
line-height: 20px;
background-color: orange;
}
#buyButtonLumber {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonCoffee {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonRegularJeans {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonBurger {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<div id="screen">
<img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450">
<img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51">
<img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51">
<img id="regularJeans" src="regularJeans.png" width="89" height="152.72">
<div id="myCash"></div>
<div id="humanHunger">
<div id="humanHungerContainer">
<div id="humanHungerBar"></div>
</div>
</div>
</div>
<div id="clothesScreen">
<div id="lumberShirtMiniContainer">
<img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80">
<div id="lumberShirtPrice"></div>
<div id="buyButtonLumber">Buy</div>
</div>
<div id="coffeeStainedTShirtMiniContainer">
<img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80">
<div id="buyButtonCoffee">Buy</div>
</div>
<div id="regularJeansMiniContainer">
<img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80">
<div id="buyButtonRegularJeans">Buy</div>
</div>
<div id="burgerMiniContainer">
<img id="burger" src="burger.png" width="94.11" height="80">
<div id="buyButtonBurger">Buy</div>
</div>
</div>
<div id="moneyMaker">
<div id="jobInstructions">You work on a click factory, so get to clickin'!!</div>
<div id="workingHours"></div>
<div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div>
<div id="workCounter"></div>
</div>
<script>
window.onload = function () {
var gameOver = false;
if (!gameOver) {
var lumberShirtPrice = document.getElementById("lumberShirtPrice");
lumberShirtPrice.innerHTML = 7;
var myCash = document.getElementById("myCash");
myCash.innerHTML = 45;
var buyButtonLumber = document.getElementById("buyButtonLumber");
buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash);
var negateFX = new Audio('negate1.wav');
function substractItemPriceFromMyCash() {
var a = parseInt(lumberShirtPrice.innerHTML);
var b = parseInt(myCash.innerHTML);
if (a > b) {
negateFX.play();
}
else {
myCash.innerHTML -= lumberShirtPrice.innerHTML;
console.log("you bought the lumber shirt");
}
}
var workingHoursScreen = document.getElementById("workingHours");
workingHoursScreen.innerHTML = 0;
var workCounter = document.getElementById("workCounter");
workCounter.innerHTML = 0;
var allowedToWork = false;
var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000);
function incrementWorkingHoursChronometer () {
var a = parseInt(workingHoursScreen.innerHTML);
if(a < 10) {
workingHoursScreen.innerHTML++;
}
else if (a == 10) {
workingHoursScreen.innerHTML = 0;
workCounter.innerHTML++;
}
var b = parseInt(workCounter.innerHTML);
if (b == 4) {
workCounter.innerHTML = 0;
}
if (b % 2 == 0) {
allowedToWork = true;
}
else if (b % 2 == 1) {
allowedToWork = false;
}
}
var coinFX = new Audio('coin1.wav');
var clickingAreaBox = document.getElementById("clickingArea");
clickingAreaBox.addEventListener("click", giveMeMoney);
function giveMeMoney() {
if(allowedToWork) {
myCash.innerHTML++;
coinFX.play();
}
else {
negateFX.play();
}
}
var humanHungerBar = document.getElementById("humanHungerBar");
var barWidth = 76;
humanHungerBar.style.width = barWidth + '%';
var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700);
function decreaseHumanHungerBar () {
if (barWidth > 0) {
humanHungerBar.style.width = barWidth + '%';
barWidth--;
}
}
var buyButtonBurger = document.getElementById("buyButtonBurger");
var burgerPrice = 15;
buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney);
function buyBurgerRestoreLifeAndDecreaseMoney() {
var a = parseInt(myCash.innerHTML);
if (a >= burgerPrice){
if(barWidth < 92) {
barWidth += 10;
myCash.innerHTML -=burgerPrice;
}
else if (barWidth == 1) {
gameOver = true;
console.log("bar is 1");
}
else {
negateFX.play();
}
}
else {
negateFX.play();
}
}
}
else {
document.getElementById("screen").style.display = 'none';
}
}
</script>
</body>
</html>
So you have written a script that executes one time. It goes from beginning to end, and then stops. So what you want to do is write a script that repeats over and over until the game ends. So here's a super brief example of how you might do that in javascript:
while (!gameOver) {
// do game code
}
BUT WAIT!!!
So the code inside that while loop will keep on happening over and over until the gameOver variable is true. But if you try to use that code, your game will probably freeze! Why? Because the browser is executing the code inside the while loop as fast as it possibly can. But if you'd like your game to run at a certain frame-per-second rate, you probably want to use a javascript timeout. So try something like this:
setInterval(function() {
// do game code
}, 1000/60);
That is the absolutely bare minimum that you'll need for a technical "game loop". However, this is not really the recommended approach for starting to create a browser-based game. Try doing some research and checking out things like this and this.
I have a page like this. Trying to set innerDiv at the lower right corner at the click of a radio button. It should not overlap the footer and work even if user resize the browser.
$(function() {
startTime();
positionDiv();
$("#innerDiv").draggable({
containment: "parent"
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#innerDiv").hide();
} else if (e.keyCode == 13) {
$("#innerDiv").show();
}
});
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(function() {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
function positionDiv() {
console.log('Ready to position inner div');
var innerDiv = document.getElementById("innerDiv");
if (document.getElementById('centerCheckbox').checked) {
console.log('Setting the position to center');
innerDiv.className = "box";
$('#boxText').text("Center")
} else if (document.getElementById('lrCheckbox').checked) {
console.log('Setting the position to lower right corner');
innerDiv.className = "lowerRightCorner";
$('#boxText').text("Lower Right Corner")
}
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
color: #000;
background-color: #fff;
}
html {
overflow-y: hidden;
}
.head,
.foot,
.middle {
position: absolute;
width: 100%;
left: 0;
}
.middle {
top: 100px;
bottom: 50px;
height: 400px;
background-color: #ffd;
}
.head {
height: 100px;
top: 0;
background-color: #000;
color: #fff;
}
.foot {
height: 50px;
bottom: 0;
background-color: #000;
}
.middle p {
border: 1px solid #00f;
margin: 0;
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
.lowerRightCorner {
position: relative;
bottom: 0;
right: 0;
width: 30em;
height: 18em;
margin-bottom: 50px;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
#clock {
float: right;
margin-right: 10px;
font-size: 24px;
position: relative;
}
.position {
top: 30%;
position: relative;
}
.helpText {
color: yellow;
font-size: 20px;
margin-left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vertica Web</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<body>
<div class="head">
<div class="position">
<span>Position: </span>
<input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
<input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()">Lower Right
</div>
<div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
<div id="clock"></div>
</div>
<div class="middle">
<div id="innerDiv">
<span id="boxText"></span>
</div>
</div>
<div class="foot">footer</div>
</body>
</html>
position: relative does not work that way, it place elements relative from the top left. You have to use either absolute or fixed to accomplish this.
In the snippet I changed
.lowerRightCorner {
position: relative;
}
to
.lowerRightCorner {
position: fixed;
}
$(function() {
startTime();
positionDiv();
$("#innerDiv").draggable({
containment: "parent"
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#innerDiv").hide();
} else if (e.keyCode == 13) {
$("#innerDiv").show();
}
});
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(function() {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
function positionDiv() {
console.log('Ready to position inner div');
var innerDiv = document.getElementById("innerDiv");
if (document.getElementById('centerCheckbox').checked) {
console.log('Setting the position to center');
innerDiv.className = "box";
$('#boxText').text("Center")
} else if (document.getElementById('lrCheckbox').checked) {
console.log('Setting the position to lower right corner');
innerDiv.className = "lowerRightCorner";
$('#boxText').text("Lower Right Corner")
}
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
color: #000;
background-color: #fff;
}
html {
overflow-y: hidden;
}
.head,
.foot,
.middle {
position: absolute;
width: 100%;
left: 0;
}
.middle {
top: 100px;
bottom: 50px;
height: 400px;
background-color: #ffd;
}
.head {
height: 100px;
top: 0;
background-color: #000;
color: #fff;
}
.foot {
height: 50px;
bottom: 0;
background-color: #000;
}
.middle p {
border: 1px solid #00f;
margin: 0;
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
.lowerRightCorner {
position: fixed;
bottom: 0;
right: 0;
width: 30em;
height: 18em;
margin-bottom: 50px;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
#clock {
float: right;
margin-right: 10px;
font-size: 24px;
position: relative;
}
.position {
top: 30%;
position: relative;
}
.helpText {
color: yellow;
font-size: 20px;
margin-left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vertica Web</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<body>
<div class="head">
<div class="position">
<span>Position: </span>
<input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
<input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()">Lower Right
</div>
<div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
<div id="clock"></div>
</div>
<div class="middle">
<div id="innerDiv">
<span id="boxText"></span>
</div>
</div>
<div class="foot">footer</div>
</body>
</html>