Tag Archives: mouseover

jQuery: How to Bind a Hover Event CodeUnit 04 NOV 2011

To bind a hover effect, in other words a mouse over and mouse out event that goes together, to an element using standard jQuery is remarkably simple. As with any other bind declaration in jQuery, you simply identify the class, ID or element type using the standard $ notation, and then call the desired action function you want to bind to with the necessary function parameters.

Binding a hover function does however look a little different than a normal bind to say a click function in that it accepts two parameters – namely the function to carry out on the first mouse over event and then the second to execute on the mouse out action.

So in practice, binding a hover event would look like this:

$("li").hover( 
function() 
{ 
    $(this).addClass("hover"); 
}, 
function() 
{ 
    $(this).removeClass("hover"); 
}); 

(Note that we could have used toggleClass in the example above, but this way makes it easier to understand.)

And now you know.

jQuery DataTables: Simple Row Highlight Example CodeUnit 17 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can quickly and easily implement a visually helpful hover-based row highlight on any of your datatable objects.

First off, you will need to define a highlight rule to be applied to your table in your CSS declarations. In the simplest form, all you really want to do is define a unique background-color to the element wish you wish to highlight.

In CSS, this could look something like this:

.datatablerowhighlight {
	background-color: #ECFFB3 !important;
}

The next step is then to add our new highlight class to the row when the mouse hovers over it and then to remove it again when the mouse moves away. To do this we need to add bindings for the mouseenter and mouseleave jQuery events, where we add and remove the highlight class accordingly.

To do this, we piggyback into the handy fnDrawCallback function that is defined when initializing your datatable and which gets executed each time the datatable gets drawn.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"fnDrawCallback": function(){
      $('table#activitylog td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
      $('table#activitylog td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); });
}
} );

Note how we grab the whole rows contents y first grabbing the parent element of the element we are currently hovering above, and then expanding to all that parent’s children elements – in other word the entire row. A simple addClass and removeClass call handles the actual attaching and detaching of the highlight CSS class.

Nifty, and pretty damn effective to boot! ;)

Related Link: http://datatables.net/

jQuery Mouseover Tooltips the Easy Way! CodeUnit 30 JAN 2010

Jeff Robbins of Lullabot brings to us a rather nifty jQuery plugin in the form of BeautyTips, a tooltips plugin which uses the canvas drawing element from the HTML 5 spec to draw tooltips/talk bubbles/help balloons that can be associated with any specific HTML element on a web page. These tooltips are highly configurable in terms of look and feel, and can be fired based on a number of different events, including your standard mouseover right the way through to on focus and key up for textboxes!

It works natively with modern versions of FireFox, Safari and Opera, and with a small inclusion of the Explorer Canvas extension created by Google, it even comes to life in Internet Explorer.

Each tooltip that gets drawn is positioned on the side of the target element which has the most free space, meaning that the tooltip responds to window sizing and scroll position, making it quite robust in terms of not getting hidden by smaller windows’ border positioning.

BeautyTip in action: this time fired by clicking on an input text box.

Attaching and using BeautyTip in your site is ridiculously easy.

Simply download and reference the plugin script in the head of your page, and then use a bit of jQuery magic to attach the BeautyTip function to a specific element like so:

hover
$('#example1').bt();

And that’s it. Couldn’t be any easier to get a great looking result that is sure to clean up your interface in terms of hiding all those tidbits of help that you keep tossing about the place so! :P

Related Link: http://plugins.jquery.com/project/bt