How to blink web browser tab

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

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

To blink the web browser tab, first of all, we need to add a library to our HTML fi…

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

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

To blink the 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>

How to use it:

  1. Include the titleEffect.jquery.js file
    <script src="titleEffect.jquery.js"></script>

  2. 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:#1

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 http-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:#2

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;
}

Blink web browser tab Video Output:

Blink web browser tab codepen Output:

We will update soon:)

Download titleEffect library

Download


Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: