2

I am trying to create a little .25 second link delay along with a zooming property, to add an artistic flare to my site. In order to see the zoom, I need a small link delay. I have been trying code that I have found online but for some reason the delays just don't work.

Here is an example of one of the code snippets I have tried.

<li><a href="#" onclick="setTimeout(window.document.location='http://******.net/html/****.html',250);">CONTACT</a></li>

Any ideas as to why it isn't working? Keep in mind that I only want a few links on the page to have this delay so a block of JavaScript or jQuery that assigns all a href links with a delay is not ideal.

This is a Classic-ASP project using Vb-script.

Dijkgraaf
  • 11,049
  • 17
  • 42
  • 54
Fearium
  • 120
  • 10

4 Answers4

3

<a onclick="return createTimedLink(this, myFunction, 2000);" href="http://******.net/html/****.html">Link</a>

Then have this

function createTimedLink(element, callback, timeout){
  setTimeout( function(){callback(element);}, timeout);
  return false;
}

function myFunction(element) { 
/* Block of code, with no 'return false'. */
  window.location = element.href;
 }

Source: https://stackoverflow.com/a/6609164/5393628

Community
  • 1
  • 1
  • To complete this answer: The problem that you are facing is that when the user clicks on a link, the browser loads that page UNLESS you cancel that action. To do so, you have to return `false` from the onclick executed code. Another related link: http://stackoverflow.com/a/15622330/1919228 – Pablo Lozano Sep 30 '15 at 14:40
  • But his href is set to `#`, so, nothing to load. – lshettyl Sep 30 '15 at 14:42
  • @Ishettyl, then he needs to pass URL as argument to CreateTimedLink function. –  Sep 30 '15 at 14:43
  • I chose this as the best answer because It gives me a really robust block of code with great flexibility. Thank you John McKean! – Fearium Sep 30 '15 at 14:50
1

the setTimeout needs a function

<li><a href="#" onclick="setTimeout(function() { window.document.location='http://******.net/html/****.html'; },250);">CONTACT</a></li>
BenG
  • 14,826
  • 5
  • 45
  • 60
1

Isn't a 0.25 second delay too short to be noticed? However, this would work

<ul>
        <li><a href="#" onclick="goto('http://google.com')">CONTACT</a></li>
        <script>
            function goto(link) {
                setTimeout(function () {
                    document.location = link;
                }, 250);
            }
        </script>
    </ul>

For each link you want to place the delay on, you could use the onclick="goto(link)" attribute or use href="javascript:goto(link)"

Ikechi Michael
  • 489
  • 3
  • 6
1

setTimeout should recieve a function as a first parameter. So you have to change your onclick handler to setTimeout(function() { window.document.location='....'; }, 250);

Evgeniy
  • 108
  • 5