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.
Related
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)
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'
});
Plunker- http://plnkr.co/edit/RVKzD9kXNNxinShK7nLU?p=preview
I have a plunker which has the date displayed and a small icon where we can select any date we want and it will update it in the input field.
My problem is - i need to display the previous day when user opens the page. Currently here it displays presnt working day.
Also, while selecting previous day, i need not include weekends. i.e. saturday and sunday should be ignored. For e.g. today is 11th April. For previous date selection, i want 8th April to directly show up. 9th and 10th being saturday and sunday should be ignored.
Can someone please have a look.
Please ignore the below html code as it didnt allow me to post the question until i write some code. The plunker has the code which i am using.
<!doctype html>
</html>
You can do this by checking the date.getDay() and decrementing accordingly.
$scope.today = function () {
var lastWorking=new Date();
lastWorking.setDate(lastWorking.getDate()-1)
// 0 for Sunday and 6 for Saturday
while(lastWorking.getDay()==0 || lastWorking.getDay()==6){
lastWorking.setDate(lastWorking.getDate()-1);
}
$scope.tradeDate = lastWorking;
};
Updated Plunk
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.
I am displaying data of dates in my datatable using timeago.js along with the use of PHP. The problem is some data specifically dates in my datatables are missing when I click on the next page of my datatable. I don't know how to fix this, please help.
This is my Datatable-Table on its first page
Date_Joined Username
8 minutes ago john
10 minutes ago jake
20 minutes ago jay
And this is the next page of my datatable showing no date
Date_Joined Username
may
june
april
and if i click on my datatable to view 10, 25, 50, 100 pages
Date_Joined Username
8 minutes ago john
10 minutes ago jake
20 minutes ago jay
may
june
april
Please I really need your help.
Add this code inside your tag. It should work when you click the next page.
inside $("") add the table id and add _paginate next to it
$("#simpledatatable_paginate").click(function(){
jQuery("abbr.timeago").timeago();
});
While the above code works only for the pagination. This code here will allow you to solve your problem. Replace the above code with this code:
$("#simpledatatable").on('draw.dt', function(){
jQuery("abbr.timeago").timeago();
});
add this code before you iniatilize your datatable.