"n0t1f1c4t10n-02"
Bootstrap 3.3.0 Snippet by okebro

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Notification - A JavaScript library for a well designed Notification system - by Let Aurn</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="settings row text-center">
<div class="col-md-12">
<div class="positions">
<div class="position bottom right text-center" data-position="3">Konsultasi Gratis</div>
</div>
<select id="inAnimation" class="dropdown">
<optgroup label="Attention Seekers">
<option value="rubberBand">rubberBand</option>
</optgroup>
</select>
<select id="outAnimation" class="dropdown">
<optgroup label="Specials">
<option value="hinge">hinge</option>
</optgroup>
</select>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Position
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.positions {
width: 350px;
height: 180px;
position: relative;
margin: 20px 0 20px;
}
.position {
font-family: 'Roboto', sans-serif;
width: 160px;
height: 20px;
background: #A3E7D6;
border-radius: 3px;
position: absolute;
cursor: pointer;
margin: 0;
color: #77CFB9;
}
.position.selected {
background: white;
box-shadow: 0 2px 6px 0 #66C8B0;
color: #333333;
}
.position:hover {
box-shadow: 0 2px 6px 0 #66C8B0;
}
.position.bottom {
top: 0;
left: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/*global $, Notification*/
(function () {
'use strict';
var position = 1;
$(document).on('click', '.notify', function () {
Notification({
text: "Chat saja disini untuk mendapatkan konsultasi gratis",
image: "http://rumart.weebly.com/files/theme/arrow08.png",
inAnimation: $('#inAnimation').val(),
outAnimation: $('#outAnimation').val(),
position: position
});
});
$(function () {
$('.position').click(function (event) {
var el = $(event.target);
$('.position').removeClass('selected notify');
el.addClass('selected notify');
position = el.attr('data-position');
});
});
}());
/**
* Created by Let Aurn IV on 22/09/2015.
*/
/*global $*/
Notification = window.Notification || {};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vuetify Material Dashboard

Questions / Comments: