We Keep Coding

Javascript Function for Highlighting something at certain time of day

I have a spreadsheet that displays every member of my staff's name and what time their lunch break is. We use this list to assign them new cases that come in, but obviously we can't assign them a case when they are at lunch.
I would like to figure out a way to highlight or "gray out" their names when they're on lunch, and then change back when their lunch time is over.

I think you can use a conditional class with css and JavaScript maybe inside window.onLoad.. Something like that:
CSS:
.class{
...
}
.classHighLight{
...
}
JS:
window.onload = function() {
var currentHour = new Date().getHours();
var arrStaffs = Here you load your spreadsheet's hours
arrStaffs.forEach((member) => {
if(member.lunchHour == currentHour){
document.getElementById(*Member's button ID*).className = 'classHighLight';
}
})
};
That way, when you visit the page, your onLoad function will highligth members that have the same lunchHour as the current hour. I dont't know your spreadsheet data layout, but I'm pretending you have something like:
Mike - 14 / Peter - 12
Hope it helps you :)

Javascript setInterval doesn't update timestamp used inside

I am using setInterval in Javascript. For a simple example I tried to update a time displayed.
var tim = new Date();
function loadLog(){
document.getElementById('timebox').innerHTML=tim.getTime();
}
window.setInterval(loadLog, 1000);
But the time is not updated. Why? How can I update the variable inside setInterval?
Thanks

Generate a new date each time instead of always showing the same one :
function loadLog(){
var tim = new Date();
document.getElementById('timebox').innerHTML=tim.getTime();
}
window.setInterval(loadLog, 1000);

create 'time finishing' from value

I have a countdown timer in jQuery with a pause/resume function.
I'd like to take the "totalSeconds" value and add it to the current time so that I can display what time the countdown will finish...
so it'd be "current time" + "totalSeconds" on the page load(?)
How would you calculate this and create the <p> tag with jQuery?

The below code would append the <p> element to the end of the body tag.
If you want to format the date, you could use this jquery plugin, or some simple string manipulation.
var totalSeconds = 300;
var date = new Date();
date.setSeconds(date.getSeconds() + totalSeconds);
$("body").append("<p>"+date+"</p>");

Implementing jQuery Timer

I'm getting a list of notes from the database and displaying them to the view, if the note is less than 15 minutes old then I am displaying a edit button allowing users to inline edit the note and save the new information. I have this part working fully. I'm now trying to attach a timer to the notes that are less than 15 minutes old and hide the button when the timer is up. N.B. The user can edit multiple notes as long as they're < 15 minutes old.
How would I go about doing this, as I'm not too familiar with jQuery and Javascript?
Thanks for any replies, as I'm quite new to this forum stuff I wan't sure if you needed code or not to answer the question. So if anyone wants to look at it I'll put it up.

I would add an .editable class to notes that are still editable and remove it when no longer.
You could retain the time for the note in a data-time="1359999066" attribute (assuming it's unix timestamp). Let me know if you need further help with the code I implied.
(function checkTimer() {
$('.note.editable').each(function() {
//check for timestamp, remove .editable and hide button
});
if ( $('.note.editable').length ) setTimeout(checkTimer, 5000);
})();
// this will check every 5 seconds

Usage
var timer = $.timer(function() {
alert('This message was sent by a timer.');
});
timer.set({ time : 5000, autostart : true });
timer.set(options);
timer.play(reset); // Boolean. Defaults to false.
timer.pause();
timer.stop(); // Pause and resets
timer.toggle(reset); // Boolean. Defaults to false.
timer.once(time); // Number. Defaults to 0.
timer.isActive // Returns true if timer is running
timer.remaining // Remaining time when paused
http://code.google.com/p/jquery-timer/
It might solve your problem..see full article and demo on link

On the server side you can attach an data attribute to each note containing the time of creation:
<div class="note" data-creation="1360000265027">
<!-- milliseconds from 01.01.1970 (UTC) -->
<p>My content</p>
<button>edit</button>
</div>
Now you can check whether this is older than 15min:
(function checkTimer() {
$('.note').each(function(){
var creation = $(this).data('creation'),
// time in milliseconds from 01.01.1970 (UTC) minus 15min (900000milsec)
fifteenAgo = (new Date).getTime() - 9e5;
if (creation <= fifteenAgo) {
$(this).find('button').remove();
}
});
if ( $('.note button').length ) setTimeout(checkTimer, 5000);
})();

javascript/python time processing fails in chrome

I am writing a timer web app,which records start time and stop time.It uses javascript,jquery1.4.2 for the front end and python for backend code.When a start button is clicked ,start time is saved in a javascript variable.when the button is clicked again, stop time is saved in another variable.These values are passed as hidden parameters to the python code which gets the start,stop values from django's request parameter.
I expect the start/stop parameters values to be in the following format
"07:16:03 PM"
so that it can be parsed using '%I:%M:%S %p'format string.
I am getting this correctly in mozilla firefox.But when I use chrome,I only get
"19:16:03"
This causes value error when I try to parse it with the above format string.
import time
...
def process_input(request,...):
start_time=request.POST[u'timerstarted']
...
fmtstr='%I:%M:%S %p'
start_time_list = list(time.strptime(start_time,fmtstr)[3:6])
I tried putting alert('start time set as'+start_time) in javascript to find what values are set in the page's hiddenfields
With firefox ,I got
start time set as08:03:09 PM
stop time set as08:03:43 PM
but with chrome
start time set as20:04:21
stop time set as20:04:32
My knowledge of javascript,jquery is minimal.Why is the script behaving differently in these two browsers? Below is the javascript snippet
$(document).ready(function(){
var changeBtnStatus=function(){
var timebtnvalue=$('#timebtn').attr("value");
if (timebtnvalue =="start"){
...
var start_date=new Date();
var str_time=start_date.toLocaleTimeString();
var timerstartedfield =$('#timerstarted');
timerstartedfield.attr("value",str_time);
alert('start time set as'+str_time);
}
else if (timebtnvalue=="stop"){
...
var stop_date=new Date();
var stp_time=stop_date.toLocaleTimeString();
var timerstoppedfield =$('#timerstopped');
timerstoppedfield.attr("value",stp_time);
alert('stop time set as'+stp_time);
}
};
var timerBtnClicked=function(){
...
changeBtnStatus();
};
$('#timebtn').click(timerBtnClicked);
...
}
);

You don't want the string of the time in locale, using the toString method you can provide your own format, or use toUTCString().
toLocaleTimeString is especially meant to display the time as the user is used to, you want it in a set format.
So instead of start_date.toLocaleTimeString(), you want to use start_date.toUTCString().

Why format the time in JavaScript and parse in Python, and even submit yourself to the confusion of different locales?
Try using Date.getTime insteam:
start_time = (new Date).getTime();
stop_time = (new Date).getTime();
This gets you the time in milliseconds since the epoch, which should always be stable.