This content originally appeared on DEV Community and was authored by Stackfindover
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:
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:#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
This content originally appeared on DEV Community and was authored by Stackfindover
Stackfindover | Sciencx (2021-04-11T16:14:14+00:00) How to blink web browser tab. Retrieved from https://www.scien.cx/2021/04/11/how-to-blink-web-browser-tab/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.