See you there!

var tabledata = [
    {"name":"Ravi","month":"January","salary":1460,"ding":490,"dong":980,"bong":950,"kong":540,"rang":1870,"bang":1980,"king":460,"sing":220,"ming":1370,"bing":400},
    {"name":"Kavi","month":"February","salary":570,"ding":10,"dong":890,"bong":1470,"kong":610,"rang":1920,"bang":1630,"king":410,"sing":170,"ming":630,"bing":850},
    {"name":"Bavi","month":"March","salary":510,"ding":580,"dong":1290,"bong":560,"kong":670,"rang":980,"bang":230,"king":570,"sing":270,"ming":30,"bing":1020},
    {"name":"Navi","month":"April","salary":540,"ding":1840,"dong":1010,"bong":200,"kong":750,"rang":1480,"bang":1500,"king":1970,"sing":1220,"ming":1050,"bing":1790},
    {"name":"Davi","month":"May","salary":1740,"ding":730,"dong":1030,"bong":1370,"kong":170,"rang":1090,"bang":1280,"king":1780,"sing":500,"ming":470,"bing":280},
    {"name":"Cavi","month":"June","salary":220,"ding":830,"dong":1040,"bong":1820,"kong":620,"rang":1130,"bang":1050,"king":290,"sing":500,"ming":20,"bing":560},
    {"name":"Aavi","month":"July","salary":1010,"ding":270,"dong":1940,"bong":900,"kong":870,"rang":1930,"bang":840,"king":1300,"sing":1160,"ming":1860,"bing":1450},
    {"name":"Eavi","month":"August","salary":1330,"ding":1560,"dong":1950,"bong":0,"kong":1800,"rang":1060,"bang":960,"king":1670,"sing":300,"ming":1590,"bing":520},
    {"name":"Favi","month":"September","salary":830,"ding":70,"dong":440,"bong":1720,"kong":1830,"rang":420,"bang":1590,"king":1780,"sing":200,"ming":1550,"bing":1040},
         {"name":"Ravi","month":"January","salary":1460,"ding":490,"dong":980,"bong":950,"kong":540,"rang":1870,"bang":1980,"king":460,"sing":220,"ming":1370,"bing":400},
    {"name":"Kavi","month":"February","salary":570,"ding":10,"dong":890,"bong":1470,"kong":610,"rang":1920,"bang":1630,"king":410,"sing":170,"ming":630,"bing":850},
    {"name":"Bavi","month":"March","salary":510,"ding":580,"dong":1290,"bong":560,"kong":670,"rang":980,"bang":230,"king":570,"sing":270,"ming":30,"bing":1020},
    {"name":"Navi","month":"April","salary":540,"ding":1840,"dong":1010,"bong":200,"kong":750,"rang":1480,"bang":1500,"king":1970,"sing":1220,"ming":1050,"bing":1790},
    {"name":"Davi","month":"May","salary":1740,"ding":730,"dong":1030,"bong":1370,"kong":170,"rang":1090,"bang":1280,"king":1780,"sing":500,"ming":470,"bing":280},
    {"name":"Cavi","month":"June","salary":220,"ding":830,"dong":1040,"bong":1820,"kong":620,"rang":1130,"bang":1050,"king":290,"sing":500,"ming":20,"bing":560},
    {"name":"Aavi","month":"July","salary":1010,"ding":270,"dong":1940,"bong":900,"kong":870,"rang":1930,"bang":840,"king":1300,"sing":1160,"ming":1860,"bing":1450},
    {"name":"Eavi","month":"August","salary":1330,"ding":1560,"dong":1950,"bong":0,"kong":1800,"rang":1060,"bang":960,"king":1670,"sing":300,"ming":1590,"bing":520},
    {"name":"Favi","month":"September","salary":830,"ding":70,"dong":440,"bong":1720,"kong":1830,"rang":420,"bang":1590,"king":1780,"sing":200,"ming":1550,"bing":1040}
];


