J. Doe J. Doe - 6 months ago 18
Javascript Question

Show .load-overlay if href has valid URL

I want to show the user a loading screen when the click a link. So when they click a

a href
width valid URL, the
.load-overlay
will show.

$('a,input[type=submit]').click(function(){
var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0;
if(bad) {
return false;
} else {
if ($("a").hasClass("noload")) {
return false;
} else {
$(".load-overlay").show();
});
return true;
}
return false;
});


But some URLs on my site have a
target="_blank"
attribute to the
a href
, so that opens a new window. However on the website it will show the loading overlay and that's a bad thing because the page doesn't load.

As you can see in the code I added a few more lines:

$('a,input[type=submit]').click(function(){
var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0;
if(bad) {
return false;
} else {
if ($("a").hasClass("noload")) {// if the a href has the class .noload, do not display the loading overlay
return false;
} else {
$(".load-overlay").show();
});
return true;
}
return false;
});


but that doesn't work. Anyone got an idea to fix this?

Answer

replace this code with your code to solve the problem:

$('a,input[type=submit]').not('[target=_blank], .noload').click(function(){
  var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0;
  if(!bad) {
    $(".load-overlay").show();
    return true;
  }
  return false;
});