I have a temperature scale (green up to some extent, then yellow and then red) in the background and need a temperature "bar" of sorts over it which:
I did something like this, created a div here
<div id="temperatureBar" style="background-color: black; height: 20px;"></div>
and used some jQuery
function refreshTemperature(){
var width = (Math.random() * (100 - 1)) + 1;
setInterval(function () {
$('#temperatureBar').fadeOut('slow');
$(document).getElementById('temperatureBar').style.width = width+"px";
$('#temperatureBar').fadeIn('slow');
refreshTemperature();
}, 5000);
}
This ain't working though. Can anyone help me with a workable solution?
You should use the $.css
method of jquery.
Another thing which you may not have noiticed is that setInterval
is called every 5 seconds in your code, and each call starts another setInterval
.
This means that after a couple of minutes, you will have a huge number of events waiting to be called and this will lead to all sorts of problems. Use setTimeout
instead.
Here's a working sample:
function refreshTemperature() {
setTimeout(function() {
var elem = $('#temperatureBar')
var width = (Math.random() * (100 - 1)) + 1;
elem.fadeOut('slow');
elem.css('width', width + "px");
elem.fadeIn('slow');
refreshTemperature();
}, 5000);
}
refreshTemperature()
#temperatureBar {
background-color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="temperatureBar">
My size changes
</div>
I updated your js code. Now the width changes periodically.
function refreshTemperature(){
var width = (Math.random() * (100 - 1)) + 1;
$('#temperatureBar').fadeOut('slow');
$('#temperatureBar').css('width', width + "px");
$('#temperatureBar').fadeIn('slow');
}
setInterval(function () {
refreshTemperature();
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="temperatureBar" style="background-color: black; height: 20px;"></div>
When writing a gallery faced with a problem. There is pagination for the gallery. Each page should be different picture. As with the aid of AJAX upload new content to the gallery when switching pages? ...
When writing a gallery faced with a problem. There is pagination for the gallery. Each page should be different picture. As with the aid of AJAX upload new content to the gallery when switching pages? ...
I want an object like var obj = { "ABC" : { name: true, dob: true}, "CDE" : { name: true, dob: true}, "EFG" : { name: true, dob: true}, "CBA" : { name: true, dob: true}, "XYZ" : { ...
I want an object like var obj = { "ABC" : { name: true, dob: true}, "CDE" : { name: true, dob: true}, "EFG" : { name: true, dob: true}, "CBA" : { name: true, dob: true}, "XYZ" : { ...
I need to set for a div a margin-left in JavaScript in such a way that its value if the minimum between two lengths in different units, e.g. min(10pt,15vw). There is Math.min() that we can use to ...
I need to set for a div a margin-left in JavaScript in such a way that its value if the minimum between two lengths in different units, e.g. min(10pt,15vw). There is Math.min() that we can use to ...
I am trying to understand what causes a simple jquery function to fail. It simply looks for the ID, replaces some content with other data. I have $data1, $data2, $data3 as the replacement test data ...
I am trying to understand what causes a simple jquery function to fail. It simply looks for the ID, replaces some content with other data. I have $data1, $data2, $data3 as the replacement test data ...