Countdown Timer with Progress bar - javascript

Here is what i have so far: http://jsfiddle.net/BgEtE/
I am trying to get something like this: http://fusionmedia.dk/construction/
I need a progress bar like that and i need the days to be displayed like they have it. Also, i need to use a font called "Russel square" for the timer. I have looked all over but am having trouble.

for the timer you can use this one and you could integrate a progress bar, but I am not very sure.
This is another great tutorial that you could easily adapt to get what you want.
Well, I am not an expert but it's not so difficult, Take a look to this updated demo. Pay attention to the default variables // def values
var iCms = 1000;
var iMms = 60 * iCms;
var iHms = 3600 * iCms;
var iDms = 24 * 3600 * iCms;
this what you need to use to "schedule" the progress bar in this section:
// def options
var aDefOpts = {
start: new Date(), // now
finish: new Date().setTime(new Date().getTime() + 5 * iMms), // now + 5 days
For Example, if you write ...+5 * iMms it would be five minutes from now. iDms => Days / iHms=> hours / iCms=> seconds.
Also look at the css I've added in the demo, I think that to use a custom font, you first have to upload the font to your server, and then add the font in the style-sheet using something like this:
#font-face{
font-family: myFont;
src: url('myFont.ttf');
}
#font-face{
font-family: myFontEI;
src: url('myFont.eot');
}
Then Attach it as a font family like so...
font-family: myFont, myFontEI;

Related

Rotating font family with js

I'm very new to JS, I have a problem that could easily be solved I think but I can't figure it out :
I would like to find a way to change the font-family of an html element every 0.1 seconds without having to trigger something.
Basically I would like the html element to change font every 0.1 sec, rotating amongst 6 font families.
really thankful if you guys can find a way.
Louis
Try something like :
function changefontFamily() {
var doc = document.getElementById("elementID");
var font= ["Arial", "Verdana", "Helvetica ", "Tahoma"];
doc.style.fontFamily= font[i];
i = (i + 1) % font.length;
}
setInterval(changefontFamily, 100);
<div id="elementID">text</div>
I set 1 second (1000 ms), for clarity, because 100ms is too fast 🙂
(async()=>{
const elem = document.getElementById('elementID');
const fonts = ['Arial', 'Tahoma', 'Verdana'];
let k = fonts.length;
setInterval(()=>{
k--;
elem.style.fontFamily = fonts[k];
console.log('Now:', fonts[k], k);
if(k === 0)k = fonts.length;
}, 1000);
})();
<div id="elementID">Some Text to test it OUT</div>

Trying to update Progress bar in JS file

I am trying to update my progress bar but it will not let me doing while in the function called updateProgressBar();
function updateProgressBar(baby_due_date) {
window.location.href = "../../home.html";
//40 weeks of pregnancy
//Setting todays date
var todays_date = new Date();
//Finding the difference bewtween the dates by milli sec.
var date_difference = baby_due_date - todays_date;
//Converting millisecs to weeks
var weeks_Left_unil_baby = Math.ceil(date_difference / (1000 * 3600 * 24 * 7));
//Updating how many weeks are left on HTML
//Finding the progress of the pregnancy by percent
var progress_percent = (1 - (weeks_Left_unil_baby / 40)) * 100;
console.log(progress_percent);
//TODO: need to update progress here <<<<<<<<<<<<<<<<<<<<<<<<<
$('#progress-bar').attr('aria-valuenow', '100%')
progress_bar_classes.width('100%');
}
here is my html.
<div class="progress bg-secondary">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="1" aria-valuemin="25%" aria-valuemax="100"></div>
</div>
here is my CSS.
div.progress-bar {
width: 25%;
}
I tryed to debug your code but it is not complete enough to debug it completely. I got stuck when progress_bar_classes is not defined came up.
Anyway here are some things that might be the problem:
For me the progress bar height was 0 by default so i could not see it.
$('#progress-bar').attr('aria-valuenow', '100%') Here you are refering to an element with the id progress-bar in the html code however there is only an element with a class progress-bar
$('#progress-bar') The $() can only be used if you also include jquery.

Synchronise(!) 60000 ms Loop on every device. NO INACCURACY

