User Agent checker
HTML
<script src="http://fonts.googleapis.com/css?family=Denk+One"></script>
CSS
h1 {
font-family: 'Denk One', sans-serif;
font-size: 22px;
text-align: center;
}
p {
font-family: 'Denk One', sans-serif;
font-size: 22px;
text-align: center;
color: green;
}
p.animate {
}
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:200ms;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:200ms;}.animated.hinge{-webkit-animation-duration:400ms;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:400ms;}@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
} 50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
JavaScript
(function() {
window.currentUseragent = '';
window.setInterval(function() {
var userAgent = navigator.userAgent;
console.log('Running: ', userAgent);
if (!(window.currentUseragent === userAgent)) {
window.currentUseragent = userAgent;
var markup = "<h1>User agent</h1>";
markup += "<p class='animated bounceIn'>" + currentUseragent + "</p>";
alert(currentUseragent)
document.body.innerHTML = markup;
}
}, 50);
}());