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);
})();
Related
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 :)
I am sending a timestamp from the server and I want the browser to know when that exact time is.
I am using Moment but feel there are a few ways to achieve this.
I have looked at using isSame() in a setInterval() but it doesn't seem to be working.
var interval = setInterval(function(){
if(moment().isSame(moment(data.server_time_stamp))){
console.log('MATCHES!!!')
clearInterval(interval)
}
}, 1)
Where data.server_time_stamp is a moment object passed from the server (Calculated as current time + 10 seconds). I have set this to utc() in order to standardize the timezones on server and client.
I have also tried setting it to unix() and in my setInterval() loop, using === operator to see if they are the same. Like so:
var interval = setInterval(function(){
if(cur_time === data.screenshot_time){
console.log('MATCHES!!!')
clearInterval(interval)
}
}, 1)
all though with this method, it doesn't seem to be acurate enough.
What is the most accurate way to messure this?
You should compare the seconds not the milliseconds like #some said.
It could work like that:
moment.utc().isSame(moment(data.server_time_stamp), 'second');
The method I ended up using (but am yet to thoroughly test) was using timesync to sync all clocks and then match the current time in a setInterval()
var ts = timesync.create({
server: SERVER + '/timesync'
});
var interval = setInterval(function(){
if(moment(ts.now()).utc().unix() === data.screenshot_time){
console.log('SNAPPED!!!')
take_photo()
clearInterval(interval)
}
}, 1)
Im using the car rental plugin and need to modify it in a way that if the rental time chosen by customer is less than 2 hours, to give him a message, pop up or any kind of message, that he needs to choose time minimum 2 hours for rental.
You can see the example here: http://envato.bestsoftinc.net/wp-car/
I need to make sure that there is at least 2 hour difference between pick up date field and drop off date field, if not, I need to show him message and not let him click on the Search Button. Any ideas how I can achieve that with jQuery or Regular Javascript please?
Thank you
this is the basic logic for it, try implement this with your site.
i found moment.js is really helpful with js time date obj you can give it a try
if($('#checkInDate').value() === $('#checkOutDate').value) [
if both date is the same date, than
var checkInTime = $('#checkInTime').value();
var checkOutTime = $('#checkInTime').valeu();
get time value
if(checkOutTime > checkInTime) {
checkOutTime must be later than checkInTime when it's the same date
if(checkOutTime - checkInTime > 2) {
if duration is more than 2 than this value is ok
alert('ok');
this fail 3rd if statement
} else { alert('error must less than 2 '); }
this fail 2nd if statement
} else {alert('error checkout must bigger than checkin'); }
end 1st if statement that check for same date
}
I understand how to display the system time/date. I also have textboxes where user input the time that they want to input. I'll call it 1st alarm.
What I want to do is check if once the system time reaches the 1st alarm, it'll do something. I currently have a text label but that's not the important part.
In the html part i have here
<input type="text" placeholder="Enter Time Start Here" ng-model="firstAlert"/>{{firstAlert}}
<button type="button" ng-click="Check()">Submit</button>
In the JS part
$scope.Check=function(){
if(Date.now() == $scope.firstAlert)
{
$scope.info = "They're the same!";
}
}
What I would like to know is what would be the best approach in doing this. Obviously my first though is not the correct one. I've search for some examples but I mainly came across on how to do a timer and that's not what I'm focused on. I simply would like to have the user type in the date and time (mm/dd/yy hh:mm PM or AM). Or rather in the "short" date format.
You probably want to use angular's $interval or $timeout
Your logic in Check will probably have to be more granular, but this roughly what you'd want if you wanted to check every 1s:
$interval($scope.Check, 1000);
Assuming $scope.fisrtAlert is in the correct format, you might want to do this.
var timer = $interval(function(){
if($scope.firstAlert && Date.now()==$scope.firstAlert){
$scope.info = "Ring Ring";
}
}, 1000);
$scope.stopTimer = function(){
$interval.cancel(timer);
}
i need to add a script to page, which will create a countdown timer for a specified date.
I will change a date in script by cmd batch file so it will be configurable.
i have a script as bellow but it create a countdown with moths, days, minutes and sec. And i think that seconds is configured as "--" (so i will need to change it to at least three digits number / so in script i think that change cl.secs.value="--" to cl.secs.value="---" will make a job.).
<SCRIPT LANGUAGE="JavaScript">
<!--
var eventdate = new Date("December 25, 2013 23:59:59");
function toSt(n) {
s=""
if(n<10) s+="0"
return s+n.toString();
}
function countdown() {
cl=document.clock;
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
if(count<=0)
{cl.days.value ="----";
cl.hours.value="--";
cl.mins.value="--";
cl.secs.value="--";
return;
}
cl.secs.value=toSt(count%60);
count=Math.floor(count/60);
cl.mins.value=toSt(count%60);
count=Math.floor(count/60);
cl.hours.value=toSt(count%24);
count=Math.floor(count/24);
cl.days.value=count;
setTimeout("countdown()",500);
}
// end hiding script-->
</SCRIPT>
So i really dummy with scripting and im sure that can take me a long time to customize according my needs. Can you help me please? :)
Or can you give me a simple example of javascript (i just need a javascript var as countdown number and by call in a form wil give me a countdown.)
here is the countdown plug-in.I have used many time before.Try to use this
countdown plugin
example here