📜 ⬆️ ⬇️

Vibration Management with jquery.vibrate.js Library


Today I would like to write about the jQuery library Vibrate.js. This library allows you to customize the vibration on mobile devices, you can select different modes with different duration of vibration.
Vibration in a mobile device allows you to warn the user about the message or call, to show the feedback in games.
To connect the library, you need to use the jquery.vibrate.min.js file, along with jQuery.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="build/jquery/jquery.vibrate.min.js"></script> 

The examples below show the vibration when you click on an element with id = ”example”.
 $("#example").vibrate(); //  50  . $("#example").vibrate("short"); //  20  . $("#example").vibrate("long"); //  100  . 

The following example causes vibration when you click on an element, in time up to 3000 milliseconds.
 $("#example").vibrate({ duration: 3000, trigger: "touchstart" }); 

Vibration when you click on an item lasting 50 milliseconds.
 var item = $("#example"); item.vibrate("medium"); item.vibrate("default"); item.vibrate(50); $("#example-five .button").vibrate({ duration: 2000, trigger: "touchstart" }); 

You can “set the beat” and play the vibro element of your smartphone, for example, the imperial march.
The first parameter sets the duration of the vibration, the second sets the pause, and so on.
 navigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]); 

Vibration with a long button taken from the parameter.
 $(“button").each(function() { $(this).vibrate(parseInt($(this).text(), 10)); }); 

The code below allows you to determine the mobility of the device and start the vibration while touching the screen.
 var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent); //   . $(".button").on(isMobile ? 'touchstart' : 'mousedown', function(e) { //  . navigator.vibrate(Infinity); //  . }); $(".button").on(isMobile ? 'touchend' : 'mouseup', function(e) { navigator.vibrate(0); //  . }); 

Of course, it should be noted about the shortcomings of this library. It does not work with browsers: iOS Safari, Opera Mini, IE, BlackBerry.
Here you can download the library and try it in action.

')

Source: https://habr.com/ru/post/304472/


All Articles