├── .gitignore
├── README.md
├── css
    └── style.css
├── img
    ├── favicon-dot-animated.gif
    ├── favicon-dot.gif
    └── favicon.gif
├── index.html
├── index2.html
└── index3.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *.codekit
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### Tuts+ Tutorial: How to Display Update Notifications in the Browser Tab
 2 | #### Instructor: Thoriq Firdaus
 3 | 
 4 | In this tutorial, we are going to build a form of user feedback, making use of the browser tab as a medium for notifying users of updates. Let’s see how it’s done.
 5 | 
 6 | Source files for the Tuts+ tutorial: [How to Display Update Notifications in the Browser Tab](http://webdesign.tutsplus.com/tutorials/how-use-the-browser-tab-to-display-update-notifications--cms-23458)
 7 | 
 8 | **Available on Tuts+ March 2015**
 9 | 
10 | [View the demo](http://tutsplus.github.io/tab-notification)
11 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | *, *:before, *:after {
 5 |   box-sizing: inherit;
 6 | }
 7 | body {
 8 | 	background-color: #34495E;
 9 | }
10 | 
11 | .container {
12 | 	width: 600px;
13 | 	margin-right: auto;
14 | 	margin-left: auto;
15 | 	text-align: center;
16 | 	margin-top: 200px;
17 | }
18 | .demo-description {
19 | 	color: #dae1e7;
20 | 	font-family: 'Merriweather', serif;
21 | 	font-weight: 300;
22 | 	font-size: 1.6em;
23 | 	margin-bottom: 30px;
24 | }
25 | .demo-description p {
26 | 	margin-bottom: 0;
27 | }
28 | .demo-description small {
29 | 	font-size: 60%;
30 | 	color: #9dafbf;
31 | }
32 | 
33 | .nav-list {
34 | 	padding: 0;
35 | 	margin: 0;
36 | 	list-style-type: none;
37 | }
38 | .nav-item {
39 | 	display: inline-block;
40 | 	padding: 0 10px;
41 | }
42 | .nav-item a {
43 | 	color: #587590;
44 | 	font-family: 'Nunito', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
45 | 	text-decoration: none;
46 | 	text-transform: uppercase;
47 | 	font-size: 0.8em;
48 | 	-webkit-transition: all 0.3s ease-out;
49 |   -moz-transition: all 0.3s ease-out;
50 |   -o-transition: all 0.3s ease-out;
51 |   transition: all 0.3s ease-out;
52 | }
53 | 
54 | .nav-item a:hover {
55 | 	color: #fff;
56 | }
57 | 
58 | .btn-group {
59 | 	text-align: center;
60 | 	margin-right: auto;
61 | 	margin-left: auto;
62 | 	margin-top: 10px;
63 | }
64 | 
65 | .btn {
66 | 	background-color: #dd2c00;
67 | 	border: none;
68 | 	padding: 15px 50px;
69 | 	font-weight: 600;
70 | 	text-transform: uppercase;
71 | 	cursor: pointer;
72 | 	font-size: 14px;
73 | 	color: #fff0e2;
74 | 	font-family: Nunito, 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
75 | 	border-radius: 50px;
76 | 	font-weight: 400;
77 | 	border: 1px solid transparent;
78 | 	-webkit-transition: all 0.3s ease-out;
79 |   -moz-transition: all 0.3s ease-out;
80 |   -o-transition: all 0.3s ease-out;
81 |   transition: all 0.3s ease-out;
82 | }
83 | .btn:hover,
84 | .btn:active {
85 | 	outline: 0;
86 | 	background-color: #ba2b00;
87 | }
88 | 
89 | .icon {
90 | 	margin-right: 8px;
91 | }


--------------------------------------------------------------------------------
/img/favicon-dot-animated.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/tab-notification/ef20872c50b36a914a8f5b3e4544d71183491bd5/img/favicon-dot-animated.gif


--------------------------------------------------------------------------------
/img/favicon-dot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/tab-notification/ef20872c50b36a914a8f5b3e4544d71183491bd5/img/favicon-dot.gif


--------------------------------------------------------------------------------
/img/favicon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/tab-notification/ef20872c50b36a914a8f5b3e4544d71183491bd5/img/favicon.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 	
 7 | 	<title>Acme</title>
 8 | 	
 9 | 	<!-- custom-fonts -->
10 | 	<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300|Nunito' rel='stylesheet' type='text/css'>
11 | 	<!-- ./custom-fonts -->
12 | 
13 | 	<link rel="shortcut icon" href="img/favicon.gif?v3"/>
14 | 	<link rel="stylesheet" href="css/style.css">
15 | 
16 | </head>
17 | 
18 | <body id="site-body">
19 | 
20 | <nav class="demo-nav">
21 | 	<ul class="nav-list">
22 | 		<li class="nav-item"><a href="index.html">Demo 1</a></li>
23 | 		<li class="nav-item"><a href="index2.html">Demo 2</a></li>
24 | 		<li class="nav-item"><a href="index3.html">Demo 3</a></li>
25 | 	</ul>
26 | </nav>
27 | 
28 | <div class="container">
29 | 
30 | 	<div class="demo-description">
31 | 		<p>Inserts the number of update in the title.</p>
32 | 		<small>The number will increase in every 1 second.</small>
33 | 	</div>
34 | 
35 | 	<div class="btn-group">
36 | 		<button class="btn" id="stop">Stop</button>
37 | 	</div>
38 | 
39 | </div>
40 | 
41 | <script>
42 | 
43 | 	var count = 0;
44 | 	var title = document.title;
45 | 
46 | 	function changeTitle() {
47 | 		count++;
48 | 		var newTitle = '(' + count + ') ' + title;
49 | 		document.title = newTitle;
50 | 	}
51 | 
52 | 	function newUpdate() {
53 | 		update = setInterval(changeTitle, 1000);
54 | 	}
55 | 
56 | 	var docBody  = document.getElementById('site-body');
57 | 	docBody.onload = newUpdate;
58 | 
59 | 	// Stop button
60 | 	function stop() {
61 |   	clearInterval(update);
62 | 	}
63 | 	var btnStop  = document.getElementById('stop');
64 | 	btnStop.onclick  = stop;
65 | 
66 | </script>
67 | 
68 | <a href="https://github.com/tfirdaus/favicon-notification"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
69 | 
70 | </body>
71 | </html>


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 	
 7 | 	<title>Acme</title>
 8 | 	
 9 | 	<!-- custom-fonts -->
10 | 	<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300|Nunito' rel='stylesheet' type='text/css'>
11 | 	<!-- ./custom-fonts -->
12 | 
13 | 	<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>
14 | 	<link rel="stylesheet" href="css/style.css">
15 | 
16 | </head>
17 | 
18 | <body id="site-body">
19 | 
20 | <nav class="demo-nav">
21 | 	<ul class="nav-list">
22 | 		<li class="nav-item"><a href="index.html">Demo 1</a></li>
23 | 		<li class="nav-item"><a href="index2.html">Demo 2</a></li>
24 | 		<li class="nav-item"><a href="index3.html">Demo 3</a></li>
25 | 	</ul>
26 | </nav>
27 | 
28 | <div class="container">
29 | 
30 | 	<div class="demo-description">
31 | 		<p>Display the alternate favicon variant.</p>
32 | 		<small>The favicon will change within 3 second.</small>
33 | 	</div>
34 | 
35 | 	<div class="btn-group">
36 | 		<button class="btn" id="reset">Reset</button>
37 | 	</div>
38 | </div>
39 | 
40 | <script>
41 | 	var icon        = 'img/favicon.gif?v3';
42 | 	var iconNew     = 'img/favicon-dot.gif?v5';
43 | 	// var iconAnimate = 'img/favicon-dot-animated.gif?v4'; // does not work in Chrome
44 | 
45 | 	function changeFavicon() {
46 | 		document.getElementById('favicon').href = iconNew;
47 | 		// document.getElementById('favicon').href = iconAnimate; // does not work in Chrome
48 | 	}
49 | 
50 | 	function newUpdate() {
51 | 		update = setInterval(changeFavicon, 3000);
52 | 		setTimeout(function( ) { clearInterval( update ); }, 3100);
53 | 	}
54 | 
55 | 	var docBody  = document.getElementById('site-body');
56 | 	docBody.onload = newUpdate;
57 | 
58 | 	// 
59 | 	function reset() {
60 | 		document.getElementById('favicon').href = icon;
61 | 	}
62 | 
63 | 	var btnReset = document.getElementById('reset');
64 | 
65 | 	btnReset.onclick = reset;
66 | </script>
67 | 
68 | <a href="https://github.com/tfirdaus/favicon-notification"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
69 | 
70 | </body>
71 | </html>


--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 	
 7 | 	<title>Acme</title>
 8 | 	
 9 | 	<!-- custom-fonts -->
10 | 	<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300|Nunito' rel='stylesheet' type='text/css'>
11 | 	<!-- ./custom-fonts -->
12 | 
13 | 	<link rel="shortcut icon" href="img/favicon.gif?v3"/>
14 | 	<link rel="stylesheet" href="css/style.css">
15 | 	
16 | 	<!-- favico.js -->
17 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/favico.js/0.3.4/favico.js"></script>
18 | 	<!-- ./favico.js -->
19 | </head>
20 | 
21 | <body id="site-body">
22 | 
23 | <nav class="demo-nav">
24 | 	<ul class="nav-list">
25 | 		<li class="nav-item"><a href="index.html">Demo 1</a></li>
26 | 		<li class="nav-item"><a href="index2.html">Demo 2</a></li>
27 | 		<li class="nav-item"><a href="index3.html">Demo 3</a></li>
28 | 	</ul>
29 | </nav>
30 | 
31 | <div class="container">
32 | 	
33 | 	<div class="demo-description">
34 | 		<p>Using Favico.js</p>
35 | 		<small>Click the following Stop button to stop the number incrementing.</small>
36 | 	</div>
37 | 
38 | 	<div class="btn-group">
39 | 		<button class="btn" id="stop">Stop</button>
40 | 	</div>
41 | 
42 | </div>
43 | 
44 | <script>
45 | var favicon = new Favico({
46 | 		position  :'up',
47 | 		animation :'popFade',
48 | 		bgColor   :'#dd2c00',
49 | 		textColor :'#fff0e2'
50 | });
51 | 
52 | var num = 0;
53 | function generateNum() {
54 | 	num++;
55 | 	return num;
56 | }
57 | 
58 | function showFaviconBadge() {
59 | 	var num = generateNum();
60 | 	favicon.badge(num);	
61 | }
62 | 
63 | function newUpdate() {
64 | 	update = setInterval(showFaviconBadge, 2000);
65 | }
66 | 
67 | var docBody  = document.getElementById('site-body');
68 | docBody.onload = newUpdate;
69 | 
70 | 
71 | // Stop button
72 | function stop() {
73 | 	clearInterval(update);
74 | }
75 | var btnStop  = document.getElementById('stop');
76 | btnStop.onclick  = stop;
77 | </script>
78 | 
79 | <a href="https://github.com/tfirdaus/favicon-notification"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
80 | 
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------