html
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
<!--
July/27/17 Code Published.
-->
<!DOCTYPE html>
<html>
<head>
<title>Browser Vibration Support</title>
<meta name="author" content="Paola Mabu"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Acme' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<th colspan="2">Vibration Support</th>
</tr>
<tr>
<td>
<div class="cardBox">
<div class="card">
<div class="front purple">Device Type</div>
<div id="test-1" class="back purple"></div>
</div>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
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
html {
margin: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
margin: 0;
padding: 0;
text-align: center;
color: white;
overflow: hidden;
background-color: #404040;
font-family: 'Acme';
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
position: absolute;
top: 0;
left: 0;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
// Checks if browser supports vibration
var canVibrate = "vibrate" in navigator || "mozVibrate" in navigator || "webkitVibrate" in navigator;
if (canVibrate && !("vibrate" in navigator)) {
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
}
// Checks if device is a PC or Mobile
var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent);
// Browser/device support
$("#test-1").text(isMobile ? "You're on mobile" : "You're on a PC");
$("#test-1a").html(canVibrate ? "Great! This browser<br/>supports vibration" : "Sorry, this browser<br/>doesn't support vibration");
// Vibration on different timespan
$(".buttons").on("click", function() {
navigator.vibrate(parseInt(this.innerHTML, 10));
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run