Javascript object is name value collection

In Javascript, an object is a name value collection.

// the shorthand to declare an new object,.
var o = {};


// set the age to 18.
o['age'] = 18;

// you have 2 ways to retrieve the age:
// property style:
console.log(o.age);

// name value collection style:
console.log(o['age']);

// you may also assigning the value with the "name" that can't be access in "property" style.
o['abc-1'] = 1;
o['name 1'] = 2;

console.log(o['abc-1']);
console.log(o['name 1']);

Fixed row and column in HTML with CSS + JavaScript

You cannot achieve the fixed row and column with HTML + CSS. You need the Javascript as well.






Below is the HTML, CSS and Javasript that accomplished the fixed row and column.

 <html lang="en">

<head>
    <script src="js/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        function on_y_scroll(e) {
            var t = $('.tb_cells').scrollTop();
            var l = $('.tb_cells').scrollLeft();

            $('.r_headers').scrollTop(t);
            $('.c_headers').scrollLeft(l);

            console.log('left=' + l.toString() + ',top=' + t.toString());
        }
        $(document).ready(function () {
            $('.tb_cells').scroll(on_y_scroll);
        });
    </script>

    <style>
        .tb {
            background-color: darkgray;
            width: 600px;
            height: 250px;
        }
      
        /* the full row and partial should be hidden */
        .max_row_width {
            width: 500px;
        }
        /* the data row to be partially display on the screen*/
        .max_data_width {
            width: 420px;
        }
        /* the data row height */
        .row_height {
            height: 30px;
        }
        /* the column header height */
        .row0_height{
            height:40px;
        }

        /* for column zero*/
        .cell0 {
            width: 100px;
            background-color: red;
        }

        .tb_col0 {
            float: left;
        }

        .r_headers {
            height: 140px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
        }

        .row_header {
            background-color: #0094ff;
        }

        /* for row zero */
        .c_headers {
            width: 400px;
            overflow: hidden;
        }

        .col_header {
            width: 100px;
            float: left;
            background-color: green;
            color: white;
        }

        .tb_row0 {
            clear: both;
        }

        /* for data cell */

        .tb_data {
            float: left;
            height: 200px;
            overflow: hidden;
            overflow-x: hidden;
            background-color: yellow;
        }

        .tb_cells {
            float: left;
            height: 160px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
            overflow-y: auto;
            overflow-x: auto;
            background-color: mediumaquamarine;
        }

        .tb_row {
            clear: both;
        }

        .cell_col {
            width: 100px;
            float: left;

            /* user defined style for the cell content */
            box-sizing: border-box;
            padding-left: 5px;
            padding-right: 5px;
            text-overflow: clip;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <h3>Fixed row and column</h3>

    <div class="tb">

        <div class="tb_col0">
            <!--the first cell-->
            <div class="cell0 row0_height">
                cell 0
            </div>

            <!--the first column-->
            <div class="r_headers">
                <div class="row_header row_height">
                    r 1
                </div>
                <div class="row_header row_height">
                    r 2
                </div>
                <div class="row_header row_height">
                    r 3
                </div>
                <div class="row_header row_height">
                    r 4
                </div>
                <div class="row_header row_height">
                    r 5
                </div>
                <div class="row_header row_height">
                    r 6
                </div>
                <div class="row_header row_height">
                    r 7
                </div>

            </div>

        </div>



        <div class="tb_data max_data_width">

            <!--the column header -->

            <div class="c_headers row0_height">
                <div class="tb_row0 max_row_width row0_height">
                    <div class="col_header row0_height">
                        col 1
                    </div>
                    <div class="col_header row0_height">
                        col 2
                    </div>
                    <div class="col_header row0_height">
                        col 3
                    </div>
                    <div class="col_header row0_height">
                        col 4
                    </div>
                    <div class="col_header row0_height">
                        col 5
                    </div>
                </div>
            </div>


            <!-- data cells -->
            <div class="tb_cells max_data_width">

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell11 very long long long text
                    </div>
                    <div class="cell_col">
                        cell21
                    </div>
                    <div class="cell_col">
                        cell31
                    </div>
                    <div class="cell_col">
                        cell41
                    </div>
                    <div class="cell_col">
                        cell51
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell12
                    </div>
                    <div class="cell_col">
                        cell22
                    </div>
                    <div class="cell_col">
                        cell32
                    </div>
                    <div class="cell_col">
                        cell42
                    </div>
                    <div class="cell_col">
                        cell52
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell13
                    </div>
                    <div class="cell_col">
                        cell23
                    </div>
                    <div class="cell_col">
                        cell33
                    </div>
                    <div class="cell_col">
                        cell43
                    </div>
                    <div class="cell_col">
                        cell53
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell14
                    </div>
                    <div class="cell_col">
                        cell24
                    </div>
                    <div class="cell_col">
                        cell34
                    </div>
                    <div class="cell_col">
                        cell44
                    </div>
                    <div class="cell_col">
                        cell54
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell15
                    </div>
                    <div class="cell_col">
                        cell25
                    </div>
                    <div class="cell_col">
                        cell35
                    </div>
                    <div class="cell_col">
                        cell45
                    </div>
                    <div class="cell_col">
                        cell55
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell16
                    </div>
                    <div class="cell_col">
                        cell26
                    </div>
                    <div class="cell_col">
                        cell36
                    </div>
                    <div class="cell_col">
                        cell46
                    </div>
                    <div class="cell_col">
                        cell56
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell17
                    </div>
                    <div class="cell_col">
                        cell27
                    </div>
                    <div class="cell_col">
                        cell37
                    </div>
                    <div class="cell_col">
                        cell47
                    </div>
                    <div class="cell_col">
                        cell57
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

Remove an item from Array

To remove an item from Array, you need to call Array.splice().

I just feel that I can ease myself from memorizing this function name by adding "removeItem" function to the Array prototype like this:

if (!('removeItem' in Array.prototype)) {
    Array.prototype.removeItem = function (i) { this.splice(i, 1); };
}

So, next time when you want to remove an item from array, just call removeItem().

For example,

var a = [ "apple", "banana", "orange" ];
a.removeItem(1);

Then, "banana" will be removed from the array.

Taking photo with web camera without Flash

With HTML5, you can connect to the web cam and take photo without using Flash or any other third party component.

To connect to the web cam, you need to explore the following Javascript method:

  navigator.MediaDevices.getUserMedia()

For the detailed explanation, please refers to the following article.

    http://www.html5rocks.com/en/tutorials/getusermedia/intro/

and also refer to the up-to-date reference:

  https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia


I found this library and the sample web pages are working (able to take photo). But, yet to write some web page to do the job:

   https://github.com/jhuckaby/webcamjs

Printing without the URL at the page header

Below is the sample HTML which will hide the URL at the page header when printing with Javascript.


   <html moznomarginboxes >
   <head>
   <style type="text/css">

      @page{                size: auto;                margin: 3mm;           }

   </style>
   </head>
   <body>
         My page content goes here..
   </body>
   </html>


The simple way to print the current page is to call the following JavaScript method:

   window.print();

The Javascript library to print the specific element/container:

  https://github.com/jasonday/printThis

Adding public and private method/property

Here is how you returns a Person object to the caller:

function Person(name)
{
    // increase the head count (static property)
    this.constructor.headCount++;

    // private variable
    var _dob;
    var _name = name;

    //public functions
    this.helo = function () { return 'helo work..' };
    this.toString = function () { return _name };

    // public property
    this.money = 1000;
}

// public functions
Person.prototype.sayMyName = function () { return this.toString() };
Person.prototype.myBalance = function () { return this.money; };

// static property
Person.headCount = 0;

var p1 = new Person('mike');
var p2 = new Person('john');
var count = Person.headCount;    // the output is '2' because you called 'new' twice

For detail explanation, please refers to the following artcile:
http://phrogz.net/JS/classes/OOPinJS.html

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>