How to blink web browser tab - Browser tab notification

Hello, guys In this tutorial we will learn How to blink web browser tab using JavaScript.

Step:#1

First of all, we have to understand what JavaScript is and how it works.

To blink web browser tab, first of all we need to add a library to our html file which is given below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step:#2

After that we have to download another library from the link given below

Click to download

After clicking on the link above, we will reach the page shown below, we will download this library from the download button here.

On downloading that file, we have to extract that file, and in that extracted folder we will find a file with the name “titleEffect.jquery.js” and add that file to our folder. Is where you are doing your code.

titleEffect is a jQuery plugin to create impressive document titles that make it simple to animate the title text in the browser tab.

How to use it:

Include the titleEffect.jquery.js file

<script src="titleEffect.jquery.js"></script>

Initialize the plugin Fade through the document titles by using the ‘blink’ mode.

$(function(){
  $.titleEffect({
    effect: 'blink',
    titles: [
      'jQuery',
      'Script',
      'Net'
    ]
  });
});

Blink web browser tab Step by step

First, we need to create two files index.html and style.css then we need to do code for it.

Step 1st for doing HTML Code:

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to blink browser tab</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="titleEffect.jquery.js"></script>
  </head>
  <body>
    <h1>How to blink browser tab</h1>

    <script>
      $(function(){
        $.titleEffect({
          effect: 'blink',
          titles: [
            'New Notification'
          ]
        });
      });
    </script>
  </body>
</html>

Step 2st for doing CSS Code:

Then we need to add code for style.css which code I provide in the below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Video output: Watch Now

If you want source code you can download it from the below button

Download Code

We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.