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.

Dynamic (on the fly) logfiles using log4j

A few days ago I had to create a logger that would create a file per batch job and per user. After searching the web, I couldn’t find the right solution for this problem. So I would mike toch share with you how this was solved.
First the requirements and pitfalls:
• Project uses log4j
• Implementing without the need for a big refactor in the existing code
• Keep config in existing log4j properties file
• No extra configuration work/deploy/restart of the application server should be needed if a new batch is implemented or a new user starts using the application.
So to solve this I splitted up the problem in two smaller issues, how to let log4j know which batch and user the code is executed? And how to create a log per batch per user.
Since each batch is launched in his own thread I saw the oppertunity to use the Mapped Diagnostic Context (MDC) provided by log4j. Before the job starts we put the userid and job name on the MDC, at the end of the job these are removed from the MDC.