Vibrating Buttons

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.

Well this vibration occurs due to very little Javascript code. I am linking a Sample file with this , in this file I have used HTML5, CSS3, and very few lines of Javascript also. To make any button vibrate we have to use Vibrate API, Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in any particular pattern or button for a given duration.

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.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s