Added stopAfterTime & Wrap only once

README.md

@@ -0,0 +1,76 @@
+# About
+jQuery Vibrate Plugin is a jQuery component, self-contained, that allows you to have "vibrating" tags in your page, like buttons, DIVs, etc.
+It is very simple to use and integrate, and lightweight (only 3.54 kB in minified version)!
+
+It was developed by [albertoarena](https://github.com/albertoarena). You can see his version [here](https://github.com/albertoarena/jquery-vibrate). The link below to a demo is his site.
+
+I modified it to add the Vibrate for a fixed Period and a callback function when the vibration gets over.
+
+# Demo
+
+## For Vibration based on events and triggers
+
+Check out [albertoarena](https://github.com/albertoarena)'s website: http://www.dev4web.eu/projects/jquery.vibrate/
+
+## Fixed Period of Vibrate
+
+Go [here](http://termvader.github.io/jquery-vibrate/).
+
+# Documentation
+The Vibrate plugin has some configurable options. Below is an example of available options and their defaults:
+
+## Vibration based on events and triggers
+### Code
+
+```
+$('.vibrate').vibrate({
+   speed: 50,             // Vibration speed in milliseconds
+   trigger: "mouseover",  // Triggering event
+   reverse: false,        // Reverse behaviour
+   overEffect: "stop",    // Over effect, see details below
+   vibrateClass: "",      // CSS class applied when vibrating (New in vers. 1.1!)
+   overClass: "",         // CSS class applied when over effect is triggered (New in vers. 1.1!)
+   callBack: function(){} // Function to call when vibration stops
+});
+```
+
+### Options
+`speed`: Default value is 50 milliseconds, but can be changed
+
+`trigger`: It is the triggering event. Default value is "mouseover", another acceptable value is "focus"; other events are not managed
+
+`reverse`: Default value is false; if true, the behaviour will be reversed. E.g., if triggering event is "mouseover", the tag will always vibrate but stop when mouse is over.
+
+`overEffect`: This is used only when "reverse" parameter is true. The appliable values are "" (empty string), "stop" or "invert". Default value is "stop":
+
+- `overEffect:"stop"` (Default value): When mouse is over the vibration will be stopped and it will start again when mouse is out;
+- `overEffect:""` (Empty string): When mouse is over the vibration will continue without stopping;
+
+`vibrateClass`: Name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "")
+
+`overClass`: Name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "")
+
+`callBack`: This function is called whenever vibration stops.
+
+## Fixed Period of Vibrate
+### Code
+
+```
+$('.vibrate').vibrate({
+   speed: 50,             // Vibration speed in milliseconds
+   stopAfterTime: 5       // Stop Vibrating after a fixed time in seconds
+   vibrateClass: "",      // CSS class applied when vibrating (New in vers. 1.1!)
+   callBack: function(){} // Function to call when vibration stops
+});
+```
+
+### Options
+`speed`: default value is 50 milliseconds, but can be changed
+
+`stopAfterTime`: Stop Vibrating after a fixed time in seconds. No default value. If not provided will follow the vibration based on events and triggers. Providing this it will ignore values of `trigger`, `reverse`, `overEffect`, `overClass`
+
+`vibrateClass`: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "")
+
+`callBack`: This function is called whenever vibration stops.
+
+Please note that the element will not vibrate when it already is.

jquery.vibrate.js

@@ -2,21 +2,26 @@
  * jquery.vibrate.js
  * jQuery Vibrating Button Plugin
  *
- * Author:  Alberto Arena <[email protected]>
- * Version: 1.2
- * Date:    16/03/2013
- * Demo:    http://www.dev4web.eu/projects/jquery.vibrate
- * Support: https://github.com/albertoarena/jQuery-Vibrate
+ * Author:	Alberto Arena <[email protected]>
+ * Modified:	Aziz Khambati <[email protected]>
+ * Version:	1.2.1
+ * Date:	16/03/2013
+ * Demo:	http://www.dev4web.eu/projects/jquery.vibrate
+ * Support:	https://github.com/albertoarena/jQuery-Vibrate
  * 
  * Changelog
