jQuery Plugin To Make It Vibrate : Kinky Solutions : A Student's Perspective by Ben Nadel

jQuery Plugin To Make It Vibrate

Posted September 12, 2007 at 3:26 PM

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:

Launch code in new window » Download code as text file »

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

Download Code Snippet ZIP File

New Incredible Hulk ColdFusion eCard Available

jQuery 1.2 - An Unexpected Surprise

Adobe ColdFusion 8.0.1 Update - Helping Programmers To Be Signifanctly Less Girlie - Download ColdFusion 8 Update 8.0.1 Now.

Reader Comments

Needs a nice .wav file to make it complete. :)

Posted by Jim Priest on Sep 12, 2007 at 3:54 PM

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

Posted by Dustin on Sep 12, 2007 at 4:04 PM

Ha ha ha ha :)

Posted by Ben Nadel on Sep 12, 2007 at 4:19 PM

Thanksfor good script!

Posted by Trap on Sep 12, 2007 at 4:23 PM

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

Posted by Ben Nadel on Sep 12, 2007 at 4:29 PM

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.

Posted by David Hopkins on Sep 14, 2007 at 6:30 AM

Hi Ben Thanks for exploring and giving us Jquery script. I will utilize it in future work.

Posted by Creativ Era's on Dec 14, 2007 at 7:00 AM

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.

Posted by Bill on Jan 16, 2008 at 8:01 PM

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.

Posted by Marcus on Feb 13, 2008 at 12:08 PM

Post Comment | Ask Ben

jQuery Plugin To Make It Vibrate : Kinky Solutions : A Student's Perspective by Ben Nadel