Tag Archives: hover

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: Livequery and the Hover Event CodeUnit 02 JAN 2011

Before jQuery’s native live() and delegate() functions came into being, the default for handling binding on late generated DOM elements was to make use of the excellent Brandon Aaron plugin LiveQuery (otherwise known as Live Query). Today we look at how one handles the hover event using a livequery declaration.

Now the standard way of using livequery is to simple attach the function call to the targeted element as such:

$('.mylink').livequery('click',function(){
alert('clicked');
});

However, because the hover event contains an implicit combination of the mouseover and mouseout functions, the livequery declaration for hover events looks considerably different:

$('.mylink').livequery(function(){
 $(this).hover(function() {
    $(this).addClass('hover');
 }, function() {
    $(this).removeClass('hover');
 });
 }, function() {
     $(this).unbind('mouseover').unbind('mouseout');
 }); 

And that’s is pretty much it. As you can see, you declare a standard full hover jquery function declaration as the first argument for the livequery function call. The second function call deals with the unbinding of the previously bound argument.

Not quite intuitive from the first glance, but it works like a bomb. In other words, nifty.

Related Link: http://brandonaaron.net/code/livequery/docs

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/

Highlight a Table Row using jQuery CodeUnit 26 JAN 2010

Using jQuery to highlight a table row on mouse over is pretty simple to achieve, and today I’ll quickly demonstrate how you can achieve this neat effect using the addClass and removeClass jQuery functionalities.

First, you need to define your CSS style to be applied to the row you are hovering over, picking out some CSS attributes that you wish to manipulate. In our case, we’re going to be changing the background-color property and thus our CSS style entry looks like this:

.datahighlight {
        background-color: #ffdc87 !important;
}

Next, we force all the rows in our table to be a member of a specific class:

Text Row to be highlighted

Finally, we apply the jQuery code:

      $(document).ready(function(){
		$('.simplehighlight').hover(function(){
			$(this).children().addClass('datahighlight');
		},function(){
			$(this).children().removeClass('datahighlight');
		});
      });

As you can see, all the jQuery magic is doing on mouse over of any element with the class ‘simplehighlight’ applied is adding a class ‘datahighlight’ to all the child elements of that selected element (the one being hovered above), in our case those being the actual cells of the row. Seeing as the !important rule is applied to the simplehighlight definition, those cell backgrounds are forced to the new color definition, giving the appearance of a row highlight.

On mouse out, the datahighlight class is removed, forcing all of the child elements (once again our cells) to return to their normal background color schemes.

It’s simple, easy to implement, and highly effective, as shown by the example below: