Develop Reference

Bootstrap progress bar is not updated

I need to process a filter on a huge amount of JSON data (currently 1.5 MB and growing). The code to filter the data is written and working, but due to the time the filtering takes, I want to display a progress-bar.
I decided to use a Bootstrap progress bar and update it's current value during my loop. I tried with following code:
HTML
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%" id="bar"></div>
</div>
JS
$("#bar").css("width", percentage + "%").attr("aria-valuenow",percentage);
This works fine - as long as I'm stepping it through in a debugger like developer-tools in chrome. Loading the page / running the code without a break-point / debugger results in a not updated progress-bar. Current progress won't be rendered in browser.
I also tried similar solutions with a jqueryUI-progress bar and the HTML5 Tag <progress> - but with the same result.
Any suggestions what I did wrong or how to refresh / render DOM after setting a new progress value?
Full loop code:
for(var i=0;i<indexes.length;i++) {
searchterm = "//data[setting = " + indexes[i] + "]";
for(var j=0;j<jsondata.length;j++){
current = jsondata[j];
infoData = {};
found = JSON.search(current,searchterm);
if(found.length > 0){
infoData.licenseNr = current.licenseNr;
infoData.data = found;
filteredData.push(infoData);
}
}
percentage = (i+1) * (100/indexes.length);
$("#bar").css("width", percentage + "%").attr("aria-valuenow",percentage);
}

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 transfer speed of a file uploading though jquery/Ajax?

I am uploading a file through ajax/jquery. The demo can be found here. This function will output the percentage complete:
//progress bar function
function OnProgress(event, position, total, percentComplete)
{
//Progress bar
$('#progressbox').show();
$('#progressbar').width(percentComplete + '%') //update progressbar percent complete
$('#statustxt').html(percentComplete + '%'); //update status text
if(percentComplete>50)
{
$('#statustxt').css('color','#000'); //change status text to white after 50%
}
}
But how do I get the transfer speed?
When I printed all the variables of OnProgress, I had this:
event: [OBJECT XMLHTTPREQUESTPROGRESSEVENT]
position: 25668
total: 2122576
percentComplete: 2
I have tried to output event.speed but I got undefined.
I do not want calculate the transfer speed on the server-side, and use another ajax request polling simultaneously that returns the amount downloaded, it would not be efficient.

You could estimate it client side...
The easiest way would be to add a global variable in your javascript, for upload start times.
<script language=javascript>
var starttime = new Date().getTime();
function setStartTime(){
starttime = new Date().getTime();
}
</script>
and in the html
<input type="submit" id="submit-btn" value="Upload" style="display: inline-block;" onclick="setStartTime()"/>
then you will need to add some stuff like this:
//progress bar function
function OnProgress(event, position, total, percentComplete)
{
//Progress bar
$('#progressbox').show();
$('#progressbar').width(percentComplete + '%') //update progressbar percent complete
var timeSpent = new Date().getTime() - starttime ;
$('#statustxt').html(percentComplete + '% time spent so far:' + String(timeSpent)); //update status text
if(percentComplete>50)
{
$('#statustxt').css('color','#000'); //change status text to white after 50%
}
}
now you just need to use the position / timespent to calculate the average speed since beginning to now..

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/

Countdown Timer with Progress bar

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;