jQuery-mouseCenter

jQuery Special Events !

jQuery mouseCenter allow you to bind and trigger custom handler functions when mouse enter or leave the center area of an element. The idea is to check if mouse enter or leave the center area while mouse move over the element and then trigger proper events.

The plugin add two new events to jQuery : mousecenterenter and mousecenterleave. You use it like any other event type but when binding your event handler function, optional data argument allow you to specify size and shape of the center area. Live and delegate methods are not yet supported.

All the heavy lifting is done using jQuery special event API. If you want to know more about jQuery special events, please have a look at clear & short example by Brandon Aaron or Ben Alman's detailed documentation.

How to use it ?

You can specify shape and distance that define the center area. It can be an integer, in that case the default shape is a circle, or a function defining a shape taking cursor coordinates x,y relative to center of element as arguments and returning a boolean.

The shape/distance is passed in or as data argument when you bind your function: you can pass integer and function as data or in a hash as 'distance' property.

The $.mousecenter helper allow you to generate shape definition function of any size you need and to store shape definitions.

Usage examples

With integer as and in data argument :

$( 'selector' )
  // Default distance is 50 pixels, center area is a 50px radius circle.
  .mousecenterenter( function () {
    ... your code ...
  } )
  // Distance integer as data argument, center area is a 20px radius circle.
  .mousecenterleave( 20, function () {
    ... your code ...
  } )
  // Distance in data argument, center area is a 20px radius circle.
  .mousecenterenter( { distance: 20, customdata: 'foo' }, function () {
    ... your code ...
  } );

With custom shape function :

var square40 = function ( x, y ) {
  return 20 >= Math.abs( x ) && 20 >= Math.abs( y );
};
$( 'selector' )
  // Distance function as data, center area is a 2 * 20px side square.
  // You can pass function in data argument as well.
  .mousecenterleave( square40, function () {
    ... your code ...
  } );

For example clarity sake, i used the square40 plain function. But you can use $.mousecenter( 'square', size ) to easily create function for various "square size", in this example : square40 === $.mousecenter( 'square', 20 ).

Simple Demos

Following example use images because it's a typical case where you don't want any additional markup. Enough explanations now, try it !

Alert when hiting center of the target.

$( '#target' )
.mousecenterenter( 14, function () {
  alert( 'Hit !' );
} );

Crosshair cursor on centered square.

$( '#circles_square' )
.mousecenterleave( $.mousecenter( 'square', 60 ), function () {
  $( this ).css( { cursor: 'default' } );
} )
.mousecenterenter( $.mousecenter( 'square', 60 ), function () {
  $( this ).css( { cursor: 'crosshair' } );
} );

You may bind multiple mousecenter events : let's add pointer cursor on smaller circle.

$( '#circles_square' )
.mousecenterenter( 12, function () {
  $( this ).css( { cursor: 'pointer' } );
} )
.mousecenterleave( 12, function () {
  $( this ).css( { cursor: 'crosshair' } );
} );

Tooltip on static map marker.

$( '#map' )
.tipsy( { trigger: 'manual', gravity: 's' } )
.mousecenterenter( 30, function () {
  $( this ).tipsy( 'show' );
} )
.mousecenterleave( 30, function () {
  $( this ).tipsy( 'hide' );
} );

Play Ground

Another demo you can play code with !

Global JS run
Always executed 

$( '#demo' )
.mousecenterenter( ,  ); run

$( '#demo' )
.mousecenterleave( ,  ); run

Tip : If you've binded too much, clean up with
$( '#demo' ).unbind( 'mousecenterenter mousecenterleave' )