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.
February 3, 2010
January 9, 2010
January 1, 2010
Happy New Year 2010
I wish happy new year 2010.
wish you life get eventful
wish your efforts get fruitful
wish your dreams get colorful
December 26, 2009
Offline Help on CS4
If you are new to Flash CS4, and you had habit of pressing F1 on info regarding selecting Class in action-script editor, you run in to this problem. every time you press ‘F1’ you see flash opens new browser window connecting to help.adobe.com. this is the URL opened when I pressed ‘F1’ after selecting MovieClip in code view. I thought flash removed offline help and cursed Adobe for the same. But finally I figured out I was wrong cursing Adobe. You should set your connection settings to offline mode to see offline help on your box.
- Select Window menu
- Select Extensions
- Select Connections
- click on right-top drop down to open offline options
- Select “Keep me offline” checkbox
- You are done.
Next time when you press ‘F1’ Flash CS4 opens offline help pages in new browser window.
December 21, 2009
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/
December 11, 2009
difference between window.onload and document.ready
It’s pretty simple but people tend to forget.
Major bugbeer for javascript developers is non-availability of DOM for javascript execution, if you are including javascript inside <head> tag this is the common situation. window.onload solved this problem. if you callback a function on window.onload that function gets called after page loading completed. Here the problem is javascript execution needs to wait till all CSS and images gets loaded. Hence came the DOMContentLoaded. Most browsers trigger this event when they are ready for javascript execution, this event gets fire before window.onload
all javascript libraries provide hooks to this event,
in jquery
$(document).ready(function() {
// put all your jQuery goodness in here.
});
in yui 2.x
YAHOO.util.Event.onDOMReady(function() {
domReady = true;
alert('Dom is Ready');
});
November 26, 2009
Interesting Facts About Angles
Angles formed between two interesting straight lines, there are 3 types of angles
1. Acute angles – lesser than 90º
2. Obtuse angles – greater than 90º
3. Right angle – Exactly equal to 90º
Below are some interesting facts about angles.
- Adding up all angles in a 3 sided shape aka Triangle will make up to 180º
- Adding up all angles in a 4 sided shape/square/rectangle/parallelogram/quadilateral qill make up to 360º
- A right angle/90º angle denoted by a square mark
- If two angles add up to 180º then they are SUPPLEMENTARY
- If two angles add up to 90º they are COMPLEMENTARY
- Opposite angles formed by two intersecting lines are equal
November 23, 2009
Whole New Approach to HTML Editing
How much time in a day you spend coding html? How many times unmatched div (any for that matter) tags are frustrated you? Here is a quite promising answers to such problems.
Zen-Coding , yeah Zen-coding, smashingmagazine.com’s Sergey Chikuyonok have come up with exiting, yet promising solution for we web-developer’s delight.
You can turn html:xt>div#header>div#logo+ul#nav>li.item-$*5>a
into
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title></title> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> </head> <body> <div> <div></div> <ul> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </div> </body> </html>
with just snap of a shortcut.
Go ahead and explore @ http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ or http://code.google.com/p/zen-coding/
November 12, 2009
PNG export problem with Flash CS4
If you are using Flash CS4 to draw transparent graphics and intend to use them in photoshop later, think twice there is a problem here. Some time Flash CS4 adds some black edges similar to matte edges in GIF, even if you select PNG 24-bit with Alpha Channel. This problem got introduced in Flash CS4, hope Adobe fix it soon. any way solution of this issue seems to be simple, but it’s a work around.
First break apart all text in your graphic, remember to break apart text completely you have to break apart twice. try exporting now, most of the cases this should solve your problems, if not then go ahead and break apart symbols in your graphic. exporting now will give to smooth edged PNG. But by breaking symbols to shapes will often you loose shape arrangements, things behind can come forward, or thing front can go backward. To avoid this situation before breaking apart select all elements in your graphics and “Distribute to Layers” Ctrl+Shift+D, should do that, by doing so every shape, element will get a layer for them selves, breaking apart now will not loose arrangements.
November 5, 2009
Issue with HitArea in Canvas hitArea
I happen to generate a graph in Flex, I needed node element to store data, and have some graphics inside that, without second thought I extended Canvas component for GraphNode.
In flex when you use Canvas to draw some thing behind origin or point (0,0) hitArea of that Canvas happens to behave strangely. I could figure out this problem by giving background colors to this Canvas. You can resolve it in 2 ways,
1. Use a UIComponent for inside a Canvas and set hitArea of that Canvas to it’s child UIComponent
2. Use Container instead of Canvas. If you don’t want given component to respond to updateDisplayList you can safely extend from Container (mx.core.Container)
PS: To have all your graphics behind (0,0) visible, you should have clipContent set to false.
![Lake Dillon and a Tree [In Explore]](https://live.staticflickr.com/65535/53731226172_4004cbfea4_s.jpg "Lake Dillon and a Tree [In Explore]")
Asv3's Blog 