External link to open in new tab in the background, but keeps user on the same page

Design help Custom code
1

Hi Webflow Community,

I’m trying to maintain an external link, but have it open in a new tab in the background, without taking the user off the page they clicked on. Is this possible with native functionality, or will I need custom code? the CTA class is .resume cta which downloads a PDF, at the same time an animation happens which I don’t want the user to miss. Any help would be greatly appreciated,

Thanks,
Dom

2

Hey @domzucs
If you only want user to see the animation and it isn’t imperative that after seeing the animation you still be on the page, you can use code to make default anchor behavior be a little delayed.

<script>
  
  $('a.resume-cta').click(function (e) {
    e.preventDefault();                   // prevent default anchor behavior
    var goTo = this.getAttribute("href"); // store anchor href

    setTimeout(function(){
         window.location = goTo;
    },1000);       
}); 
  
</script>

The number 1000 means how long you want to make the delay.

These 1000 miliseconds mean thatt after pressing link, animation will play during that time ( it is adjustable to however long animation is) and after that it will do what that link originally does.

Let me know if this helps!

4

Hey @Incognito_Agency
The interaction is working nicely thank you for that. However now the external link is opening in the same tab, so it’s no longer an external link, any work around it?

Link to test site
(Click on Resumé menu item)

Many thanks,
Dom

5

Yeah, sorry I overlooked that, this update should do the trick:
window.open(goTo, “_blank”);

<script>
  
  $('a.resume-cta').click(function (e) {
    e.preventDefault();                   // prevent default anchor behavior
    var goTo = this.getAttribute("href"); // store anchor href

    setTimeout(function(){
       window.open(goTo, "_blank");
    },1000);       
}); 
  
</script>
6

You sir, are an absolute legend. Thank you for making this work for me.

All the best,
Dom

1 Like
7

Hey @Incognito_Agency

Just thought I’d note, Safari now blocks the download of the PDF. Apple’s released this more strict privacy policy, and it seems this custom script prevents the download from occurring without having to override the block from the user’s end, which could cause confusion.

Not sure if there is a work around for this, but it works fine on other browsers so I’m not too worried about it.

Again, really appreciate your help,
Dom