I want to redirect my page to another one if I stay there for a certain time. I tried to write the following script and I put it in the head of my webpage but it doesn't work. The location where to move isn't a real url because I'm on XAMPP.
$(document).ready(setTimeout(function () {
window.location.replace("../index.php");
}, 5000););
The way you have given is totally wrong, causes a Syntax Error. Check your console. The ready() function expects a function and not an integer (as returned by setTimeout()).
Try this way:
$(function () {
setTimeout(function() {
window.location.replace("../index.php");
}, 5000);
});
Or if you want to use only after 5 seconds of inactivity, you need to use a different approach by checking the user activity (keypress, mousemove) and then clear the timer and restart it.
If you wanna try the redirect after 5 seconds of inactivity, you can do this:
var timer = 0;
function startRedirect() {
timer = setTimeout(function () {
window.location.replace("../index.php");
}, 5000);
}
function restartTimer() {
clearTimeout(timer);
startRedirect();
}
$(function () {
startRedirect();
$(document).mousemove(restartTimer).keyup(restartTimer);
});
You can do it without JS by putting right meta tag into your header
<head>
<meta http-equiv="Refresh" content="5; url=http://google.com">
</head>
where "5" is wait timeout.
Related
In my Jquery datatable I'm programmatically navigating to the pages with setinverval function.
setInterval(function () {
table3.page('next').draw('page');
}, 5000)
This works fine but stops at last page. Once it reaches to the last page, I want it to go back to the first page and do the whole process again.
I guess I need to find out the count of pages then once it reaches that, go go page 1. But I have not have good luck on how to accomplish this.
this is what I came up with:
http://live.datatables.net/fobalaxe/1/edit
$(document).ready( function () {
var table = $('#example').DataTable({paging:true});
setInterval(function(){browse(table);} , 5000);
});
function browse(table){
if(table.page() >= table.page.info().pages - 1){
table.page('first').draw('page');
}
else {
table.page("next").draw('page');
}
}
I'm trying to play a sound every time a user gets a new notification. The way I am loading the notifications on my page is simple:
(function($)
{
$(document).ready(function()
{
var $container = $("#noti");
$container.load("notify.php");
var refreshId = setInterval(function()
{
$container.load('notify.php');
}, 1000);
});
})(jQuery);
This works by updating a div container with whatever number the PHP code sends out. it retries every second (probably not the most efficient way, but it works).
I have another piece of code that checks when the div content changes, then creates an alert box (which I will change to playing a sound when the script is done):
var myElement = document.getElementById('noti');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
function contentChanged() {
// this function will run each time the content of the DIV changes
alert("js is working");
}
This script works, however it also creates an alert or the first loading of the notifications. This is because it starts of as an empty div, then it loads the data, which sets off this alert script. The only way I could think about going round this is delaying the script from loading for a couple of seconds whilst the AJAX script does its business.
Does anyone know a way I could delay this second script from doing anything for the first few seconds after page load, or perhaps a better way about going round this?
Instead of doing that, use a custom event which you trigger when load finishes:
var refreshId = setInterval(reloadContainer, 1000)
function reloadContainer() {
$container.load('notify.php', function success() {
$container.trigger('loaded')
})
}
$(myElement).on('loaded', contentChanged)
I'm creating a small quiz, mobile app using jQuery Mobile, and I'm displaying a 3 second GIF at certain points. Though, because it is shown many times, I don't want to bother the user each time, and if he/she clicks anywhere on the page it goes to the next page, but I also have set up a setTimeout, which waits for three seconds, meaning of the GIF to display completely and then moves to the next page. As you can see this makes a problem. If I click the GIF, it moves to the next page, and then if I again move to the other page, after three seconds are passed it sends me back to the previous page, due to the setTimeout. I have the following code:
EDIT :
$(document).on("pagechange", function(event, ui) {
var clicked = false;
// Here comes some if-else statements checking which page is currently active
else if ($.mobile.activePage[0].id == "correctGIF") {
correct++;
nextpage = hashtag.concat(page, 'Correct');
$('#correctGIF').append('<img src="images/Correct1.gif">');
$('#correctGIF').click(function() {
clicked = true;
$.mobile.navigate(nextpage);
alert("alert from click");
});
setTimeout(function() {
if (!clicked) {
$.mobile.navigate(nextpage);
alert("alert from timeout");
}
}, 3000);
}
So, I need to somehow synchronize it. If there is a click it should ignore the setTimeout part, and if there is no click it should wait for three seconds for the GIF to finish, meaning should activate the setTimeout part. Also please note that this GIF is displayed many times during the quiz, not just once. Any ideas about this?
Have you tried this approach:
$(document).ready(function () {
$('#correctGIF').off('click').on('click', function () {
alert('navigate from click');
console.log('navigate from click');
if (!$('#correctGIF').hasClass('clickedImageClass')) {
$('#correctGIF').addClass('clickedImageClass');
}
});
setTimeout(function () {
if (!$('#correctGIF').hasClass('clickedImageClass')) {
alert('navigate from timeout');
console.log('navigate from timeout');
}
}, 3000);
});
JsFiddle demo here: http://jsfiddle.net/e35pn/13/
Need to Display a popup before page load if page is loading more than 3 seconds. Used below code but it displays popup if page load is less tahn 3 seocnds also. Popup need to displayed if the page loading takes more time not less time.
<script type="text/javascript">
setTimeout(fnShowPopup, 1000);
function fnShowPopup() {
var answer = confirm("It may take few time to open this docuemnt. Click YES if you want to open the docuemnt in native format or click on CANCEL to continue viewing the docuemnt")
if (answer)
window.open(NativeView())
}
</script>
setTimeout(func, delay) comes with a method to abort the timer: clearTimeout(timeoutID)
<script>
var myTimer = setTimeout(fnShowPopup, 3000);
if (typeof(window.addEventListener) === 'function') {
// standard conforming browsers
window.addEventListener('load', function () {
clearTimeout(myTimer);
}, true);
} else {
// legacy, IE8 and less
window.attachEvent('onload', function () {
clearTimeout(myTimer);
});
}
</script>
Put this in the <head> of your page, before any other <script>s, <style>s or <link>s.
In your fnShowPopup function you may want to stop the page loading if the user chooses the "native format".
See https://stackoverflow.com/a/10415265/
I'm having a trouble with running function for checking new messages in table. When I open the message_page I want this 'setInterval' function to start running, but after leaving the page stop running (I have one html file with multiple pages). Is there a way to do that? Because my script keeps running even after leaving the page.
$(document).on('pageshow', '#message_page', function(){
$('#chat_box').scrollTop($('#chat_box').height());
setInterval( function() {checkNewMessages(c_key,m_fid);},1000);
});
Here's a working example: http://jsfiddle.net/Gajotres/QUCUt/
$(document).on('pagebeforeshow', '#index', function(){
timerHandler.timer1 = setInterval(function () {
$('#test-input').val(parseInt($('#test-input').val()) + 1);
}, 1000);
});
$(document).on('pagebeforehide', '#index', function(){
clearInterval(timerHandler.timer1);
});
var timerHandler = {
timer1 : null
}
Let me explain. If you create a timer as a object variable, it can be accessed at any moment. In this case pagebeforeshow event will start timer and pagebeforehide will pause it. You can test it on my example, just let it run a little bit, then go to the second page, wait a bit and return back. You will see that timer has been paused.