CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kaioker2
kaioker2

Reputation: 329

Slow down execution speed of <a href=" ">

On my website I have multiple href's and I need to add a delay between when they are clicked and when they load. As there are hundreds of hrefs I cant have a separate js function for each one.

The two ways I have researched were, passing the contents of the href to javascript as a variable, such as:

<a href="example1.php">example1</a>
<a href="example2.php">example2</a>
<a href="example3.php">example3</a>
<script>
var href = ### CONTENTS OF SELECTED HREF ###
$(function() {
  $("a").on("click", function(event) {
    event.preventDefault();
    setTimeout(function(){window.location.href = href;}, 1000);
  });        
});

Is it possible to do so using CSS?

Upvotes: 4

Views: 1497

Answers (1)

void
void

Reputation: 36703

No, that is not doable using CSS (Cascading Style Sheets, No way). You would need to use Javascript.

But yes, you do not need to write different functions for every a, just fetch the href inside the click callback and then redirect the user accordingly. 

$(function() {
  $("a").on("click", function(event) {
    event.preventDefault();
    var href = this.href;
    setTimeout(function(){
        window.location = href;
    }, 1000);
  });        
});

Upvotes: 6

Related Questions