I am trying to use the jQuery Countown plugin to let my users now how much time they have left for a certain task.
So I use the following code to start the countdown with 30 minutes.
<script type="text/javascript">
$(function () {
$('#defaultCountdown').countdown({until: '+30m'});
});
</script>
The problem is that the users are going to be navigating to different pages for a given task, and if I just include this code on all the pages the timer would start from 30 minutes every time a user goes to a new page or refreshes the current one. I am new to jQuery so I would like to know if there is a way to make this code static so that is starts after a given event(in one page) and is and stops when an event on another page has occurred?
EDIT: I should mention that the countdown will only be used for a usability test in a controlled environment so that the application will only be run on one computer.
Client side solution:
Instead of counting up to a relative time, count to an absolute time and store it in a cookie.
Each page can lookup the value and start the timer.
This is not possible unless some synchronisation mechanism is provided:
Each page passes to the other the time remaining in the query string. Initialisation code needs to be modified in order to start the countdown from the received parameter.
Each page posts the time remaining in the server. This is more difficult to implement as it requires a persistense layer in the server.
What usually happens is to have the countdown in one tab/window and open the other pages in new ones. You can ask the user not to close the original window.
I see three solutions:
1) Give starting time from server side.
2) Load other pages with AJAX, so page will not refresh
3) Use frames (worst choice).
Related
So I have a function and I want this function to run after(like 10 min) user selects it. While timer(10 min) is counting down to run this function, I want timer to be shown to user in a spesific view. I have all functions and views set up for this aim just I dont know how to put timer and show it to user.
https://www.w3schools.com/howto/howto_js_countdown.asp
I checked this but I cant properly put PHP values into Javascript so I cant make it. I also thought about cron jobs but I am not sure how I can do it there.
1) I want a function to run after a spesific time.
2) Additionally I would really like to show this time as a countdown to user.
If you want function that will run after certain time at serverside - check laravel.com/docs/5.5/scheduling. It's really easy to setup.
You can create Laravel's with your function that will repeat every ten minutes or whatever you want. That job would get date from database and check if function should be executed - if so, mark database record with date as executed and call your function.
For timer, in my opinion best approach is to make AJAX call to some API which would return your date for timer, then all need to be done is assign it to a javascript's variable.
Another way is to render view template also with date, make it invisible with CSS display: none and then retrieve it from DOM for your JS timer.
You would need make some changes to timer at w3schools. Add some conditionals to check how much time left, and if it's =< 10 minutes, append timer to the DOM.
We are using the Orangehill fork of bootstrap-session-timeout and it works nicely, with one exception, and I cannot figure out how to reslve this. Wondered if someone could help turn the light on for me.
Site is written in PHP with Bootstrap3 and JQuery3.
The footer of every page contains the script that activates bootstrap-session-timeout, but the option to reset the timer each time the mouse is moved is not used. If there is no activity within the timeout period, the ribbon pops up and the user is given the option of Staying Connected or Signing Out.
This is working fine for the site, however what we have is an order edit page, where users can add, delete and update lines that are on an order. The page is not refreshed during the edit. To add, delete or update order lines, the links call JS functions, which in turn call PHP scripts to perform the updates, JS then being used to update the screen contents dynamically.
We need to reset the session timeout counter each time the user updates the order.
Ideally, we would like to call a function whenever an update to the page contents is made, but none of the individual bootstrap-session-timeout functions seem to be available within our JS.
Hope this makes sense and thanks in advance for any help/pointers.
Since nobody responded to this question, I thought it pertinent to add my solution, which might not be the best, but it does work.
Basically, we have an order entry page which stays in place while an order is being entered. The countdown timer keeps going even though the user might be doing something on the page (we have the on-key options turned off). So, even though the user might have last updated the order 5 minutes ago (the updates being handled via Ajax calls to PHP API's), the countdown timer is not reset because the page has not been reloaded.
My solution is to write the timestamp to a file which is keyed by PHP session-id, every time a PHP script is loaded. This applies to the main page or to API's. So, when the countdown timer ends, a timeout script is called, and this checks whether the last activity timestamp in the file is before or after the timeout cutoff point. If it is, the logout script is called, but if not, the current page is refreshed, which causes the countdown timer to be reloaded.
I'm making a series of JavaScript pages that share information via localStorage. Everything works fine, but when I change a parameter in one of the pages and then move to a different one, I need to reload manually with CtrlR so that the changes become effective. I succeeded at doing the refreshing automatic using onBlur, but, alas, such function stops working when I upload the scripts to Android (the final destination of these scripts is becoming an Android app).
So now I'm trying to use addEventListener with the storage event, but nothing happens, I still have to do the refreshing manually. I've read lots of web sites and gone through a lot of examples but I still don't get it. Here is the relevant code:
window.addEventListener("storage", handler);
function handler() {
location.reload();
}
Let me share some more about what I'm trying to do: I have a series of html pages, each of them with a form to make a calculation for a diet plan. Example: the first one asks for body info and gives you your basal calory intake.
A second page takes that basal calory intake number, stored using localStorage, shows it in the screen, and asks you in a form to introduce your daily calory target; with those two numbers, it calculates how long would it take to lose one kilo.
If I go back to the first page and enter different body measures, generating thus a different output, and then revisit page 2, I want to find that basal calory number there automatically refreshed. I succeeded at doing this IN THE COMPUTER using onBlur and onFocus:
window.onblur= function() {window.onfocus= function () {location.reload(true)}};
This reloads the page of the tab you're landing in every time js detects you've just changed from one tab to another, notwithstanding if localStorage data has been changed or not - a 'just in case' approach.
The problem is that when I upload these pages to Android, the refreshing stops stops working (and in Android you cannot do ctrl+r to force it). Apparently Android does not consider the different pages as tabs; that would explain onBlur and onFocus not working.
That's why now I'm trying the localStorage approach: "if localStorage has changed, (i.e., someone has been changing values in the other pages), then refresh the screen on the current page (so that the new values show up)".
I know localStorage events work in my browser because this demo works. But I cannot make the code work in my scripts.
I hope having explained myself more clearly this time (please bear with me, this is my first post...)
The storage handler is called when it changes in another tab not in the current tab.
You could override the setItem method.
!function() {
var setItem = Storage.prototype.setItem;
Storage.prototype.setItem = function() {
setItem.apply(this, arguments);
location.reload();
};
}();
I need to make a section of my site like a vidiprinter stlye thing where I can update it and the page will refresh automatically on the user's device without them having to refresh. Ideally if I could allow other people who I specify to update the thread as well that would be great but is not essential. Is there any way that I can do this? (As simple as possible)
Thanks!
Have javascript check / make an ajax call to some back end page to check for updated. I'd also save the time stamp of the last time the page was updated, and then check if the newest comment / update time stamp is greater than the old time stamp, then update the page either by refreshing the whole page, or by adding the info right there from an an ajax call.
Hello Guys I'm having a problem. The countdown of my Page resets when the user refreshes the page. Is there a way to prevent it from resetting? like whoever goes to that specific page the timer will be how it used be on how I left it? not whoever goes to that page but for everyone who goes to that specific page just like the countdown timer in this site
playrps.net/
here is the code:
http://myanimesekai.com/countdown.js
Example:
http://myanimesekai.com/time.html
I've found a lot of question that is similar to this but no one have answered them yet..
You'll have to save the start or end time for that user.
You can do that server-side if you are using php or the like but saving it to a session.
You can also do it client-side by saving it to a cookie or to localStorage.
It depends on what your counting down towards:
The page you mentioned uses an absolute time as the reference to calculate "count down":
var someTargetDate = '07/09/2014 12:00:00';
So every time someone loads the page, the counter value is calculated by something like:
var counterValue = Date.parse(someTargetDate) - Date.now();
However, if the target date is not known statically and can't be hardcoded in your HTML, for example, if you want to set the "targetDate" to be exactly a day from the first time a user goes to your webpage.
In this case, you need to set (and keep track of) targetDate in the users' sessions via either:
A backend server API which returns the targetDate OR
Browser-based stored (e.g. cookies)