this goes out to the most most professionals among you.
I am planing a Never-Ending-Loop of an (Javascript)-one-minute-animation.
The complete Animation ends after 59.999 Milliseconds.
-> Tween 1 starts at 0 ms
-> Tween 2 starts at 1000 ms
-> Tween 3 starts at 2000 ms
-> Tween 4 starts at 3000 ms
-> Tween 5 starts at 4000 ms
-> Tween 6 starts at 5000 ms
...loop
so far, so good.
I want, that the Loop is Synchronised on every device, on every operating system, any Browser, from anywhere arround the world exactly in Milliseconds. NO INACCURACY.
My try was: get the Seconds (to know the tween-no.) and Milliseconds (to know, when the next tween starts) of Server-Time via Ajax. And then, let the animation start at Tween(x) after x Milliseconds. But it is not synchronised. There are up to 2 Seconds difference.
How do i have to fix it? Please dont say, it is not possible, it has to be possible anywhere!
If its not possible with javascript, tell me something else.
Thanks a lot.
The most brutal would be to implement NTP but if half a second difference is enough you can implement a simplified version.
The main method is to start a communication between a time server and the client to get a) the time and b) the difference between the client time and server time. With a small serverprogram that is nothing more than a stopwatch you can do the following:
server -> client: server time (or start with client->server)
client: sets own time to server time
client -> server: client time
(you may repeat it a couple of times to get an average)
The serve can calculate the lag time now and send it to the client and the client corrects its time accordingly. You canot set the computer time of the client in Javascript, you can only set the time for the actual session, so you need it to repeat for every reload and in between, too, once in a while (not too often, I would say that once every hour is more than sufficient).
The overhead should be as small as possible, it would be a good idea to use a smaller protocol than HTTP if possible
A small and hastily knocked up example with PHP on the server side:
<?php
$client_ts = $_GET["date"];
// UTC timestamp in milliseconds
$server_ts = round(microtime(true) * 1000);
// send back that timestamp and the lag
echo $server_ts."|".($client_ts - $server_ts);
?>
The HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>LAG test</title>
<style type="text/css">
table {
margin-left: 1em;
}
td,th {
border: 2px solid black;
padding: .5ex .5em .5ex .5em;
text-align: center;
}
input {
margin: 3ex 1em 0 4em;
}
p {
max-width: 40em;
}
</style>
<script type="text/javascript">
// everything is highly simplified and crude here! No checks, no balances!
// Simple AJAX. Websockets would be better, of course, but also way more complex
var ajax_request;
function get_data(){
var ret, lag, diff,client_time, server_time;
if (ajax_request.readyState === 4){
if (ajax_request.status === 200){
ret = ajax_request.responseText;
}
else{
ret = null;
}
}
else {
ret = null;
}
if(ret){
// only one check here, more are better especially
// if 'diff' is very large
client_time = Date.now();
server_time = ret.split("|");
lag = server_time[1];
diff = Math.abs(client_time - server_time[0]);
document.getElementById("ctos").textContent = lag;
document.getElementById("stoc").textContent = diff;
document.getElementById("diff").textContent = (lag - diff);
}
else {
document.getElementById("ctos").textContent = "Nope";
document.getElementById("stoc").textContent = "Nada";
document.getElementById("diff").textContent = "Rien";
}
}
function sendTo(text,uid,url){
ajax_request = new XMLHttpRequest();
ajax_request.open("GET", url + "?date=" + text + "u=" + uid, true);
ajax_request.send(null);
ajax_request.onreadystatechange = get_data;
}
function testLAG(){
// cheap pseudo-UID to avoid caching
var unifier = Math.floor(Math.random() * 0xffffffff).toString();
// date.now() returns UTC time
var client_time = Date.now();
sendTo(client_time,unifier ,"phpdate.php");
}
</script>
</head>
<body>
<h1> To test lag, press LAG-Button</h1>
<p>The difference in "Diff." is the probablity that it was the same route both ways. You need to allow for some milliseconds for the HTTP overhead but in general: the lower the better.</p>
<table id="out" caption="latencies">
<tr><th>Client to Server</th><th>Server to Client</th><th>Diff.</th></tr>
<tr><td id="ctos">n/a</td><td id="stoc">n/a</td><td id="diff">n/a</td>
</table>
<input type="button" value="LAG-Button" onclick="testLAG()" /> <- press here and press often. But only if you don't mind.
</body>
</html>

My script for page loading bar, returns differently everytime of F5

I got a free source progress bar, and I wrote a script for it.
the script is here,
var nanobar = new Nanobar( options );
var loaded = 0;
var number_of_media = $("body img").length;
doProgress();
// function for the progress bar
function doProgress() {
$("img").load(function() {
loaded++;
var newWidthPercentage = (loaded / number_of_media) * 100;
nanobar.go(newWidthPercentage);
document.getElementById("showing").innerHTML = newWidthPercentage;
})
};
});
This. I think,
Loaded <-- (which gets + 1 every time an image finished loaded)
divided by
Number of total body images,,
and then multiplied by 100
So that this can make the percentage number of loading process.
Then I put that percentage number into the box of,
A Loading bar's destination point. (which is : nanobar.go( here ))
But the bar moves werid,
everytime I click the menu, it returns different.
so I made a box to display the percentage number ( in the red box you can see in the picture )
I don't understand how this kind of random numbers are coming out every time.
Please advice.
Consider....
6/7 = 0.8571428571;
0.8571428571 * 100 = 85.71428571;
So if you want to 'tidy' these long decimals, then you need to truncate the float. http://www.w3schools.com/jsref/jsref_tofixed.asp
var num = 0.8571428571 * 100;
var n = num.toFixed(2);
Then n == 85.71
I hope this helps.

Get the time show animation how much duration is currntly running

In jquery i use following code:
j=-(i)
if(j%2==1)
{
$("#caption1").hide();
$("#caption1").fadeIn(1000);
$('#main_div').hide();
$('#main_div').show(5000);
}
}
if(i%2==0)
{
$("#caption1").hide();
$("#caption1").fadeIn(1000);
$('#main_div').hide();
$('#main_div').show(5000);
}
while show animation i want the duration of animation completed?
for Example:
i set it show animation for 5secs.
show animation now started.
2 secs animation completed[ 3secs remaining]
in this case i need this completed duration[2secs] on button click??
Mark down the time when the animation started:
var animationStarted = new Date();
$('#main_div').show(5000);
....
When you need to show how much time has passed, take the current time and subtract the time saved in the previous step.
var now = new Date();
var elapsed = ( now.getTime() - animationStarted.getTime() ) / 1000;
Demo: http://jsfiddle.net/NZGU6/

Categories

Resources