Making the jQuery countdown accessible - javascript

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'
});

Related

JS - Clone a li and if its been already cloned then omit it and modify previous one cloned

Im doing task history, where you can input which tasks you have done today and, with a button, send them to the "this week" list, where you have a summary of your whole week, and the exact same with "this month".
Clearly i dont want the same task to be copied multiple times, like for ex
•Went to the gym
•Coded
•Asked stackOverflow
•Coded
•Asked stackOverflow
I want that if a task has been submitted already, then it adds +1 to the total times, and avoid dupping. Following the first example it would look like this:
•Went to the gym
•Coded - 2 times
•Asked stackOverflow - 99 times
I've been using .cloneNode and .appendChild for the clonning. But now im not quite sure as to how continue with the if conditions to filter duplicates, since the structure of the li is:
<li> <p class="taskAdded bodyText"> •Cooked dinner</p> <span class="taskXP favouriteColor">+5xp</span> </li>

Date Changing Interval

Not much coding experience, but hoping the community can help. I'd like to have a simple HTML headline read the following:
"Meals are available for pickup on Sunday,February 23 and Monday, February 24."
The crux is I need this to change every Thursday at 1 p.m. so that the dates change to the dates of the FOLLOWING Sunday & Monday.
--
We are a meal prep service with new menus every week. Order cut off is every Thursday # 1 p.m. I've automated the site's meal menu to rotate at this time. With this dynamic headline, I hope to avoid customer confusion so that if someone orders on Thursday # 2 p.m., they know their meals aren't going to be available until the following weekend.
Hope that makes sense. Thanks in advance for the help!
You can do this quite easily using the php time functions
Example:
<?php
$monday_date = strtotime('next monday');
$sunday_date = strtotime('next sunday');
?>
<!-- Some content -->
<div class="header">Meals are available for pickup on Sunday,February $sunday_date and Monday, February $monday_date</div>
<!-- Some more content -->
The above example wont rotate at 1pm but will show the date of the closest sunday/monday. I leave it as an exercise to the reader to work out how to adapt it for timings (hint: the time library can detect the current time)

Javascript Workday Progress Bar

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.

AngularJS Countdown Timer

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.

How to get hours and minutes selector in jQuery DateTimePicker control

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.

Categories

Resources