Detecting double click in an element

I'm working on an attendance audit screen which allows the user to single click to confirm the selection and double click to create a report. After I googled for the solution, I found the following solution in stackoverflow.com

Below is the code:

// Someone has created the solution as a delegate to ease the implementation.
 $.singleDoubleClick = function (singleClk, doubleClk) {
            return (function () {
                var alreadyclicked = false;
                var alreadyclickedTimeout;

                return function (e) {
                    if (alreadyclicked) {
                        // double
                        alreadyclicked = false;
                        alreadyclickedTimeout && clearTimeout(alreadyclickedTimeout);
                        doubleClk && doubleClk(e);
                    } else {
                        // single
                        alreadyclicked = true;
                        alreadyclickedTimeout = setTimeout(function () {
                            alreadyclicked = false;
                            singleClk && singleClk(e);
                        }, 300);
                    }
                }
            })();
        }

// call this in the document ready:
$('.profile').bind('click', $.singleDoubleClick(confirmSelection, createReport));

CSS progress spinner generator

This is a cool site which help you to generate a progress spinner only the fly:

http://cssload.net/

JQuery offset returns null value

This could be due to the "$(this)" call. Instead, calling "$('#your_control_id')" will resolve the problem.

Multi-line items using UL & LI

You want to show the item list in a frame and each item has it's own frame as well. The end result looks like this:

The CSS to achieve the above:

• item_box - this is the class for the DIV. If the "overflow" setting is missing, the blue color DIV frame might not work in Firefox.
• item - this is the class for the UL.
• item li - this is the class for the LI.
• item span - this is the class for the SPAN (to control the text/content effect). If you are displaying the text with spaces, the spaces have to be replaced by " " so that it won't fall apart!

    <style type="text/css">
        .item_box
        {
            border: 1px solid blue;
            width: 400px;
            vertical-align: middle;
            overflow: hidden;
        }
        .item
        {
            list-style-type: none;
            min-height: 30px;
        }
        .item li
        {
            float: left;
            padding: 2px;
        }
        .item li span
        {
            border: 1px solid gray;
            display: inline-block;
            padding: 2px;
        }
    </style>