Fixed column table with horizontal scrolling

While I was working on a project which I need the first column in the table to the "fixed" (non-scrollable) while other columns are scrollable. I was wondering if this is possible and does it requires any JavaScript plug-in to achieve that.

After searching in the Internet, it turns our that it is very easy to do with CSS. No JavaScript is required. HTML is amazing.

Below is the sample page that I have done it myself while referencing the tutorial of fixed column.

• "fixed_div" - this is the main container for the table.
• "scroller" - this is the container that limit the width (width:600px) of the table to be displayed on the screen so that the horizontal scrollbar is scrollable. While "margin-left:100px" will ident the div to 100px to the right. Without this attribute the horizontal scrollbar will start showing at left = 0.
• "table" - the table-layout must be "fixed" or else the cell might be shrunken.
• "th" - the "position:absolute" will mark the cell to be fixed (non-scrollable) and "left:0" will let it stick to the left.

<html>
<head>
    <style type="text/css">
        table{
            table-layout:fixed;
            width:100%;
        }
        th {
            width: 100px;
            position: absolute;
            left:0;
            background-color:yellow;
        }
        td {
            width: 300px;background-color:yellow;
        }
        .scroller {
            overflow-x: scroll;
            overflow-y: visible;
            width: 600px;
            margin-left: 100px;
        }
        .fixed_div {
            position: relative;
        }
    </style>
</head>
<body>

    <div class="fixed_div">
        <div class="scroller">
            <table>
                <tr>
                    <th>
                        header 1
                    </th>
                    <td>
                        cell 11
                    </td>
                    <td>
                        cell 12
                    </td>
                    <td>
                        cell 13
                    </td>
                    <td>
                        cell 14
                    </td>

                    <td>
                        cell 15
                    </td>
                </tr>
                <tr>
                    <th>
                        header 2
                    </th>
                    <td>
                        cell 21
                    </td>
                    <td>
                        cell 22
                    </td>
                    <td>
                        cell 23
                    </td>
                    <td>
                        cell 24
                    </td>
                    <td>
                        cell 25
                    </td>
                </tr>
                <tr>
                    <th>
                        header 3
                    </th>
                    <td>
                        cell 31
                    </td>
                    <td>
                        cell 32
                    </td>
                    <td>
                        cell 33
                    </td>
                    <td>
                        cell 34
                    </td>
                    <td>
                        cell 35
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Detecting date selection in the JQuery datepicker control

The following function will attached the callback function to the JQuery datepicker control whenever the user choose a date from the popup:

function dt_attach_value_change_event(ctl_id, callback) {
    $(ctl_id).datepicker("option", "onSelect", callback);
}

Close popup div when clicked outside

Below is the script that solves the mentioned problem. I have not personally tested the code. You might want to try it out yourself.

$(function(){
   $("#btnFieldWorkers").click(function(e){       
       e.stopPropagation();
       $("#div_fieldWorkers").show();
       $("body").click(function(e){
           if(e.target.id != "div_fieldWorkers")
           {
               $("#div_fieldWorkers").hide();
               $("body").unbind("click");
           }
       });
   });

});

Reference: 

http://stackoverflow.com/questions/19092433/close-popup-div-when-clicked-outside 

RGB-to-Hex Conversion

This is the RGB-to-Hex Conversion Javascript:

http://www.javascripter.net/faq/rgbtohex.htm

Sorting data using JavaScript

Sorting in Javascript is quite easy.

For example, I have an array call "my_object_array" where "my_object" is an object that contains "customer_code" and "customer_name" properties. To sort the data by customer_code, just run the following code:

var f = 'customer_code';

my_object_array.sort(function (a, b) {
            return a[f] - b[f];
        });

To sort the data in descending order, you just need to swap the "a" and "b".

my_object_array.sort(function (a, b) {
            return b[f] - a[f];
        });

Cool huh?

Submitting data in JSON format to the website

If your web page contains quite a number of fields to be posted to the web server, you may submit the data in JSON format (through JQuery). In this way, you may get rid of writing lots of query parameter in the URL.

Below is the sample code posted by someone.

Sample code
http://stackoverflow.com/questions/5570747/jquery-posting-json

JSON Object
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify

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>