This is the code for a bar. I want to decrease the height of the bar as the bonus time decreases. This is my HTML code for the that bar.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var currentDate = new Date();
var d =new Date();
var tl = currentDate.setTime(currentDate.getTime() + 2*60*1000);
var seconds =(tl - d)/1000;
var height = 50;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('bonus').innerHTML = "Buzz Buzz";
}
else {
seconds--;
height--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>
</head>
<body>
<div id="bonus" class="hide">
Time left for <b style="font-size:30px">BONUS</b>:
<span id="countdown" class="timer" style="color:red; font-weight:bold ;font-size:40px "></span>
</div>
<section class="main">
<span class="button-label">Size:</span>
<input type="radio" name="resize-graph" id="graph-small" /><label for="graph-small">Small</label>
<input type="radio" name="resize-graph" id="graph-normal" checked="checked" /><label for="graph-normal">Normal</label>
<input type="radio" name="resize-graph" id="graph-large" /><label for="graph-large">Large</label>
<span class="button-label">Color:</span>
<input type="radio" name="paint-graph" id="graph-blue" checked="checked" /><label for="graph-blue">Blue</label>
<input type="radio" name="paint-graph" id="graph-green" /><label for="graph-green">Green</label>
<input type="radio" name="paint-graph" id="graph-rainbow" /><label for="graph-rainbow">Rainbow</label>
<span class="button-label">Product:</span>
<input type="radio" name="fill-graph" id="f-none" /><label for="f-none">None</label>
<input type="radio" name="fill-graph" id="f-product1" checked="checked" /><label for="f-product1">Product 1</label>
<input type="radio" name="fill-graph" id="f-product2" /><label for="f-product2">Product 2</label>
<input type="radio" name="fill-graph" id="f-product3" /><label for="f-product3">Product 3</label>
<ul class="graph-container">
<li>
<span>2008</span>
<div class="bar-wrapper">
<div class="bar-container">
<div class="bar-background"></div>
<div class="bar-inner">25</div>
<div class="bar-foreground"></div>
</div>
</div>
</li>
<li>
<ul class="graph-marker-container">
<li style="bottom:25%;"><span>25%</span></li>
<li style="bottom:50%;"><span>50%</span></li>
<li style="bottom:75%;"><span>75%</span></li>
<li style="bottom:100%;"><span>100%</span></li>
</ul>
</li>
</ul>
</section>
</body>
</html>
In this code there is a countdown timer for bonus. I have also defined a variable height in javascript which decreases as the var seconds decrease. Now I want to use this variable in css. This is my css code:
<style>
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner {
height: 50%; bottom: 0;
}
</style>
This code only shows that the height of that bar is defined as 50%; but I want to gradually decrease this height by the javascript variable height. I tried searching for questions related to this on stackoverflow but it only tells that you can define css property in javascript. I want to do the other way i.e. use javascript variable in css. Or if there is any other way, please suggest.
This code is take from tympanus.net. This might help in understanding my question better. I just want to change the height of one of these bars in the site according to my countdown timer.
-
You can't put js variables in css straight up. If you want to change the height, then do it with js. I would normally suggest adding a class to the body or a top ID but since you need to do this many times, that option is not practicalHuangism– Huangism2014年03月13日 15:02:32 +00:00Commented Mar 13, 2014 at 15:02
2 Answers 2
Your code is a bit messy, but I can give a very simple example that does what you want (so, not based on the code you gave).
You set an intervaltimer and update the height of a div-element each interval.
DEMO: http://jsfiddle.net/Mp7R3/
HTML:
<div id="container">
<div id="bar">
</div>
</div>
CSS:
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
JS:
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
1 Comment
If I understand you correctly, you're hoping to use inline JavaScript within your CSS. That isn't possible, unfortunately. You'll have to use JavaScript to set the CSS like this:
jQuery:
var myJavaScriptVariable = '30%';
$('input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner').css("height",myJavaScriptVariable);
Straight JavaScript
var myJavaScriptVariable = '30%';
document.querySelector('input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner').style.height = myJavaScriptVariable;