- * 1.2    16 mar 2013: optimized code and improved speed
- * 1.1    29 oct 2011: added vibrateClass and overClass parameters
- * 1.0.1  17 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter
- * 1.0    14 dec 2010: released first version
+ * 1.2.1	29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once, added callback when vibrations stops
+ * 1.2		16 mar 2013: optimized code and improved speed
+ * 1.1		29 oct 2011: added vibrateClass and overClass parameters
+ * 1.0.117	dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter
+ * 1.0		14 dec 2010: released first version
  */
 (function($) {
 	$.fn.vibrate = function(options){
-
+		if(true == $(this).data("vibrate.status")) {
+			return;
+		}
+
 		$(this).each(function(){
 			var $this = $(this);
 			if ( $.type($this.attr('id')) == "undefined" ) {
@@ -30,120 +35,131 @@
 				speed: 50,
 				trigger: "mouseover",
 				overEffect: "stop",
-            overClass: "",
-            vibrateClass: ""
+				overClass: "",
+				vibrateClass: ""
 			}; 
 			$this.defaults = $.extend($this.defaults, options);
 			$this.defaults.speedBackup = $this.defaults.speed;
-			$this.data('vibrate',$this);
-			$this.data('vibrate.status',false);
-
-			// Cached variables
-			var outerWidth = $this.outerWidth();
-			var outerHeight = $this.outerHeight();
 
 			// Applies wrap
-			var css1 = {
-				'float': $this.css("float"),
-				'margin': $this.css("margin-top")+' '+$this.css("margin-right")+' '+$this.css("margin-bottom")+' '+$this.css("margin-left"),
-				'display': $this.css("display"),
-				'width': outerWidth,
-				'height': outerHeight,
-				'padding': '0',
-				'border': '0'
-			}
-			var css2 = {
-				'width': outerWidth,
-				'height': outerHeight,
-				'padding': '0',
-				'margin': '0',
-				'border': '0',
-				'display': 'block'
+			if('true' != $this.data('vibrate-initiated')) {
+				var css1 = {
+					'float': $this.css("float"),
+					'margin': $this.css("margin-top")+' '+$this.css("margin-right")+' '+$this.css("margin-bottom")+' '+$this.css("margin-left"),
+					'display': $this.css("display"),
+					'width': $this.outerWidth(),
+					'height': $this.outerHeight(),
+					'padding': '0',
+					'border': '0'
+				}
+				var css2 = {
+					'width': $this.outerWidth(),
+					'height': $this.outerHeight(),
+					'padding': '0',
+					'margin': '0',
+					'border': '0',
+					'display': 'block'
+				}
+				$this.wrap('<div><div></div></div>');
+				$this.parent().css( css2 );
+				$this.parent().parent().css( css1 );
+				$this.css({ "margin": "0" });
+				$this.data('vibrate-initiated', 'true');
 			}
-			$this.wrap('<div><div></div></div>');
-			$this.parent().css( css2 );
-			$this.parent().parent().css( css1 );
-			$this.css({ "margin": "0" });
+
+			$this.data('vibrate',$this);
+			$this.data('vibrate.status',false);
 
 			// Normalizes trigger
-			var triggerStop = "";
-			if ( $this.defaults.trigger == "mouseover" )
-				triggerStop = "mouseout";
-			else if ( $this.defaults.trigger == "focus" )
-				triggerStop = "blur";
+			if($this.defaults.stopAfterTime) {
+				setTimeout( function() {
+					$this.vibrationStart();
+					setTimeout( function() {
+						$this.vibrationStop();
+					}, $this.defaults.stopAfterTime*500);
+				}, Math.round(Math.random*50));
+			}
+			else {
+				var triggerStop = "";
+				if ( $this.defaults.trigger == "mouseover" )
+					triggerStop = "mouseout";
+				else if ( $this.defaults.trigger == "focus" )
+					triggerStop = "blur";
+
+				// Normalizes over effect
+				if ( $this.defaults.overEffect != "stop" && $this.defaults.overEffect != "invert" )
+					$this.defaults.overEffect = "";
 
-			// Normalizes over effect
-			if ( $this.defaults.overEffect != "stop" && $this.defaults.overEffect != "invert" )
-				$this.defaults.overEffect = "";
-
-			if ( $this.defaults.reverse ) {
-				if ( $this.defaults.overEffect != "" ) {
+				if ( $this.defaults.reverse ) {
+					if ( $this.defaults.overEffect != "" ) {
+						$this.bind($this.defaults.trigger,function(){
+							$this.addClass($this.defaults.overClass);
+							if ( $this.defaults.overEffect == "stop" )
+								$this.vibrationStop();
+							else if ( $this.defaults.overEffect == "invert" ) {
+								$this.defaults.speed = Math.round( $this.defaults.speed / 3 );
+							}
+						}).bind(triggerStop,function(){
+							$this.removeClass($this.defaults.overClass);
+							if ( $this.defaults.overEffect == "invert" ) {
+								$this.defaults.speed = $this.defaults.speedBackup;
+							} else {
+								$this.vibrationStart();
+							}
+						});
+					}
+					setTimeout(function(){$this.vibrationStart();},Math.round(Math.random*1000));
+				} else {
 					$this.bind($this.defaults.trigger,function(){
-                  $this.addClass($this.defaults.overClass);
-						if ( $this.defaults.overEffect == "stop" )
-							$this.vibrationStop();
-						else if ( $this.defaults.overEffect == "invert" ) {
-							$this.defaults.speed = Math.round( $this.defaults.speed / 3 );
-						}
+						$this.vibrationStart();
 					}).bind(triggerStop,function(){
-                  $this.removeClass($this.defaults.overClass);
-						if ( $this.defaults.overEffect == "invert" ) {
-							$this.defaults.speed = $this.defaults.speedBackup;
-						} else {
-							$this.vibrationStart();
-						}
+						$this.vibrationStop();
 					});
 				}
-				setTimeout(function(){$this.vibrationStart();},Math.round(Math.random*100));
-			} else {
-				$this.bind($this.defaults.trigger,function(){
-					$this.vibrationStart();
-				}).bind(triggerStop,function(){
-					$this.vibrationStop();
-				});
+
 			}
-
 		})
 
 		$.fn.vibrationStart = function() {
-			var $$this = $(this);
-			if ( $.type($$this.data("vibrate")) !== "undefined" ) {
-				$$this.data("vibrate.status",true);
-				$$this.css({margin:"0 0 0 0"});
-            $$this.addClass( $$this.data('vibrate').defaults.vibrateClass );
-				$$this.vibrationLoop();
+			if ( $.type($(this).data("vibrate")) !== "undefined" ) {
+				$(this).data("vibrate.status",true);
+				$(this).css({margin:"0 0 0 0"});
+				$(this).addClass( $(this).data('vibrate').defaults.vibrateClass );
+				$(this).vibrationLoop();
 			}
 		}
 
 		$.fn.vibrationStop = function() {
-			var $$this = $(this);
-			if ( $.type($$this.data("vibrate")) !== "undefined" ) {
-				$$this.stop(false,true);
-            $$this.removeClass( $$this.data('vibrate').defaults.vibrateClass );
-				$$this.data("vibrate.status",false);
+			if ( $.type($(this).data("vibrate")) !== "undefined" ) {
+				$(this).stop(false,true);
+				$(this).removeClass( $(this).data('vibrate').defaults.vibrateClass );
+				$(this).data("vibrate.status",false);
+				if($(this).data('vibrate').defaults.callBack) {
+					$(this).data('vibrate').defaults.callBack();
+				}
+
 			}
 		}
 
 		$.fn.vibrationLoop = function() {
-			var $$this = $(this);
-			if ( $.type( $$this.data("vibrate")) !== "undefined" ) {
-				//var $this = $$this.data("vibrate");
-				if ( $$this.data("vibrate.status") == true ) {
-					var css = { marginTop: 0, marginLeft: 0 }
-					var position = $$this.position();
+			if ( $.type($(this).data("vibrate")) !== "undefined" ) {
+				var $this = $(this).data("vibrate");
+				if ( $(this).data("vibrate.status") == true ) {
+					var css = { marginTop: "0px", marginLeft: "0px" }
+					var position = $(this).position();
 
-					if ( parseInt($$this.css("marginTop")) > 0 ) {
+					if ( parseInt($(this).css("marginTop")) > 0 ) {
 						css.marginTop = "-1px";
 						css.marginLeft = "-1px";
 					} else {
 						css.marginTop = "1px";
 						css.marginLeft = "1px";
 					}
-					$$this.animate(css, $$this.data("vibrate").defaults.speed,function(){
-						$$this.vibrationLoop();
+					$(this).animate(css,$this.defaults.speed,function(){
+						$(this).vibrationLoop();
 					});
 				} else {
-					$$this.css({margin:"0 0 0 0"});
+					$(this).css({margin:"0 0 0 0"});
 				}
 			}
 		}