Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: James Allen

jQuery Plugin To Make It Vibrate

Posted 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

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

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.