Javascript parameter is optional

In Javascript, the parameter in the function is optional. If the caller did not pass in the parameter value (as shown in test1 function), then, the value of "a" is "undefined". So, each time before you are using the incoming parameter value, make sure that you check it before using it.


You may copy the following tags into any html file and then debug it in Visual Studio.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function check(a) {
            var i = 0;
            if (a) {
                i = a;
            }
            else {
                i = -1;
            }
        }
        function test1() {
            check();
        }
        function test2() {
            check(12345);
        }
        function test3() {
            check(null);
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="test1" onclick="return test1();" />
    <input type="button" name="name" value="test2" onclick="return test2();" />
    <input type="button" name="name" value="test3" onclick="return test3();" />
</body>
</html>

Clearing the contents in an element

Execute the following using JQuery, it will clear all the contents (including tags) within "div1":

   $('#div1').remove().end();

Get the input by ID

Let's say you have 3 buttons which starts with "f1" and below is the HTML tags:

        <input type="button" id="f1.1" value="test1" />
        <input type="button" id="f1.2" value="test2" />
        <input type="button" id="f1.3" value="test3" />

When you run the following JQuery code, you will get different result:

            var v1 = $('#f1.1');              => this returns zero match.
            var v2 = $('input[id^="f1"]');  => this returns 3 matches.
            var v3 = $('input[id="f1.2"]'); => this returns 1 match (i.e., the second button).

If you are using "#" in the selector, the result is either 0 or 1 (it's always stop after it found the first one).

For more details, check out the following reference:

    http://api.jquery.com/category/selectors/

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 "&nbsp;" 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>