Hello folks I am back with another set of some more helpful information. Today I will share something about Vibrating Butttons. I am sure you all must be using Smartphones in your daily life. Once you tap over any button on the webpage, It gives a little vibrate. Now today I will share some code using which you guys can also add this to your mobile website. How to make this vibration happen when the user click any particular button.
It’s always good to check for the presence of API support before using it; here’s how you can detect the Vibration API’s presence:
alert("navigator.vibrate? " + (navigator.vibrate ? "Yes" : "No")); alert("navigator.webkitVibrate? " + (navigator.webkitVibrate ? "Yes" : "No")); alert("navigator.oVibrate? " + (navigator.oVibrate ? "Yes" : "No"));
The Vibration API consists of only one method provided to the window.navigator object: vibrate. We can make different type of vibration for each tap on the screen or each click:
- Vibrate Once
- Vibrate Multiple Times
- Vibrate Persistently
In some cases we have to make a double-tap or double-click to stop the vibration. The sample code I attaching with this post will run perfectly in all the latest Firefox browsers. In this code I have created four buttons. Each button will perform differnt function on click. Some part of code is added below:
/*This is Incomplete Code*/ <button class="sexyButton" onclick="startVibrate(1000);">Vibrate Once</button> <button class="sexyButton" onclick="startVibrate([1000, 200, 1000, 2000, 400]);">Vibrate Multiple Times</button> <button class="sexyButton" onclick="startPeristentVibrate(1000, 1500);">Vibrate Peristently</button> <button class="sexyButton" onclick="stopVibrate();">Stop Vibrating!</button>
Note: You can make changes to the styling of buttons depending on your requirements.