YUI.add('freez-datatable', function(Y) {

    function FreezDataTable() {
        FreezDataTable.superclass.constructor.apply(this, arguments);
    }

    var Y = Y;
    FreezDataTable.NAME = "freez-datatable";
    FreezDataTable.ATTRS = {
        data:{
            value:tabledata,
            setter:function(value) {
                var cols = Y.Object.keys(value[0]);
                var fcols = this.get('freezedColumns');
                var ufcols = [];
                Y.Array.each(cols, function(item) {
                    if (Y.Array.indexOf(fcols, item) == -1) {
                        ufcols.push(item)
                    }
                })
               // console.log(value, cols, fcols, ufcols)
                this.set('columns', cols);
                this.set('unFreezedColumns', ufcols)
                return value;
            }
        },
        freezedColumns:{
            value:[]
        },
        unFreezedColumns:{
            value:[]
        },
        columns:{
            value:[]
        },
        height:{
            value:300
        },
        width:{
            value:600
        }


    }

    Y.extend(FreezDataTable, Y.Widget, {
        freezedTable:null,
        unFreezedTable:null,
        freezedContainer:null,
        unFreezedContainer:null,
        ftable:null,
        uftable:null,
        initializer:function() {
        },
        renderUI:function() {
            var cbox = this.get('contentBox');
            //this.set('width', cbox.get('outerHeight'))
            this.freezedContainer = Y.Node.create('<div class="fcontainer"> </div>')
            this.unFreezedContainer = Y.Node.create('<div class="ufcontainer"></div>')
            cbox.append(this.freezedContainer);
            cbox.append(this.unFreezedContainer);


        },
        bindUI:function() {
        },
        syncUI:function() {
           this.ftable = new Y.DataTable.Base({
                columnset: this.get('freezedColumns'),
                recordset: this.get('data')
            })

            this.uftable = new Y.DataTable.Base({
                columnset: this.get('columns'),
                recordset: this.get('data')
            })
            this.ftable.plug(Y.Plugin.DataTableScroll, {
                height:  (this.get('height')-16)+"px"
            });
            this.ftable.render(this.freezedContainer);
            this.freezedContainer.setStyle('width', (parseInt(this.ftable.get('contentBox').getStyle('width'))-18)+"px")
            
            this.uftable.plug(Y.Plugin.DataTableScroll, {
                width: this.get('width')+"px",
                height: this.get('height')+"px"
            });
            this.uftable.render(this.unFreezedContainer);
             this.uftable.get('contentBox').one('.yui3-datatable-bd').on("scroll",this._handleScroll, this)
        },
        _handleScroll:function(e){
            var freezedbd = this.ftable.get('contentBox').one('.yui3-datatable-bd');
            freezedbd.set('scrollTop',e.target.get('scrollTop') )
        }
    })

    Y.FreezedDataTable = FreezDataTable;

}, "0.0.1", { requires:['datatable','widget']})

YUI({filter:'min'}).use('freez-datatable', function(Y) {
    var dt = new Y.FreezedDataTable({srcNode:'#test', freezedColumns:['name','month']});
    dt.render()
})

<html>
<head>
    <title>dasfadsf</title>

     <script type="text/javascript" src="build/yui/yui-min.js"></script>
     <script type="text/javascript" src="js/datatable.js"></script>
    <style type="text/css">
        .fcontainer {
           position:absolute;
           z-index:12;
            width:155px;
            overflow:hidden;
        }
        .yui3-skin-sam .yui3-freez-datatable-content .yui3-datatable caption{padding:0}
    </style>
</head>

<body  class="yui3-skin-sam">
<div id="test">    
</div>
</body>
</html>

But creating this CSS sprite and CSS code for this sprite is tedious task. You have to put all images in-to one single image, and write down x,y,width and height of each image, and carefully use those details in CSS code. It’s very time taking and exhaustive task. But in future we front-endies don’t have to worry on such things. SpriteMe is for our rescue.

SpriteMe gives you a bookmark-let which you can book mark in your browser. While doing HTML and CSS mock-up folow the same procedures that your follow for non-sprited websites, make sure you don’t use html tags, use css background-image for all images that needs to be included in sprite. finally when you are done, open your website in browser which has SpriteMe bookmark-let which you created earlier. you should have your website online, so that SpriteMe can download images from your website. and click on that bookmark-let. A JS popup window opens, and depending on your CSS code and implementation SpriteMe suggest you creating 1-3 sprites. click on create sprite, you will have your sprite downloadable. and click on Export CSS to export CSS code for created sprites, This will also let you know where all you need to make change etc. With 2 simple steps you are done with creating sprites and CSS code for them.

Considering the complexity of creating sprites, running behind visual designers to create it, and writing CSS code for sprite this is a great tool. Only drawback I see that it’s doesn’t allow you to create Sprites from sites which are offline. I am planning to write offline version of it. Will update you all once I am done.

but1.addEventListener("click",submitContact);

function submitContact(e:Event) {
var variables:URLVariables = new URLVariables();
var varSend:URLRequest = new URLRequest("email.php");
var varLoader:URLLoader = new URLLoader;
varSend.method = URLRequestMethod.GET;
varSend.data = variables;
variables.Name="Ravi";
variables.Email="Ravi@Some.com";
varLoader.load(varSend)
}

I agree this is very simple, but this is what called as “Value Addition”.

- If you are a JAVA programmer, don’t think twice, GWT is the best web development toolkit available for you, go and use it
- People with Flex experience could find UiBinders GWT interesting, but for people don’t have such experience, this is bit new concept, but worth exploring.
- You need to explicitly create each and every div/HTML element in your page. Even though there are some widgets available, but they are minimal
- Default widgets/components comes with GWT is never enough for you, whatever they have now is very basic, you may have to develop some of your own
- Smart GWT, in one word I can say it’s very heavy. You cannot divide it on required modules. If you are using it for small part of your application, you end up paying more price than you need to. If you are using it for complete App then you have better chance of exploiting it.

But this is windows only, this is the only time I felt bad about have a MAC. but any way I have windows box and home, and life going on,

Simple-File-Browser SnapShot

Download Simple Ajax-PHP File Browser here.