Simple Ajax-PHP File Browser using PHP and YUI.

This example is to show how you will create a simple file browser in PHP, and get it working with YUI.  Once you deploy it inside your web server it should look like this.

Simple-File-Browser SnapShot

Download Simple Ajax-PHP File Browser here.

YUI Scrolling DataTable width problem

I should say, this is weirdest issue I solved lately. We were using YUI Scrolling DataTable to show huge amount of stat information. It’s not the data part that did trouble us, but scroll bars. We started seeing scrollbars every where, even at pages where we had single table with small four columns. Each column was occupied with the space 200% of the given available space. I am sorry that I doubted on YUI ScrollingDataTable widget, but nothing came out after 6 hours of digging logging etc, finally figured out “all is well” with the widget, it’s the problem with the way HTML table rendering inside the widget. Some I got doubt about the CSS associated with the tables, for some reason previous developers assigned

table{
width:100%
}

in CSS. and I made it

table{
width:auto;
}

Guess what? UI Fixed.

Actually this is what happened, all these tables were under floated column divs, with width:100%, tables  occupied space bigger than their containers, since widget tried to size DataTable to actual width of the content and because of CSS property, actual content took more space than needed, we were getting DataTables with huge white space and scrollbars.

Moral of the story is:  If you are using YUI DataTable widget, never use global table selector with width:100%.

Happy Coding.

Skinning YUI Data Table

we do generally think skinning any css thing is very easy, I started skinning YUI data table with the same assumption, but what turned out is my assumption was wrong, it needed bit more that css sense, that is cascading sense. the better understanding of data table. Finally I am done with that, here is the css for skinning your data table to purple color. append it to your skin.css (inside /assets/skin/sam/ folder)

.yui-skin-sam tr.yui-dt-odd {background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc{background-color:#e5dbff;}
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc{background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-highlighted{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-highlighted td, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-selected{background-color:#7c42d9;}
.yui-skin-sam tr.yui-dt-selected td, .yui-skin-sam tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam tr.yui-dt-selected td.yui-dt-desc {background-color:#7c42d9;}

make sure you won’t mess with the order, order is more important than the content.

check out preview image @ http://www.flickr.com/photos/ananthara/4202372041/

YUI Tab and Flash Graph/Movie

when you use YUI Tab with flash graphs/movie in them, firefox refresh the movie every time you switch away and back to the tab containing flash Graph. if you are using simple graphs it’s not noticeable, but in big movies/graphs it’s irritating. I figured out the basic problem is whenever you change position / overflow values of a div, firefox reloads all flash movies within that div. YUI Tabview have these 2 properties defined for .yui-navset .yui-content .yui-hidden class which get appended to content div when they get hidden.

Fix is to add same properties to visible tab-content div also. This doesn’t make any harm in the way Tab works. Here is the css I did add to fix this issues. But I have not tested this on browsers other than Firefox, try yourself.

.yui-navset .yui-content > div {overflow:hidden;position:static;}
.yui-navset .yui-content .yui-hidden {position:static; }

Process of Converting an Design into HTML mocks.

Feasibility Study: Go through the mock and see if there are any unique element which you haven’t tried earlier, if it is there, make a note and do a feasibility study of that element, and speak with mock creators how the mock work. If every thing is fine, Just move on next step.

Basic GRID: It’s recommended to use YUI CSS Grids because they work well with all A grade browsers and well supported and documented. download reset-fonts-grids.css from YUI library, depending on the page width set id of the container div to “doc” to “doc4”, you can use custom width as well, but widths defined in the grids are good enough to cover all most all layouts, so you don’t have to worry too much on custom tweaking layouts. After that depending on the number of columns and left/right column with set class of container div to “yui-t1” to “yui-t6”. Here is list of doc ids and yui-t classes with measurements.

• div#doc creates a 750px page width.
• div#doc2 creates a 950px page width.
• div#doc3 creates a 100% page width. (Note that the 100% page width also sets 10px of left and right margin so that content had a bit of breathing room between it and the browser chrome.)
• div#doc4 creates a 974px page width, and is a new addition to Grids in YUI version 2.3.0.

• div.yui-t1 creates a narrow column on the left with 160px width.
• div.yui-t2 creates a narrow column on the left with 180px width.
• div.yui-t3 creates a narrow column on the left with 300px width.
• div.yui-t4 creates a narrow column on the right with 180px width.
• div.yui-t5 creates a narrow column on the right with 240px width.
• div.yui-t6 creates a narrow column on the right with 300px width.

Start with header: Divide header section using YUI nesting grid structures, you can use “yui-g” to “yui-gf”. Here are the details with partition measurements.

• div.yui-g – Standard Nesting Grid – tells two children to each take up half the available space.
• div.yui-gb – Special Nesting Grid B – tells three children to each take up a third of the available space.
• div.yui-gc – Special Nesting Grid C – tells the first of two children to take up 66% of the available space.
• div.yui-gd – Special Nesting Grid D – tells the first of two children to take up 33% of the available space.
• div.yui-ge – Special Nesting Grid E – tells the first of two children to take up 75% of the available space.
• div.yui-gf – Special Nesting Grid F – tells the first of two children to take up 25% of the available space.

most popularly used grid partition is “yui-g” which splits given area into 2 equal parts, consider using the grid whichever suits well for you, keep in mind, if you are using YUI grids, you really don’t have to bother about clearing divs etc. But there can be a exception, but handle it case wise.

Follow same kind of partitions for Body and Footer, you will have Basic Grid ready with you now.