How can I close modal dialog(s) from main page after some time, or when session expires, using JavaScript or jQuery?
Dialog is opened using the following code :
var result = window.showModalDialog("test.aspx" ... );
Dialog must be closed when counter expires like this:
function Discount() {
leftSeconds = leftSeconds - 1;
try { document.getElementById('tbLeft').value = leftSeconds; } catch (ex) { }
if (leftSeconds <= 5) {
clearTimeout(t);
// code for closing modal dialog(s)
} else {
t = setTimeout("Discount()", 1000);
}
}
Modal dialog can be closed from himself, but it's not solution in my case.
While the modal dialog is open, javascript execution on the main page is stopped, because it is waiting for a return value (even though you may not want to return one, or do anything with what it returns).
You can check this with this little example. When you click the button, the page opens, and the timer stops updating. When you close the page, execution is resumed:
<!DOCTYPE html>
<html>
<head>
<script>
var t = 0;
function count() {
document.getElementById('div').innerHTML = ++t;
}
var timer = setInterval(count, 1000);
</script>
</head>
<body>
<div id='div'></div>
<button onclick="window.showModalDialog('http://www.google.es');">Open window</button>
</body>
</html>
So, if you want to close the window automatically, you need to do it from the new document itself. My advice? Implement your timer in the window.load event of your modal page, so it can close itself after the desired time.
window.onload = function() {
setTimeout(function() { window.close(); }, 60000); //close window after 1 minute.
};
Related
I am trying to detect the window close event that I opened using window.open() in javascript. But for some reason, it doesn't seem to work.
Here is my code:
<html>
<head>
<script>
var clicktest = function() {
var newwindow = window.open("https://www.google.com",'myPopupwindow', "height=640,width=960,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
newwindow.addEventListener("beforeunload", function (e) {
console.log('hey');
});
}
</script>
</head>
<body>
<button onclick="clicktest()">hey</button>
</body>
</html>
I also tried using
newwindow.onbeforeunload = function () {
console.log('hey');
}
instead of window.addeventlistener(), but both didn't work and I did try using window instead of newwindow, still, it didn't work.
For cross-origin documents, the only solution is to poll the .closed property of the popup Window object.
But that is a very ugly thing to do, so please have a second though about why you need that.
To limit the ugliness, you can power your polling using battery friendly requestAnimationFrame:
const popup = window.open('https://google.com');
waitForClose(popup, e=>console.log('closed'));
function waitForClose(win, cb) {
function poll() {
if(win.closed) {
cb();
}
else {
requestAnimationFrame(poll);
}
}
poll();
}
As a fiddle since StackSnippet's iframes don't allow popups.
Hi this is my hmtl and JS so far what i would like is for it to detect mousemove, scroll and arrows in the iframe windows as well, as most of the website is in iframe i have looked else where and all seems overly complicated to detect movement.
Any help will be appreciated
thank you
<script type="text/javascript">
// Set timeout variables.
var timoutWarning = 1000; // Display warning in 1Mins.
var timoutNow = 2000; // Timeout in 2 mins.
var warningTimer;
var timeoutTimer;
// Start timers.
function StartTimers() {
warningTimer = setTimeout("IdleWarning()", timoutWarning);
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
}
// Reset timers.
function ResetTimers() {
clearTimeout(warningTimer);
clearTimeout(timeoutTimer);
StartTimers();
$("#timeout").dialog('close');
}
// Show idle timeout warning dialog.
function IdleWarning() {
var answer = confirm("Session About To Timeout\n\n You will be automatically logged out.\n Confirm to remain logged in.")
if (answer){
ResetTimers();
}
else{
IdleTimeout();
}
}
// Logout the user and auto reload or use this window.open('http://www.YourPageAdress.com', '_self'); to auto load a page.
function IdleTimeout() {
window.open(self.location,'_top');
}
</script>
<body onload="StartTimers();" onmousemove="ResetTimers();" onKeyPress="ResetTimers();"
some thing like *
$(".in").on("mouseover",function(){
$(this).css("background","blue");
});
$(".in").on("mouseout",function(){
$(this).css("background","green");
});
.in{width:50px;height:50px;background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="in"></div>
and use multiple like this $("selector").on("mouseover mouseout mousemove",function(){
call back
});
I have this code in my popup window (which is opened by parent window):
window.onbeforeunload = closeWindow;
function closeWindow(){
}
The problem is that this code fires when parent window is being refreshed. Is there a way for this code only to fire when popup window is actually being closed?
Hmmm. You could try something like this in the window that opens the popup.
var NewWin = window.open("NewWin", "example.htm", "width=100;height=300;");
// modify styling as necessary etc.
NewWin.onbeforeunload = function() {
window.setTimeout(function() {
if (!NewWin) {
// window has been closed
} else {
// false alarm, just a refresh
}
}, 1000);
}
EDIT: To prevent the window from reopening on parent page refresh, use a similar technique from within the popup
window.opener.onload = function() {
window.opener.NewWin = self;
}
Then change the first line of the code above to:
document.onload = function() {
if (!NewWin) { var NewWin = window.open("NewWin", "example.htm", "width=100;height=300;"); }
}
I want that when a user clicks on any external link (identified by either particular id or class) on my site then he should get a popup with a counter of 10 seconds, after 10 seconds the popup should close and the user should be able to access the external URL. How can this be done? I'm able to show a warning like below but I don't know how to add timeout to it, also this is a confirm box, not a popup where I can add some div and more stuff for user to see until the counter stops.
$(document).ready(function(){
var root = new RegExp(location.host);
$('a').each(function(){
if(root.test($(this).attr('href'))){
$(this).addClass('local');
}
else{
// a link that does not contain the current host
var url = $(this).attr('href');
if(url.length > 1)
{
$(this).addClass('external');
}
}
});
$('a.external').live('click', function(e){
e.preventDefault();
var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");
if (answer){
window.location = $(this).attr('href');
}
});
});
PS: Is there any free plugin for this?
I've put together a little demo to help you out. First thing to be aware of is your going to need to make use of the setTimeout function in JavaScript. Secondly, the confirmation boxes and alert windows will not give you the flexibility you need. So here's my HTML first I show a simple link and then created a popup div that will be hidden from the users view.
<a href='http://www.google.com'>Google</a>
<div id='popUp' style='display:none; border:1px solid black;'>
<span>You will be redirected in</span>
<span class='counter'>10</span>
<span>Seconds</span>
<button class='cancel'>Cancel</button>
</div>
Next I created an object that controls how the popup is displayed, and related events are handled within your popup. This mostly is done to keep my popup code in one place and all events centrally located within the object.
$('a').live('click', function(e){
e.preventDefault();
popUp.start(this);
});
$('.cancel').click(function()
{
popUp.cancel();
});
var popUp = (function()
{
var count = 10; //number of seconds to pause
var cancelled = false;
var start = function(caller)
{
$('#popUp').show();
timer(caller);
};
var timer = function(caller)
{
if(cancelled != true)
{
if(count == 0)
{
finished(caller);
}
else
{
count--;
$('.counter').html(count);
setTimeout(function()
{
timer(caller);
}, 1000);
}
}
};
var cancel = function()
{
cancelled = true;
$('#popUp').hide();
}
var finished = function(caller)
{
alert('Open window to ' + caller.href);
};
return {
start : start,
cancel: cancel
};
}());
If you run, you will see the popup is displayed and the countdown is properly counting down. There's still some tweaks of course that it needs, but you should be able to see the overall idea of whats being accomplished. Hope it helps!
JS Fiddle Sample: http://jsfiddle.net/u39cV/
You cannot using a confirm native dialog box as this kind of dialog, as alert(), is blocking all script execution. You have to use a cutomized dialog box non-blocking.
You can use for example: jquery UI dialog
Even this has modal option, this is not UI blocking.
Consdier using the javascript setTimeout function to execute an action after a given delay
if (answer){
setTimeOut(function(){
//action executed after the delay
window.location = $(this).attr('href');
}, 10000); //delay in ms
}
There is a feature in Chrome - you can right-click on a tab and select "Pin Tab", then tab is moved to the left corner and looks like an icon with text.
So there is the question: how can I highlight this tab? Maybe there is some API?
For example, gmail can highlight this tab when new mail message is come.
Thank you.
You can't blink the tab, just the tab title:
<script>
function blinkTitle() {
if(!window.oldtitle) window.oldtitle = document.title;
if(document.title == ' ') {
document.title = window.oldtitle;
} else {
document.title = ' ';
}
}
function startBlink() {
window.blinkinterval = setInterval(blinkTitle,200);
}
onload = function() {
document.onblur = function() {
setTimeout(startBlink,2000);
}
document.onfocus = function() {
clearInterval(window.blinkinterval);
document.title = window.oldtitle;
}
}
</script>
Here's an HTML page that changes the page's title after 10 seconds:
<html>
<head>
<script>
function blinkPinnedTab()
{
var title = document.title;
var newTitle = "New Message";
window.setTimeout(function()
{
document.title = newTitle;
window.setTimeout(function()
{
document.title = oldTitle;
}, 1000);
}, 1);
}
window.setTimeout(function() { blinkPinnedTab(); }, 10000);
</script>
<title>Yo, Yo!</title>
</head>
<body>
Hello!
</body>
</html>
To see the "highlight animation" do the following:
Load the page.
Pin the tab.
Switch to a different tab. (Because if the tab is the active tab, nothing will happen.)
Within 10 seconds of loading the page, the tab will be "highlighted".
You have to do steps 2-3 within 10 seconds to see the effect. If you didn't, then just reload the page and quickly switch to a different tab.
EDIT: I still think that charles.art.br's answer is just as good (actually, it's better). There's very little difference between the code samples we both gave. I honestly don't know why his answer wasn't accepted.