I am currently trying to make a progress bar for my own custom player. For some reason, getDuration() is returning a value whether it is treated like the widget's getDuration with a callback function or as if it just pulling a value.
(duration is declared globally which after testing doesn't seem to make a difference in the problem)
duration = player.getDuration();
var minutes = (duration / 1000) / 60;
var strMin = "" + Math.floor(minutes);
var strSec = "" + Math.floor((minutes - Math.floor(minutes)) * 60);
var pad = "00";
var text = strMin + ":" + pad.substring(0, pad.length - strSec.length) + strSec;
$('#bufferText').html(text);
This is how the API says it would be handled based on description and it is how the other methods from the class work but passing in a callback function also does not work.
For anyone that isn't thinking straight like I was, the player doesn't pull any of the information until buffering/playback starts. Putting the code excerpt inside of a listener for the play-start event of the player fixed the issue.
Related
I'd like to be able to get the string returned from console.timeEnd('t') in my Google Chrome Javascript Console.
In this example below, I'd like one variable which would contain "t: 0.276ms"
> console.time('t'); console.timeEnd('t');
t: 0.276ms
< undefined
Is this something doable?
In Google Chrome 23.0.1262.2 (Official Build 155904) dev, it looks like it's impossible. The only way I found to be able to calculate time with accuracy is to use window.performance.webkitNow()
Here's a simple example:
var start = window.performance.now();
...
var end = window.performance.now();
var time = end - start;
Read more at http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now
simply you can use
var begin=Date.now();
something here ...;
var end= Date.now();
var timeSpent=(end-begin)/1000+"secs";
this is the simplest way and it will work on any browser not in only chrome
Small helper to do some time measuring. timerEnd returns the time in ms, also the timers object contains information about how many times the timer with this name was used, the sum of all measured times and the average of the measurements. I find this quite useful, since the measured time for an operation depends on many factors, so it's best to measure it several times and look at the average.
var timers = {};
function timer(name) {
timers[name + '_start'] = window.performance.now();
}
function timerEnd(name) {
if (!timers[name + '_start']) return undefined;
var time = window.performance.now() - timers[name + '_start'];
var amount = timers[name + '_amount'] = timers[name + '_amount'] ? timers[name + '_amount'] + 1 : 1;
var sum = timers[name + '_sum'] = timers[name + '_sum'] ? timers[name + '_sum'] + time : time;
timers[name + '_avg'] = sum / amount;
delete timers[name + '_start'];
return time;
}
console.timeEnd() function puts the time to console, and returns the value
so you can save it to variable
var c = console.timeEnd('a');
c/1000+'s';
or you can save this variable to window object for latest usage
window.c = console.timeEnd('b');
window.c
I am trying to write a function which when executed (e.g. user clicks a button or image) creates and displays a new timer as a new list item in an unordered list (jQuery Sortable list). It doesn’t need to be super accurate so SetInterval should work fine. It doesn’t need any stops or resets. I would like the user to be able to create as many new independent (count-up) timers (as list items) in the list as they want, theoretically (although in reality there will likely be less than 10-15 on the go at the same time).
The following code does achieve this (or at least does the first time it is run). Subsequent clicks cause grief as I suspect that the same id is being used more than once for both “minutes” and “seconds” causing a conflict between list items.
function listTimer() {
var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval (function(){
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
}, 1000);
$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + '<span id="minutes">' + '' + '</span>' + ':' + '<span id="seconds">' + '' + '</span>' + '</li>');
});
}
To allow multiple timers I then figured that each time the function is executed, the values should increment so they are seen as separate. As such I tried
Var i = 0;
function listTimer() {
var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval (function(){
document.getElementById("seconds"+i).innerHTML=pad(++sec%60);
document.getElementById("minutes"+i).innerHTML=pad(parseInt(sec/60,10));
}, 1000);
$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + '<span id="minutes"+i>' + '' + '</span>' + ':' + '<span id="seconds"+i>' + '' + '</span>' + '</li>');
i=++;
});
}
The “seconds” + i ( and “minutes” =i ) in the .innerHTML works because if I leave var i=0 and then hard code “seconds0” and “minutes0” (instead of “seconds”+i etc) in the span id, a timer is generated as planned (once). The trick is that the “seconds” + i (and “minutes” =i ) in the span id do not work as I imagined. If I leave it as per the code above (e.g. in both the .innerHTML and span id) no list item is generated. I suspect the problem is in incrementing the span id.
Addressing the “span id=” to increment it (multiple ways) does not seem to have helped.
I have tried declaring and inserting a variable with no luck:
var newSeconds= “seconds” +i;
var newMinutes= “seconds” +i;
$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + '<span id=newMinutes >' + '' + '</span>' + ':' + '<span id=newSeconds>' + '' + '</span>' + '</li>');
I have tried changing the id of the span just prior to the append with either:
document.getElementById("seconds").setAttribute("id", "seconds" +i);
document.getElementById("minutes").setAttribute("id", "minutes" + i);
or
document.getElementById("seconds").id("seconds" +i);
document.getElementById("minutes").id ("minutes" + i);
or
var newSeconds= “seconds” +i;
var newMinutes= “seconds” +i;
document.getElementById("seconds").setAttribute("id", newSeconds);
document.getElementById("minutes").setAttribute("id", newMinutes);
or by combinations of these e.g putting quotation marks around the newSeconds/newMinutes in both the .id and .setAttribute.
but I can’t seem to make the append method work and create a new independent list timer each time the trigger is clicked. The timers jump all over the place (or not at all) when the function is executed multiple times.
I have tried searching for javascript or jQuery ways of doing this but I can only seem to see previous questions that revolve around a certain number of timers (and hard coding them e.g. timer1, timer2 etc) rather than an "unlimited" number of timers. I have looked at books on Javascript and jQuery but can't seem to nut out the solution.
I am hoping I have given a minimal reproducible example. I am obviously missing fundamental issues but am unconscious incompetent at the moment. Is anyone happy to show me the error of my ways and help me get the function working?
I think that the issue stems from your referring to the timers by their Id attributes - an Id attribute is supposed to appear once per page, so having it appear in each timer will definitely cause some confusion.
I would recommend a different structure as well for organization. Here are my thoughts in pseudocode (leaving the implementation up to you)
const $timerContainerDiv = $("…"); // the place where timers live
var timers = []; // this is an array containing all of your timers
// function to add a new timer to the array
var addTimer = function(int minutes, int seconds, int title) {
// html that defines the actual structure of the timer,
// including elements for hours and minutes, each identifiable
// by a js class, and each one including a data attribute giving its value
// for example:
var $timer = $("<div class='timer' data-minutes='" + minutes + "' data-seconds='" + seconds + "' title='" + title + "'>");
timers.push(timer);
}
// now define a timer function to update all timers once per second
var updateTimers = function() {
// update each timer, decrementing one second
$.each(timers, function(index, val) {
var $timer = $(val);
var minutes = $timer.data("minutes");
var seconds = $timer.data("seconds");
var title = $timer.attr("title");
seconds--;
// need logic for when seconds goes negative to reset to 59 and decrement minutes
// need logic for when timer done, etc
$timer.empty();
$timer.append("<span>" + title + ": " + minutes + ":" + seconds + " remaining</span>");
});
setTimeout(updateTimers,1000); // call itself
}
updateTimers(); // get the whole thing started
I have a little javascript which I'm trying to use to make a timer. I got the code from another question on this site and it works ok on it's own, but since I'm making a few timers on this page I need to modify it a little and my modifications break it.
I'm not so brilliant with javascript and I can't see where I'm going wrong. All I've really done is add numerals (the id's of the products which have the timers) to the variable and function names. I've read it's ok to have numerals in variable and function names, so I'm at a loss.
The code I'm using (which isn't working) is:
$(document).ready(function () {
var x1, secs1 = 61434; //declared globally
x1 = setInterval(myFunc1, 1000);
function myFunc1() {
alert('yo');
var minutes = Math.floor(secs1 / 60);
var seconds = secs1 % 60;
$('#timer_'1).html(minutes + ':' + seconds); //assuming there is a label with id 'timer'
secs1--;
if (secs1 == 0) {
document.getElementById('timer').style.hidden = true;
clearInterval(x1);
}
}
});
Your question is unclear, and it's not obvious to me what you're trying to do. But one obvious problem is in these two lines:
$('#timer_'
1).html(minutes + ':' + seconds); //assuming there is a label with id 'timer'
That will throw a syntax error, because '#timer_'1 is not valid syntax.
Two issues here with the css selectors:
$('#timer_'1).html(minutes + ':' + seconds); //add a + between timer_ and 1
document.getElementById('timer') //should be timer_1 too
fiddle http://jsfiddle.net/Drea/1zvLspxd/
I have been using functions but I am not able to tackle this.
What I have done is created a function, then made this to use the values provided by the document class or ids and do the work. Once work is done then just give the data back! It worked!
Now I want to make this function happen for two divs, the first function works good. The issue is with the second one. The function is correct, their is some other bug while writing the result.
Here is my code:
function time_untilCom(id) {
var Time2 = Date.parse(document.getElementById("time_" + 2).value);
var curTime2 = new Date();
var timeToWrite2 = "";
var seconds2 = Math.floor((curTime2 - Time2) / (1000));
if (seconds2 > 0 && seconds2 < 60) {// seconds..
timeToWrite2 = seconds2 + " seconds ago";
$('#update_' + 2).html(seconds2);
$('#jstime_' + 2).html(timeToWrite2 + " <b>Time that was captured!</b>");
}
}
If I use it as it is, it works! The issue comes when I try to replace these
("time_" + 2), ("#update_" + 2), ("#jstime" + 2) with ("time_" + id), ("#update_" + id), ("#jstime_" + id).
What i want to happen is that the function would be provided with a common ID that is applied throughout the div and use that ID, to get the value of time, convert it to seconds, do other stuff and then provide me with the result in the corresponding element with the id that was in the argument.
function works great, it do provide me with the result. But the issue is with the id its not being sent I guess. Or if is being sent then not being applied. What might be the issue here? And don't mind the seconds i have that covered too.
I am really very sorry for short code:
Pardon me, I was about to write the code for the function too. But electricity ran out!
Here is the code: onload="time_untilCom('2'), this is the way I am executing this.
And once in the main code, it will be executed like this: onload="time_untilCom(#row.Id) because I am using ASP.NET Web Pages I will be using the server side code to write the ID from Database. And will then user the ID throughtout the div to update the time!
From what I understand, you probably want to replace the second line
var Time2 = Date.parse(document.getElementById("time_" + 2).value);
with
var Time2 = Date.parse(document.getElementById(id).value);
And at the end you can also use
$('#'+id).html(timeToWrite2 + " <b>Time that was captured!</b>");
You are passing "id" as an argument, but you never use it inside the function. My question is: In your example you are using 2 as appendix to id attributes. Is it the 2 (or other numbers respectively) that you want to have as the id parameter of the function?
Then you could just replace each + 2 in your code by + id
function time_untilCom(id) {
var Time2 = Date.parse(document.getElementById("time_" + id).value);
var curTime2 = new Date();
var timeToWrite2 = "";
var seconds2 = Math.floor((curTime2 - Time2) / (1000));
if (seconds2 > 0 && seconds2 < 60) {// seconds..
timeToWrite2 = seconds2 + " seconds ago";
$('#update_' + id).html(seconds2);
$('#jstime_' + id).html(timeToWrite2 + " <b>Time that was captured!</b>");
}
}
EDIT: Please tell us where and how exactly do you call time_untilCom? Did you pass the id there?
Hoping for a quick peer review here. An associate and I build out a video popchart plugin for a client in south korea (here's the test site - http://izepic.com/kpopcharts/). My question relates to the activity meter in the header of each vid player. So, I wrote the js below to check each of the social interaction numbers, determine their percentage of the interaction total, and then set the width of each type in the meter itself. Note, specificity for each interaction type was required.
$('.bkp-meter').each(function(index){
// find participation type base numbers
var voteTotal = parseInt($('.bkp-vote-total').eq(index).text());
var facebookTotal = parseInt($('.bkp-facebook-total').eq(index).text());
var twitterTotal = parseInt($('.bkp-twitter-total').eq(index).text());
var googleTotal = parseInt($('.bkp-google-total').eq(index).text());
var commentTotal = parseInt($('.bkp-comment-total').eq(index).text());
var scoreTotal = voteTotal + facebookTotal + twitterTotal + googleTotal + commentTotal;
// find participation type ratio
var votePercentage = (voteTotal / scoreTotal) * 100;
var facebookPercentage = (facebookTotal / scoreTotal) * 100;
var twitterPercentage = (twitterTotal / scoreTotal) * 100;
var googlePercentage = (googleTotal / scoreTotal) * 100;
var commentPercentage = (commentTotal / scoreTotal) * 100;
if(scoreTotal > 2) {
// set meter widths for each participation type
$('.bkp-meter-votes').eq(index).css('width', (votePercentage.toFixed(0) - 2) + "%");
$('.bkp-meter-fb').eq(index).css('width',facebookPercentage.toFixed(0) + "%");
$('.bkp-meter-twitter').eq(index).css('width',twitterPercentage.toFixed(0) + "%");
$('.bkp-meter-google').eq(index).css('width',googlePercentage.toFixed(0) + "%");
$('.bkp-meter-comments').eq(index).css('width',(commentPercentage.toFixed(0)) + "%");
} else {
$(this).parent().parent().addClass('novotes');
}
});
My question: is there a quicker, cleaner way to do this? I mean, it's working fine so problem solved but it feels very brute force ... for my own improvement I'd like to know if there's a more efficient method and what sort of issues I might run into with this. One note - the percentages didn't have to be perfect ... they just need to give the user a quick shot of what other people are doin' with that vid.
Thanks
As a programmer, you should generalize when there is more than one thing:
var participationTypes = ['vote', 'facebook', 'twitter', 'google', 'comment'];
$('.bkp-meter').each(function() {
var meter = $(this);
var scores = {};
var scoreTotal = 0;
$.each(participationTypes, function() {
scores[this] = parseInt(meter.find('.bkp-'+this+'-total').text());
scoreTotal += scores[this];
});
if(scoreTotal > 2)
$.each(participationTypes, function() {
meter.find('.bkp-meter-'+this).width(
Math.round(scores[this] / scoreTotal * 100) + '%'
);
});
else
meter.parent().parent().addClass('novotes');
});
$.each() returns two params, one is index and the other is the object itself. You can optimize your selectors by only searching within that context.
$('.bkp-meter').each(function(index, meter){
...
$('.bkp-meter-votes', meter).css('width', (votePercentage.toFixed(0) - 2) + "%");
$('.bkp-meter-fb', meter).css('width',facebookPercentage.toFixed(0) + "%");
...
});
Same thing applies to your first block with the $('.bkp-vote-total').eq(index) bits.
Also note that class selectors are really slow in browsers that don't support getElementByClass natively (namely IE8 and lower) so beware using them alone like that if it's a concern. Always provide context: $('#container .bkp-meter')