Javascript Link Delay

Delaying link execution without using window.location

[iyia12co]

Here is my objective:

I have a link that when clicked, I want it to open a light-box telling the user that he/she will be redirected in a couple of seconds. Once the time passes, I wish the link to be executed (just as if it was clicked normally)

So far, I have tried several things, none of which worked the way one would expect.

It would be easy to use javascript redirects or popups involving "window.location...". However, I wish the link to be executed from a click and thus, I would expect there to be a way to use "return true" to execute a link some time after it is clicked ( i.e. until onClick returns true ).

For each of these trials, the result I wanted when the link is clicked was:
( lightbox opens ) -> ( 3 seconds pass ) -> ( lightbox closes and link executes at the same time )

Note: for the 3 seconds, I don't care if it is frozen or just a time delay. However, I would prefer if freezing would never occur.

---

Attempt 1

When the link is clicked, this code...

<script>
function pause(milliseconds) {
 // freezes window/execution for milliseconds given
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

function openLightbox() {
 // show lightbox
 document.getElementById('Box').style.display='block';
 document.getElementById('Lightbox').style.display='block';

 // wait 3 seconds
 pause(3000);

 // hide lightbox
 closeLightbox();

 // continue
 return true;
}

function closeLightbox() {
 // hide lightbox
 document.getElementById('Box').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}
</script>

<a href="test.html" target="_blank" onclick="if(openLightbox()) { return true; }">
 click here
</a>

...results in the following:
( 3 seconds frozen ) -> ( lightbox never shows & link executes )

---

Attempt 2

When the link is clicked, this code...

<script>
function pause(milliseconds) {
 // freezes window/execution for milliseconds given
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

function openLightbox() {
 // show lightbox
 document.getElementById('Box').style.display='block';
 document.getElementById('Lightbox').style.display='block';
}

function closeLightbox() {
 // hide lightbox
 document.getElementById('Box').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}
</script>

<a href="test.html" target="_blank" onclick="openLightbox(); pause(3000); closeLightbox(); return true;">
 click here
</a>

...results in the following:
( 3 seconds frozen ) -> ( lightbox never shows & link executes )

---

Attempt 3

When the link is clicked, this code...

<script>
function pause(milliseconds) {
 // freezes window/execution for milliseconds given
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
function delay(milliseconds) {
 // delays pause freeze to allow time for lightbox to show
 setTimeout('pause(3000)', milliseconds);
}
function openLightbox() {
 // show lightbox
 document.getElementById('Box').style.display='block';
 document.getElementById('Lightbox').style.display='block';
}

function closeLightbox() {
 // hide lightbox
 document.getElementById('Box').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}
</script>

<a href="test.html" target="_blank" onclick="openLightbox(); delay(2000); closeLightbox(); return true;">
 click here
</a>

...results in the following:
( link executes ) -> ( 2 seconds pass ) -> ( 3 seconds frozen )

---

Attempt 4

When the link is clicked, this code...

<script>
function pause(milliseconds) {
 // freezes window/execution for milliseconds given
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
function delay(milliseconds) {
 // delays pause freeze to allow time for lightbox to show
 setTimeout('pause(3000); closeLightbox();', milliseconds);
}
function openLightbox() {
 // show lightbox
 document.getElementById('Box').style.display='block';
 document.getElementById('Lightbox').style.display='block';
}

function closeLightbox() {
 // hide lightbox
 document.getElementById('Box').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}
</script>

<a href="test.html" target="_blank" onclick="openLightbox(); delay(2000); return true;">
 click here
</a>

...results in the following:
( lightbox opens and link executes at the same time ) -> ( 2 seconds pass ) -> ( 3 seconds frozen ) -> ( lightbox closes )

---

Attempt 5

When the link is clicked, this code...

<script>
function pause(milliseconds) {
 // freezes window/execution for milliseconds given
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
function delay(milliseconds) {
 // delays pause freeze to allow time for lightbox to show
 setTimeout('pause(3000); closeLightbox();', milliseconds);
 return true;
}
function openLightbox() {
 // show lightbox
 document.getElementById('Box').style.display='block';
 document.getElementById('Lightbox').style.display='block';
 return true;
}

function closeLightbox() {
 // hide lightbox
 document.getElementById('Box').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}
</script>

<a href="test.html" target="_blank" onclick="if(openLightbox() && delay(2000)) { return true; }">
 click here
</a>

...results in the following:
( lightbox opens and link executes at the same time ) -> ( 2 seconds pass ) -> ( 3 seconds frozen ) -> ( lightbox closes )

---

Attempt 6

When the link is clicked, this code...

<script>
function pause(milliseconds) {
 // freezes window/execution for milliseconds given
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
 return true;
}
function openLightbox() {
 // show lightbox
 document.getElementById('Box').style.display='block';
 document.getElementById('Lightbox').style.display='block';
 return true;
}

function closeLightbox() {
 // hide lightbox
 document.getElementById('Box').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}
</script>

<a href="test.html" target="_blank" onclick="if(openLightbox() && pause(3000)) { closeLightbox(); return true; }">
 click here
</a>

...results in the following:
( 3 seconds frozen ) -> ( lightbox never shows & link executes )

---

I would greatly appreciate any help. For a javascript savvy person, I would image something like this to be trivial.

[daveVk]

onclick is called as part of the browsers event handling, if you delay its completion all manner of functionality is likely to stop, such as displaying the LightBox. I think you need to return false, and use other method of going to url.

[Fotiman]

Welcome to WebmasterWorld!

It would be easy to use javascript redirects or popups involving "window.location...". However, I wish the link to be executed from a click and thus, I would expect there to be a way to use "return true" to execute a link some time after it is clicked ( i.e. until onClick returns true ).

I'm not sure why it would matter. The way I would handle it would be to have the event handler/listener stop the event from performing the default (return false on the event handler), get the href value of the clicked link, and then do a setTimeout to set the window.location. For example:

<script>
function openLightbox() {
  // show lightbox
  document.getElementById('Box').style.display='block';
  document.getElementById('Lightbox').style.display='block';
  var url = this.href;
  setTimeout(function () {
    closeLightbox(url);
  }, 3000);
  return false;
}
function closeLightbox(url) {
  // hide lightbox
  document.getElementById('Box').style.display='none';
  document.getElementById('Lightbox').style.display='none';
  window.location = url;
}
</script>
<a href="test.html" target="_blank" onclick="return openLightbox();">
click here
</a>

[Fotiman]

I just noticed that you have target="_blank". In that case, instead of doing window.location = url; perhaps you would rather be doing:

window.open(url);

[iyia12co]

First, thank you all for your reply. I'm really quite amazed at the speed in which I was attended.

Yes, the issue is that I don't want to use "window.open(url);" or the like so that pop-up blockers wont hinder functionality.

If there is no work-around, what I might have to do is instead of redirecting automatically after the click, I will have to have another link on the lightbox asking for confirmation to leave the website that when clicked, closes the lightbox and ones a new link on a _blank page.

[Fotiman]

I believe most Pop Up Blockers allow window.open when it is initiated from a user action such as clicking on a link.

[iyia12co]

I believe most Pop Up Blockers allow window.open when it is initiated from a user action such as clicking on a link.

Even if it's delayed and passed to various functions?

[Fotiman]

Good question. When it runs via setTimeout, I don't believe that can be associated with the user action of clicking on a link (though I can't say for certain).

[iyia12co]

I had assumed that pop-ups, user initiated or not, were always blocked. Either way, it is definitely a bad practice. I will still try it out, test it on several browsers, and post the results back here.

In the meanwhile, if anyone has any work-around, please share.

[daveVk]

Simulating a click on an appropriate link may be a work-around. In IE that is linkElement.click(), for all browsers solutions like JQuery .click() are available.

[iyia12co]

Results:

( window.location = url ) > worked fine as I knew it would from the start, but I need the link to open a new window.

( window.open(url) ) > blocked

( linkElement.click() & JQuery .click() ) > totally blocked; browsers don't even give warning that it was blocked

Conclusion: I will have to have the user click the link > lightbox opens > user clicks link again > new window opens and lightbox closes

Thanks everyone. If you have any other ideas, I would like to try them.

[daveVk]

<body onload="document.getElementById('test').click()" >
<a href="http://google.com" id='test' target='_blank' >test</a>
</body>

This little test worked for me in IE