DEV Community

loading...
Cover image for How to blink web browser tab

How to blink web browser tab

stackfindover profile image Stackfindover Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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'
    ]
  });
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Blink web browser tab Video Output:

Download titleEffect library

Download

Discussion (2)

pic
Editor guide
Collapse
machineno15 profile image
Tanvir Shaikh

That's very helpfull
i wanted to implement on my own but now i found this, it'll save a lot of time.
thank you so much .. 💕

Collapse
stackfindover profile image
Stackfindover Author

You're most welcome :)