Develop Reference

How can I automatically log users session out without clicking first

I made a site that is user-based and so far I've been able to easily handle the sessions up to this point. I'm not a noob when it comes to php, but I don't have a good working knowledge of javascript. I have set a timeout for my users so that they are automatically timed out after 20 minutes of inactivity. It works great, other than they need to click a link or refresh in order for the session to actually be timed out. This is my current php timeout.
<?php
//TIMEOUT AFTER 20 MINUTES
if(isset($_SESSION['signed_in'])) {
$inactive = 1200;
if(isset($_SESSION['timeout']) ) {
$session_life = time() - $_SESSION['timeout'];
if($session_life > $inactive) {
$id = $_SESSION['user_id'];
//this db row is solely to display # of users logged in
mysqli_query($connect, "UPDATE users SET user_signedin='0' WHERE user_id = '$id'");
session_destroy();
$_SESSION = array();
header("Location: timedout.php");
}
}
$_SESSION['timeout'] = time();
}
?>
But I've also tried javascript (setting the timer to 5 minutes) like so:
<script>
var wintimeout;
function SetWinTimeout() {
wintimeout = window.setTimeout("window.location.href='timedout.php';",300000);
}
$('body').click(function() {
window.clearTimeout(wintimeout); //when user clicks remove timeout and reset it
SetWinTimeout();
});
SetWinTimeout();
</script>
I've searched a number of different places to find out how to implement an automatic redirect without having to click or refresh, but so far no luck. How do people redirect automatically (without clicking or refreshing) upon timeout?
EDIT: For people who are looking for the same answer: Ok, I was able to get the desired effect by adding this to my page header
<?php if(isset($_SESSION['signed_in'])) { ?>
<meta http-equiv="refresh" content="1800;url=internal.php" />
?>
"internal.php" is very similar to the first piece of code I pasted above, though I've taken out the piece where it checks for timeout. However, now I'm having problems with people exiting the tab and not getting signed out, but that's a whole other issue.

How to refresh the WordPress home page without user noticing?

I would like to refresh the home page every X sec. I found this solution:
Install Auto Refresh Single Page plugin
Insert to header.php the lines:
if (is_front_page()) {
echo '<META HTTP-EQUIV="REFRESH" CONTENT="5">' ;
}
It refreshes the page but I notice that the page is reloaded. I would like it to happen smoothly. I don't want the refresh to make the page disappear for milliseconds. I want to refresh without the user noticing.
I have a page build with Wordpress. This page have few divs. Part of them list post type - and I need i to updated in case a new post submitted. Some divs need to change according to time of the day or the week and display different data. The page need to show all the time like a TV and information should be update automatically with no human touch. I tried to use ajax, but I don't know how to point it to reload specific div that built from Wordpress - I have no URL for specific div.

Check this out
if (is_front_page()) {
?>
<script>
setTimeout(function() { window.location = ""; }, 1000); //1 sec = 1000
</script>
<?php
}

I read your question, And as i thinking, you want update your posts on users homepage without any reloading. This can be done using "AJAX PHP". You should find plugins that uses "AJAX PHP" or "AJAX JAVASCRIPT".I hope this would be useful for you.

Trying to remove this code without the need to put it in a seperate page

My index.html page has a fancy animation to begin with it is essentially this code below...
$(document).ready(function() {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
}, 11000);
});
..... so once this code has run its 11 seconds it all gets unwrapped and thats great... Problem is I have an a tag to get back to the index page at any time and I don't want people to have to wait for the intro animation to run before getting to the homepage every time....
I will not accept any answer that says .."do the animation on a seperate page" - the code has to be on the index page itself.
I was hoping there was some sort of jquery that will remove the code until the browser page has been refreshed, something like that.. Really appreciate any help here.
EDIT -- Getting some initial feedback that this is unclear ... in step for ...
User goes to index.html
the above code begins and lasts for 11 seconds.
then it gets unwrapped and disappears.
Seperatly while the user is enjoying the site they click on the "home" logo.
this takes people back to the index.html page
Unfortunately they have an 11 seconds wait every time and i want this to stop unless they refresh the browser or something.

You could use something like localStorage or cookies on your server side to manage this.
Here's the local storage example:
$(document).ready(function() {
if( !window.localStorage || !window.localStorage.getItem('hpAnim') ) {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
}, 11000);
if( window.localStorage ) {
window.localStorage.setItem('hpAnim', true)
}
}
} );
So now (in IE8+) the second and future pageloads will not run the animation.
On the other hand if you've got a single page JavaScript app and you want it to re-run only after page refresh (as per comments on question), then you can skip local storage and simply set a global variable on window:
window.hasSeenAnimation = true
And then check that condition before running the animation again. After a page refresh that variable will be gone.

Set a cookie the 1st time that the users waits 11 secs
Can use https://github.com/carhartl/jquery-cookie or with native javascript code.
As well you can use a localstore var or url query
$(document).ready(function() {
if ($.cookie("index_viewed") == 1) {
return;
} else {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
$.cookie("index_viewed", 1);
}, 11000);
}
});

You can set a $_GET variable and then check for this. If it's there, it must be an internal link so don't load the animation:
Home
<?php
if (!isset($_GET['noAnim']))
{
?>
<script>
// your animation script goes here....
</script>
<?php
}
?>

Assuming that you only want that animation to run at "startup" (when directly pointed) you could check the tab history count:
history.length
This will return a value higher than 1 only if any navigation took place on the tab (going to index from any other page).
This is not a perfect solution though:
Cross browser issues (some return 0, others 1)
Every navigation on this tab will produce history, hence, if you navigate to your website after checking any other page, history will return a value higher than the initial. (you can also check the document.referrer to ease this issue)
If you can't afford to skip the animation on those conditions you must persist the fact that the animation had already ran, and you should aim for Local Storage, for example (as mentioned earlier) http://www.w3schools.com/html/html5_webstorage.asp

yii2: update/refresh/reload a page using Pjax different from requesting page

I have asked this question, but I think that wasn't clear enough so I am putting it differently. I have a _form.php page and a grid-view(index.php)page.
I am sending a Pjax request from _form.php and want to update/refresh the grid-view(index.php)page.
on top my _form.php I am having this code.
<?php
$this->registerJs(
'$("document").ready(function(){
$("#new_medicine").on("pjax:end", function() {
$.pjax.reload({container:"#medicine"}); //Reload GridView
});
});'
);
?>
Now the container "#medicine" is not on _form.php page, but grid-view(index.php) page. So how can I modify the above code so that it updates/refresh the container "#medicine" in index.php page.
I think I have explained the situation correctly. please tell me, if more information is needed.
Thanks.

Try using $this::POS_READY instead of wrapping your code in $("document").ready(function(){})
$js = '$("#new_medicine").on("pjax:end", function() {
$.pjax.reload({container:"#medicine"}); //Reload GridView
});'
$this->registerJs($js, $this::POS_READY);
EDIT
Apparently you want to reload the gridview that is open on another client's index.php after data is inserted using _form.php.
It isn't possible to send jQuery commands to another client (browser) and have it executed.
You can for example reload the gridview on the index.php every x seconds or minutes.
$js = 'function refresh() {
$.pjax.reload({container:"#medicine"});
setTimeout(refresh, 5000); // restart the function every 5 seconds
}
refresh();';
$this->registerJs($js, $this::POS_READY);

Countdown timer-php+mysql+js

I am working on online examination. In which the examination duration will fetch by mysql(in minutes). I want to show the countdown time on the top of the page.
currently I am using
http://javascript.internet.com/time-date/countdown-timer.html
but the main problem is .. when every time a new question display ..the page get refresh and ..timer reset again from start.
Please help me where is the main problem?
or any other example if you want to suggest?
Thanks

Before running the test you need to calculate exact test end time on the server side and save it into session:
<?php
if (empty($_SESSION['test_will_end_by'])) {
$_SESSION['test_will_end_by'] = time() + $test_duration_in_seconds;
}
?>
Then, if you provide it to your client-side script from HTML:
Time left:
<span class="timer" data-end="<?php
echo date(DateTime::RFC1123, $_SESSION['test_will_end_by']);
?>"></span>
Add this code into your jQuery DOM-ready handler to start all timers on a page:
$('.timer').each(function() {
var target = new Date($(this).data('end')), update, $this = $(this);
(update = function () {
var now = new Date();
$this.text((new Date(target - now)).toUTCString().split(' ')[4]);
if (Math.floor((target - now)/1000) == 0) return; // timer stops
setTimeout(update, 1000);
})();
});

Every time you refresh the page, the JavaScript code will run again, so the timer will be reset. To solve this problem, get the content without refreshing the page, that is : Ajax.

You can store the current value in a cookie using the form submit or page beforeunload events. Then when a new page loads, get the remaining time and keep counting down. This also allows for some network latency.
Note that the user may be able to access and modify the value of the cookie.

Store the question start time in session, when ever page refreshes get the session start time difference from server and display them in web page. The increment part you can do from the client side javascript code without using AJAX.