jQuery Plugin To Make It Vibrate
Posted September 12, 2007 at 3:26 PM by Ben Nadel
After my post on the release of jQuery 1.2, over lunch, I thought I would have some fun and try to make a jQuery plugin that takes absolutely positioned elements and causes them to vibrate upon mouse over. It's not all that well written, and it only works with absolutely positioned elements because I am not yet smart enough to figure out how to move relatively positioned elements. I know it's possible to do, since people do it for drag-n-drop, but I'm just not there yet.
So anyway, don't take this as any reference on how to write jQuery plugins - this was just for fun.
See vibrate() plugin in action (SAFE FOR WORK!!)
Here is the code for that page:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Writing jQuery Plugin Demo</title>
-
- <style type="text/css">
-
- body {
- background-color: #000000 ;
- font-family: verdana ;
- }
-
- h1 {
- color: #FAFAFA ;
- font-weight: 400 ;
- }
-
- div {
- background-color: #000000 ;
- background-image: url( "jquery_logo.jpg" ) ;
- font-size: 1px ;
- height: 86px ;
- left: 300px ;
- line-height: 200px ;
- overflow: hidden ;
- position: absolute ;
- text-align: center ;
- top: 300px ;
- width: 241px ;
- }
-
- </style>
-
- <!-- Linked Files. -->
- <script type="text/javascript" src="jquery-1.2.pack.js"></script>
- <script type="text/javascript">
-
- // This jQuery v1.1.3 plugin will cause the targeted
- // elements to vibrate when they are moused over.
-
- jQuery.fn.vibrate = function(){
-
- // Loop over each of the elements in the jQuery
- // stack so that we can set up the properties
- // for the individual elements.
- this.each(
- function( intI ){
- // Get a jQuery object for this element.
- var jNode = $( this );
-
- // Default plugin to not be vibrating.
- var blnVibrate = false;
-
- // Get current position of the element.
- var intLeft = parseInt( jNode.css( "left" ) );
- var intTop = parseInt( jNode.css( "top" ) );
-
-
- // Create a function pointer that will
- // handle the updating of elements position
- // such that it will make it appear to be
- // vibrating.
- var fnUpdatePosition = function(){
- var intCurrentLeft = parseInt(
- jNode.css( "left" )
- );
-
- var intCurrentTop = parseInt(
- jNode.css( "top" )
- );
-
-
- // Check to see if we should keep going.
- if (blnVibrate){
-
- // Check to see which direction to
- // adjust in - either vert. or horz.
- if (Math.random() > .5){
-
- // Adjust vertically.
- if (intCurrentTop > intTop){
- intCurrentTop = (intTop - 2);
- } else {
- intCurrentTop = (intTop + 2);
- }
-
- } else {
-
- // Adjust horizontally.
- if (intCurrentLeft > intLeft){
- intCurrentLeft = (intLeft - 2);
- } else {
- intCurrentLeft = (intLeft + 2);
- }
-
- }
-
- // Set a timeout to call this method
- // again and update position.
- setTimeout(
- fnUpdatePosition,
- 60
- );
-
- } else {
-
- // Reset position.
- intCurrentLeft = intLeft;
- intCurrentTop = intTop;
-
- }
-
-
- // Update the position.
- jNode.css(
- "top",
- (intCurrentTop + "px")
- );
-
- jNode.css(
- "left",
- (intCurrentLeft + "px")
- );
- }
-
-
- // Hoook up the mouse over event to flag
- // that the vibrating should begin.
- jNode.mouseover(
- function(){
- // Flag vibration.
- blnVibrate = true;
-
- // Start vibrating.
- fnUpdatePosition();
- }
- );
-
-
- // Hook up the mouse out event to flag
- // that the vibrating should end.
- jNode.mouseout(
- function(){
- // Clear vibration.
- blnVibrate = false;
- }
- );
-
- }
- );
- // END: each()
-
- // Return the jQuery stack to keep chaining.
- return( this );
- }
-
-
-
- // Hook up all the vibration elements.
- $(
- function(){
- $( "div" ).vibrate();
- }
- );
-
- </script>
- </head>
- <body>
-
- <h1>
- jQuery Plugin Demo: Vibrate -
- Shake It Like A Polaroid Picture
- </h1>
-
- <div>
- jQuery - Write Less. Do More.
- </div>
-
- </body>
- </html>
I've never done a jQuery plugin that has any sort of timed events; all of my plugins are one-off type features. I have no idea how you would go about doing this properly, so I just took a stab at it. I'd love to see how the Animation features work as those must have really clean timeouts and intervals and all that goodness.
Reader Comments
Needs a nice .wav file to make it complete. :)
And you thought you were getting on search engines for odd keywords before. Just imagine what you'll get now!
"Where's my huge ass vibrator?!?!?"
LOL
Ha ha ha ha :)
Thanksfor good script!
@Trap,
I'm not sure how "good" it is :) I very rarely used time-events, and certainly, this is the first time I have ever even tried to do that within the context of a jQuery plugin. This was just a stab in the dark.
Nice snippet. I can see a few uses for something like that in menu bars. Have you ever taken a look at Mootools? It has by far the best fx engine of any of the JS frameworks in my oppinion. Using Motools you could probably do something like that with 10% of the code.
Hi Ben Thanks for exploring and giving us Jquery script. I will utilize it in future work.
Can't think of any practical uses for this - but it's still pretty cool anyway :) Now gonna see if I can understand this code.
Well done, this code has helped me understand jQuery. I get it now, thank you so much, I had struggled for such a long time and now I will be able to use it.
wow nice script i like this .. and love to use this on my website .. can u pls tell how i can make it vibrate automatically without mouse over event.
