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)
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 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.
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 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.
Say I use a table to display scheduled content, and I want rows to disappear after their date has passed.
Row 1 has Table title
Row 2 has Date A
Row 3 has Scheduled content A1
Row 4 has Scheduled content A2
Row 5 has Date B
Row 6 has Scheduled content B1
Row 7 has Scheduled content B2
Row 5 has Date C
Row 6 has Scheduled content C1
Row 7 has Scheduled content C2
etc.
After Date A has passed, I want rows 2-4 to disappear/be hidden.
I do this website on a volunteer basis, and there is nobody else available to help. I delete the expired rows on a daily basis, but I'm going on vacation and will be unplugged for two weeks.
I don't have any example code, I'm a rookie. If you mean my html code, it's just a simple table.
Sorry for not responding sooner, Jakub (https://stackoverflow.com/users/158014/jakub). Spent 12+ hours in hospital ER with my daughter right after my last edit yesterday. I will come back and fix the post to conform to Stackoverflow standards ASAP.
You can use jQuery library to hide certain parts of the website on certain dates. It should help on this case while you are off.
First load jQuery, adding to the head section of your site:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then your table in the body section:
Then, near the end of the body tag, you create a rule for hiding content based on a date:
<script type="text/javascript">
var now = new Date();
var futuretime1 = new Date("April 10, 2013");
if(now > futuretime1)
{
$("#div").hide();
}
</script>
This will hide #div when date passes "futuretime1". You can also use jQuery selectors for selecting the appropriate table row.
Hope this helps.