-
Notifications
You must be signed in to change notification settings - Fork 4
/
growl-effects-genie.html
95 lines (79 loc) · 3.62 KB
/
growl-effects-genie.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Notification Styles | Growl-Style</title>
<link rel="stylesheet" type="text/css" href="css/normalization.css" />
<link rel="stylesheet" type="text/css" href="css/default_notification.css" />
<script src="js/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/growl-notification-style.css" />
<link rel="stylesheet" type="text/css" href="css/demonstration.css" />
</head>
<body>
<!-- Beginning of main-main-container -->
<div class="main-container">
<!-- Top Navigation -->
<header class="notifications-header">
<h1>Notification Styles
<span>Simple, easy and effective ideas & animation effects for website notifications</span>
</h1>
</header>
<div class="main clear-fix">
<div class="column">
<p class="small">Click on the button to show the notification:</p>
<button id="notification-trigger" class="progress-button">
<span class="content">Show Notification</span>
<span class="progress"></span>
</button>
</div>
<div class="column">
<nav class="notifications-demos">
<h3>Growl-like: </h3>
<div>
<a href="growl-effects-scale.html">Scale</a>
<a href="growl-effects-jelly.html">Jelly</a>
<a href="growl-effects-slide-in.html">Slide in</a>
<a class="current-demo" href="growl-effects-genie.html">Genie</a>
</div>
</nav>
</div>
</div>
</div>
<!-- End of main-container -->
<!-- Adding the scripts -->
<script src="js/classEditor.js"></script>
<script src="js/notificationFunction.js"></script>
<script>
(function() {
let notificationButton = document.getElementById('notification-trigger');
// make sure the button is disabled
notificationButton.disabled = false;
notificationButton.addEventListener('click', function() {
// simulate loading (for demo purposes only)
classEditor.add(notificationButton, 'active');
setTimeout(function() {
classEditor.remove(notificationButton, 'active');
// create the notification
let notification = new NotificationFunction({
// Added an apostrophe (') escape character in the notification's Message to avoid errors
notificationMessage: '<p>Hello there!!! I\'m a classic notification pop-up, but I have some Jelly elasticity thanks to <a href="http://bouncejs.com/">bounce.js</a>. </p>',
notificationLayout: 'growl',
notificationEffect: 'genie',
notificationType: 'notice', // notice, warning, error or success
totalTimeToLeave: 6000,
onClose: function() {
notificationButton.disabled = false;
}
});
// show the notification
notification.show();
}, 1200);
// disable the button (for demo purposes only)
this.disabled = true;
});
})();
</script>
</body>
</html>