TinyMCE

If you allow user from uploading file, you need the following code to initialize the uploading process where '#sel_file' is "<input type='file'>":

    var my_file_callback = null;

    var uf = $('#sel_file');
    uf.change(function (e) {
        var c0 = $(this);
        var f2 = c0[0].files[0];
       
        // use XMLHttpRequest to upload the image file to the server.

        //<<------//<<------//<<------//<<------
        // then, show the image file on the browser.
        // we need to specify the full url of the file.
        my_file_callback('http://localhost/test/' + f2.name, { alt: 'you have selected a image file' });
        //<<------//<<------//<<------//<<------
    });

To initialize the TinyMCE:

    tinymce.init({
        //selector: 'textarea',
        selector: '.template_div .msg_body',
        plugins: [
               'advlist autolink lists link image charmap anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime table contextmenu paste code'
        ],
        toolbar: 'undo redo | bold italic underline fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

        fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
        height: '200',
        removed_menuitems: 'newdocument',
        relative_urls: false,
        remove_script_host: false,
        convert_urls: true,

        file_browser_callback_types: 'image',
        file_picker_callback: function (callback, value, meta) {
            // get the callback reference
            my_file_callback = callback;

            // show the file selection browser.
            $('#sel_file').trigger('click');
        },
        setup: function (editor) {
            editor.on('init', function () {
                // this will be call for the initial setup.
                // call your function OR below code to set the the contents.

                 tinymce.get('your textarea control-id').setContent('this is my contents....', { format: 'raw' });
            });
       }

    });

Changing the URL in the address bar with JQuery

Changing the URL in the address bar with JQuery is quite straight forward. The purpose of this technique is to resolve the user support for the "single page application" (i.e., all contents were loaded by JQuery).

I have modified the technique used by the following article in order to avoid the security error raised by the browser. It appends the "anchor" to the URL.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ChangeUrl(page, url) {
            if (typeof (history.pushState) != "undefined") {
                var i = window.location.href.indexOf('#');
                if (i > 0) {
                    url = window.location.href.substring(0, i) + url;
                }
                else {
                    url = window.location.href + url;
                }
               
                var obj = { Page: page, Url: url };
                history.pushState(obj, obj.Page, obj.Url);
            } else {
                alert("Browser does not support HTML5.");
            }
        }
        $(function () {
            $("#button1").click(function () {
                ChangeUrl('Page1', '#Page1');
            });
            $("#button2").click(function () {
                ChangeUrl('Page2', '#Page2');
            });
            $("#button3").click(function () {
                ChangeUrl('Page3', '#Page3');
            });
        });
    </script>
    <input type="button" value="Page1" id="button1" />
    <input type="button" value="Page2" id="button2" />
    <input type="button" value="Page3" id="button3" />


Reference

http://www.aspsnippets.com/Articles/Change-URL-in-Browser-Address-Bar-without-reloading-using-JavaScript-and-jQuery.aspx

Javascript object property

You have 2 ways to declare a new object. The first way is to using a shorthand declaration while the second way is to declare a new object in the same way like other programming language.

    var o = {};

OR

   var o = new Object();

Unlike other strong typed programming language such as C# or C++, Javascript allows you adding new property at anytime.

For example, adding name and age properties to an object instance:

    o.name = 'John';
    o.age = 18;
    o.savings = 2100;
    console.log(o);

You are allowed to remove any property as well:

    delete o.savings;
    console.log(o);

To retrieve all property names from an object, you need to call Object.keys() function which returns an array of string:

  var properties = Object.keys(o);
  console.log(properties);

Let says, you want to access the property value without knowing the property name:

    var age_of_the_person = o[properties[1]];

But, you can't access the property value by index:

    var not_working = o[1];

    console.log(not_working);

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.