I am using the "timer initialized with some predefined end time" found here: http://siddii.github.io/angular-timer.
I got it working on my site, however, I want to remove a DOM element once the timer hits 0. Below is the code that I have:
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.<div ng-if="milleseconds > 0">The countdown has not finished yet!</div></timer>
I want the above div to disappear once the milleseconds become 0, because that means the countdown has finished.
What am I doing wrong?
From the documentation, it looks like milliseconds is represented as millis, not milliseconds.
Related
I have a simple jQuery countdown running on a website.
I'm trying to make this widget WAI-ARIA compliant.
Requirements are as follows:
Make the area live, so it updates with the countdown.
Don't read the seconds, as those will be distracting to the user.
Read in an understandable manner (ex. "59 minutes", not "59").
Read in order (hours, then minutes).
HTML source cannot be changed.
Below is the code for the jQuery countdown widget.
<div id="countdown" class="countdown">
<div class="seconds">
<div class="seconds-digits">07</div>
<div class="label">seconds</div>
</div>
<div class="minutes">
<div class="minutes-digits">03</div>
<div class="label">minutes</div>
</div>
<div class="hours">
<div class="hours-digits">118</div>
<div class="label">hours</div>
</div>
</div>
My initial idea was to make .minutes and .hours live and atomic. This will ensure proper reading of the updated values, as well as "minutes" and "hours" suffix. Sadly, however, this does not read them in the right order. I'm also not entirely sure it's the most correct way of doing things, since MDN uses role=timer to describe a countdown.
[timer] or any kind of timer or clock, such as a countdown timer or stopwatch readout.
The semantic purpose of the countdown is to update the user on the time left until the deadline. This could span for days (but not weeks).
This is what I've attempted:
// Correct position of elements
$('#countdown').append($('.seconds')).append($('.minutes'));
// Make wanted elements live
$('.minutes, .hours').attr({
'aria-live': 'assertive',
'aria-atomic': 'true'
});
But correcting the position of the elements did not change the order in which the elements are read. I think this is because the author of the webpage updated the seconds first, then the minutes and then the hours (the .html('%S') line comes before the .html('%M') line).
The output I receive from my solution is
03 minutes 118 hours
The expected output is
118 hours and 03 minutes to deadline
Technically, the valid values of aria-live are assertive, off, and polite. Setting it to true may have unexpected results. Some browsers may interpret true as polite, but you'd be lucky.
Also, you are setting two different elements as live - the minutes and the hours - which means they can be updated separately and stacked on the aria-live queue in the order they change. You should have aria-live on the entire countdown. Since you don't want seconds announced, you could add aria-hidden to seconds so that only minutes and hours are announced. Something like this (untested):
// Make countdown live
$('.countdown').attr({
'aria-live': 'polite',
'aria-atomic': 'true'
});
// Hide seconds
$('.seconds').attr({
'aria-hidden': 'true'
});
I'm using jQuery to use it's hide function but I can't seem to get it to work. The image is normally set to a scale of 0 0 0, and after a period of time, the scale changes to 1 1 1 (so, image becomes visible). I want to do this on an interval and can use setInterval for that. However, I also want to hide the image while inside that same interval. So, it becomes visible and then invisible on a loop, basically. Here is the code:
<script>
function PopUp(scale) {
var indicator = document.getElementById('FeelIndicator');
indicator.setAttribute('scale', '1 1 1');
$("#FeelIndicator").hide(8 * 1000) }
setInterval(PopUp, 10 * 1000);
</script>
As of now, the indicator does pop up after 10 seconds, but never becomes hidden. I don't get an error message in the console, but I'm guessing that I'm not using the jQuery code correctly. Any help would be greatly appreciated!
edit: Thank you Jaromanda. I've edited the code but it still doesn't seem work.
Muhammad, I just want it to appear for a few seconds and then disappear. It will also disappear if the user clicks on the image but I'm not worried about figuring out that code.
Your jquery/javascript selectors don't match.
Assuming the actual element Id is #FeelIndicator:
$('#FeelIndicator').hide(8 * 1000)
instead of:
$('#indicator').hide(8 * 1000)
I'm trying to develop a progress bar which gets filled by the amount of time that has passed in two shifts at work.
The first one starts from 7:00 am to 17:00 pm and the second one is from 17:00 pm to 2:00 am from the next day.
I investigated and found this fiddle.
in this part:
$self.prev(".percent").text("0%");
$.ease(0, targetVal, 10000, "swing", function (i) {
$self.progressbar("option", "value", parseInt(i));
$self.prev(".percent").text(parseInt(i) + "%");
The problem is that it fills the progress bar continuously, but I need it to stop the progress bar when there are lunch breaks, (9:30am to 10:00am, and 12:00pm to 12:30pm by example, in the first shift) and I truly don't know how to do it.
Which is the best approach possible to do it? I tried to convert the working hours to minutes (substracting the lunch breaks) but it still is incorrect.
Thanks in advance.
By default kendotimepicker have a time interval of 30 min,but i want to reduce it to 1 min.What should i do in this line to set time interval to 1 min
var timepicker = $("#timepicker").data("kendoTimePicker");
This isn't really an angular question since you're using jQuery.
<input id="timepicker" />
<script>
$("#timepicker").kendoTimePicker({
interval: 1
});
</script>
As per:
http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker
I have downloaded and tried the jQuery DatetimePicker control from http://plugins.jquery.com/datetimepicker/. This is v2.3.7.
And in the download there is an image attached here which shows the selectors on both hours and minutes. But I haven't been able to find anything in the documentation on how to achieve that. Could someone please point out how to achieve this?
$('#' + subgridid_complete).datetimepicker({
format: 'mm/dd/yy H:i',//'d.m.Y H:i',
//inline: true
mask:true,
});
This is what I get using the code above. Notice that the Hour and minute are not independently selectable.
Many thanks
No example on the page shows a freely choosable time. You can use 'step' to specify for example a 15 minute step in the time scroll-bar.
You can also switch to the trentrichardson.com/examples/timepicker (a jquery-ui-addon). Here, the Time can be chosen, like in that example: trentrichardson.com/examples/timepicker
If you want 15 minute intervals try:
step: 15,
From the documentation >> For time only
jQuery('#datetimepicker5').datetimepicker({
datepicker:false,
allowTimes:[
'12:00', '13:00', '15:00',
'17:00', '17:05', '17:20', '19:00', '20:00'
]
});
For datepicker with date and time use:
jQuery('#datetimepicker4').datetimepicker({
format:'d.m.Y H:i'
});
datetimepicker4 and datetimepicker5 are textbox id on which you want to open calendar
Have you seen this? http://xdsoft.net/jqplugins/datetimepicker/
This contains few examples on how to use the datetimepicker, and also use moment.js with this.
I tried that before, too. No example on the documenation page shows a freely choosable time.
So I switched to jquerUI-timepicker. Here, the Time can be freely chosen. Many examples are provided.