Tag Archive | Highlight

JQuery Hylite Plugin

Wrote a little plugin this am to highlight rows of a table or unordered list. This has a little twist to it in that it has a couple of neat little features. Often we need to iterate over rows of data, maybe pullout a guid or index of the row and so on. This is a common task in just about every web application. So I quickly threw this one together. Obviously no guarantees and I’m sure it can be improved upon…feel free to do so.

What can HyLite do?

  • – highlight a table or list row on hover.
  • – can set a row as selected and then toggle off when clicked again.
  • – when row is selected it can either simply change to the selected class or do a mild animation.
  • – can also animate use JQuery UI. simply pass in your effect and options or use the default pulsate effect.
  • – on hover or click a callback function can report back the index of the row, the guid if you specify the guid element to lookup, the total number of rows and the rows selected on clear.
  • – has two modes select and navigate. select will do just that, navigate will redirect to the url passed.
  • – query string params are supported too. you can pass in an array of key/values and they will be concatenated to the url. if you pass the key guid in the query string params it will if you’ve set the option find the guid element specified and use it, otherwise if it can’t find it, it will use the value you’ve passed.




Nothing different here. Install the one of the above downloaded files in your script directory and then add a reference to the top of your page, master page, mvc shared layout etc. CSS styling is really straight forward. For what ever element you are iterating over just add three states in CSS. Your default, hover and selected states. You can also changes those class names to whatever you want, those are just the defaults so for example your CSS may look something like this:


    /* default style*/


    /* hover style*/


    /* selected style*/


Your html is equally simplistic. Say you have an unordered list or table it would be something like the below:

<ul class=”mylist”>
    <li>My first row of data<span class=”myguid”>100</span></li>
    <li>My second row of data<span class=”myguid”>101</span></li>


*** obviously the below would be wrapped in pageLoad or $(document).ready()***

– basic usage

$(.mylist li).hylite();

– animate using JQuery UI

animation is only used when in select mode.

$(.mylist li).hylite({
    uiAnimate: { enabled: true, effect: ‘pulsate’, opt: { times: 1 }, speed: 500 }

– turn animation off

$(.mylist li).hylite({
    animate: false

– changing default selected and hover styles

$(.mylist li).hylite({
    hoverStyle: ‘some-hover-style’,
    selectedStyle: ‘some-selected-style’

– navigate to new page after click

onclick navigate to new page example url: ‘/mypage.html?key1=value&key2=value’

$(.mylist li).hylite({
    mode: ‘navigate’,
    navParams: { url: ‘/mypage.html’, qsParams: { key1: ‘value’, key2: ‘value’ }

– using a unique identifier

$(.mylist li).hylite({
    guidElement: ‘.myGuid’,
    }, myCallbackFunction

function myCallbackFunction (element, data){
    // using the above you could update an input for example anytime there is
    // a mouseover or click event. I like JSON that way it is always in that format no matter what I’m doing.
    // possible options when calling back from main init method are:
    // obj.index (index hovered or selected), obj.rows (total count), obj.guid (the guidElemement )
    // possible options when calling back from clear method (see below)
    // obj.rows, obj.selected (counts the rows that were selected that you’ve cleared)
    // these properties passed back could in part be accessed from the JQuery object that also gets
    // passed back in the init method. meaning element above represents $(this)

    var obj = $.parseJSON(data);

– clearing selected rows when in select mode

$(.mylist li).hylite( ‘clear’, myClearCallback);

function myClearCallback(data){
    var obj = $.parseJSON(data);
    alert(‘There were ‘ + obj.selected + ‘ rows cleared.’