How to make a animated selected row indicator similar to Google+ using jQuery and CSS

Since a couple of days I’m using Google+ now and I must say I really love it!

I like the new design and the subtle and less subtle effects they put in the UI to increase the user experience, what led to this post.

While looking at my personal stream on Google+ I noticed that if you select a post a blue line slides to your  selected post, indicating that it is now the active selected one.

So I started wonder how it would be able to achieve the same effect using CSS and jQuery, so I started some late night coding and came op with the following result.

Now for some explanation on the JavaScript code

The first thing we need is to add an event handler to our “rows” this is done using with jQuery event binding, see line 1.

In the next block we define the vars.

• line will hold the html for the sliding line that will be added to the DOM
• source contains the DOM element  currently being selected
• target is the “row” that has been clicked

var line = $('
'),
    source = $(this).siblings('div.box.selected'),
    target = $(this);

The div containing the sliding line needs to be positioned on top of the current position

line.height(source.outerHeight());
line.css('left', source.position().left);
line.css('top', source.position().top);

On line 12 & 14 we add the sliding line to the DOM and we remove the selected class from the currently selected line.

Last but not least we arrived at the animation part of the line, for this I used the jQuery animation to create transitions using the properties of element, documentation can be found here.

line.animate({
    top: target.position().top,
    height: target.outerHeight()
    }, 'fast', 'swing', function() {
       target.addClass('selected');
       line.remove();
});

We’re just defining the new top and height property values for the sliding line, jQuery will handle the transition from the old to the new values.
To clean up the place I also registered a callback after the animation has finished to put the selected class on the newly selected row and to remove our sliding line from the DOM.

HTML:

<div class="container">
<div class="box">box1</div>
<div class="box selected">
Some Text

A few paragraphs

To increase box size

Some foo text

Some bar text</div>
<div class="box">box3</div>
<div class="box">box3</div>
<div class="box">box3</div>
<div class="box">box3</div></pre>
<div class="box">When the poet-king, Ucaf Uddaul, celebrates the charms of the queen of Ahmehnagara, he speaks thus: "Her shining tresses, divided in two parts, encircle the harmonious contour of her white and delicate cheeks, brilliant in their glow and freshness.</div>
<pre></pre>
<div>

CSS:

div.box {
    padding:5px 5px;
    padding-left:10px;
    border-left: 2px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
}

div.box:first-child {
    border-top: 1px solid #e7e7e7;
}

div.box.selected, div.slideline {
    border-left: 2px solid #4D90F0;
    background-color: #fafafa;
}

div.slideline {
    position: absolute;
    width:1px;
}

Javascript:

$('div.box').bind('click', function() {
    var line = $('
'),
        source = $(this).siblings('div.box.selected'),
        target = $(this);

    /* Set sliding line hight + position */
    line.height(source.outerHeight());
    line.css('left', source.position().left);
    line.css('top', source.position().top);

    /* Append the slideline to the body */
    $('body').append(line);

    source.removeClass('selected');

    /* Do the slide animation */
    line.animate({
        top: target.position().top,
        height: target.outerHeight()
    }, 'fast', 'swing', function() {
        target.addClass('selected');
        line.remove();
    });

});

The complete code (ready to be fiddled with) and result can also be found here.